:root {
  /* ==========================================================================
     #1093 design tokens. Brand values come from the launch homepage (#1161):
     navy for header bars, bands and titles; AA teal (#0D7377) for every fill
     and link; #03AFB1 is a decorative accent only (swoosh, rules, icon
     strokes) and never sits under or as text. The WCAG table for every
     text/ground pair lives on the #1093 "tokens + contrast" sub-issue.
     ========================================================================== */
  --font-display: "Montserrat", "Inter", sans-serif;
  --font-body: "Inter", "Montserrat", sans-serif;
  --main-font: var(--font-body);

  /* brand */
  --color-navy-deep: #0B3F4E;
  --color-navy: #10566A;
  --color-navy-ink: #0E4754;
  --color-teal: #0D7377;
  --color-teal-deep: #0A5C5F;
  /* wp-grid-viv-autocomplete reads these (the plugin ships neutral fallbacks) */
  --viv-acpt-accent: var(--color-teal);
  --viv-acpt-active-bg: #0D73771a;
  --color-accent: #03AFB1;
  --color-accent-text: #7FE9EA;
  --color-pale: #C9EEEE;
  --color-wash: #E6F4F4;
  --color-wash-line: #C9E6E4;
  --gradient-navy: linear-gradient(108deg, rgba(11, 63, 78, 0.95) 0%, rgba(16, 86, 106, 0.86) 52%, rgba(11, 63, 78, 0.93) 100%);
  --gradient-bar: linear-gradient(100deg, #0B3F4E 0%, #10566A 60%, #0D4A5B 100%);

  /* neutrals */
  --color-black-10: #18191C;
  --color-black-20: #2F3137;
  --color-grey-40: #5E626E;
  --color-grey-50: #60656F; /* was #767B89 (4.22:1 on white, failed AA as text); now 5.85 / 5.34 / 5.19 on white / ground / wash */
  --color-grey-60: #9195A1; /* decorative only: icon tints, dividers */
  --color-grey-80: #C8CAD0;
  --color-grey-90: #E3E4E7;
  --color-bg: #F2F5F5; /* one page ground (main.css said #F7F7F8, critical-child painted #f2f5f5) */
  --color-ground: var(--color-bg);
  --color-white: #ffffff;

  /* legacy names: the electric-blue scale resolves to the brand teal so the
     ~120 rules that consume it (tabs, links, checks, chips, footer) move
     with the palette instead of being edited one by one. */
  --color-blue-50: var(--color-teal);
  --color-blue-80: #4E9FA1;
  --color-blue-90: var(--color-wash-line);
  --color-blue-95: var(--color-wash);
  --color-blue-bg: #F0F7F7;

  /* semantic (text-safe on white and on their tints) */
  --color-green-40: #087A2E; /* was #0BC546, 2.1:1 on white */
  --color-green-95: #E7FEEE;
  --color-red-40: #C50B0B;
  --color-red-95: #FEE7E7;
  --color-warning: #8A6400;
  --color-warning-bg: #FFF3DC;
  --color-gold: #FFC61C;
  --color-gold-50: #FFCC00;
  --color-orange: #E28801;
  --color-purple: #C600D4;

  /* focus rings: navy on light surfaces (distinct from teal fills), gold on navy */
  --color-focus: var(--color-navy);
  --color-focus-on-dark: var(--color-gold);

  /* type scale */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 40px;
  --text-5xl: 52px;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-body: 1.5;

  /* layout */
  --container: 1224px;
  --medium-container: 1024px;
  --second-container: 800px;
  --small-container: 524px;
  --sidebar-container: 305px;
  --content-padding: 50px;
  --admin-bar-height: 0px;
  --header-top-height: 40px;
  --header-main-height: 104px;

  /* spacing */
  --space: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;
  --space-3xl: 60px;
  --space-4xl: 80px;
  --space-section: 100px;

  /* radius */
  --radius-sm: 4px;
  --radius-btn: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 250px;

  /* elevation */
  --shadow-card: 0 0 54px rgba(0, 0, 0, 0.07), 0 2px 6px rgba(16, 86, 106, 0.06);
  --shadow-lift: 0 22px 44px -20px rgba(16, 86, 106, 0.38), 0 0 54px rgba(0, 0, 0, 0.07);
  --shadow-pop: 0 8px 24px -12px rgba(8, 77, 80, 0.45);
  --shadow-deep: 0 34px 70px -24px rgba(3, 26, 34, 0.65);
  --shadow-bar: 0 8px 24px -14px rgba(3, 26, 34, 0.7);

  --button-height: 48px;

  --modal-xl: 1024px;
  --modal-lg: 700px;
  --modal-md: 540px;
}

.air-datepicker {
  --adp-day-name-color: var(--color-blue-50);
  --adp-accent-color: var(--color-blue-50);
  --adp-cell-background-color-selected: var(--color-blue-50);
  --adp-cell-background-color-selected-hover: var(--color-blue-50);
}

.air-datepicker-global-container {
  z-index: 301;
}

*,
:after,
:before {
  font-family: var(--main-font);
  font-optical-sizing: auto;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-black-10);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: 24px;
  font-family: var(--font-body);
  position: relative;
}

body.admin-bar {
  --admin-bar-height: 32px;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
}

[open-modal] {
  cursor: pointer;
}

input,
textarea,
select {
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-80);
  border-radius: var(--radius);
  padding: 11px 14px;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: var(--color-black-10);
  outline: none; /* #545: was !important; dropped so :focus-visible can restore the ring */
}

textarea {
  resize: none;
  border-radius: 8px;
}

input.viv-field-error,
textarea.viv-field-error,
select.viv-field-error,
select.viv-field-error~.select2 .select2-selection {
  border-color: var(--color-red-40);
}

input:disabled,
textarea:disabled {
  background-color: var(--color-grey-90);
  border-color: var(--color-grey-90);
  color: var(--color-grey-40);
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-top: 11px;
  padding-bottom: 11px;
  padding-right: 46px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='25'%20viewBox='0%200%2024%2025'%20fill='none'%3E%3Cpath%20d='M12.0005%2015.5006L7.75781%2011.258L9.17203%209.84375L12.0005%2012.6722L14.8289%209.84375L16.2431%2011.258L12.0005%2015.5006Z'%20fill='%23767B8A'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: calc(100% - 12px);
}

/* ==========================================================================
   #1093 button system. One family, four roles:
     primary   .button                teal fill / white         5.62:1
     secondary .button.outline        white / teal-deep         7.75:1
     ghost     .button.transparent, .button.text, .button.link
     icon      .button.icon           44px square, wash on hover
   plus .button.blue (navy), .button.white (social sign-in), .button.small
   (wash chip) and the sizes .button.large / .button.pill. States: hover,
   active, focus-visible, disabled. Site-wide the fills used to be #03AFB1
   (white text 2.70:1, fails AA); #03AFB1 is now decorative only.
   ========================================================================== */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: var(--button-height);
  padding: 10px 24px;
  background-color: var(--color-teal);
  color: var(--color-white);
  border: 1px solid var(--color-teal);
  border-radius: var(--radius-btn);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.button svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: currentColor;
}

.button:hover {
  background-color: var(--color-teal-deep);
  border-color: var(--color-teal-deep);
  color: var(--color-white);
}

.button:active {
  background-color: var(--color-navy-deep);
  border-color: var(--color-navy-deep);
}

.button .mobile {
  display: none;
}

.button.large {
  min-height: 54px;
  padding: 12px 30px;
  font-size: 16px;
}

/* the site's small uppercase label pill ("BROWSE ALL SPECIALTIES") */
.button.pill {
  min-height: 42px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.button.outline {
  background-color: var(--color-white);
  border-color: var(--color-teal);
  color: var(--color-teal-deep);
}

.button.outline:hover {
  background-color: var(--color-wash);
  border-color: var(--color-teal-deep);
  color: var(--color-teal-deep);
}

.button.outline:active {
  background-color: var(--color-wash-line);
  border-color: var(--color-teal-deep);
}

.button.transparent {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-teal);
  padding-left: 0;
  padding-right: 0;
}

.button.transparent:hover,
.button.transparent:active {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-teal-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.button.text {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-black-20);
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0;
  padding-left: 0;
  padding-right: 0;
}

.button.text:hover,
.button.text:active {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-teal-deep);
}

.button.link {
  background-color: transparent;
  border-color: transparent;
  min-height: 0;
  padding: 3px 0;
  color: var(--color-teal);
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0;
}

.button.link:hover,
.button.link:active {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-teal-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.button.blue {
  background-color: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-white);
}

.button.blue:hover {
  background-color: var(--color-navy-deep);
  border-color: var(--color-navy-deep);
  color: var(--color-white);
}

.button.white {
  background-color: var(--color-white);
  color: var(--color-black-10);
  border-color: var(--color-grey-80);
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.button.white:hover,
.button.white:active {
  background-color: var(--color-white);
  border-color: var(--color-teal);
  color: var(--color-teal-deep);
  box-shadow: var(--shadow-pop);
}

.button.icon {
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  background-color: transparent;
  border-color: transparent;
  color: var(--color-grey-40);
}

.button.icon:hover {
  background-color: var(--color-wash);
  border-color: var(--color-wash);
  color: var(--color-teal-deep);
}

.button.icon.active {
  background-color: var(--color-teal);
  border-color: var(--color-teal);
  color: var(--color-white);
}

.button.icon svg {
  width: 24px;
  height: 24px;
}

.button.small {
  min-height: 32px;
  gap: var(--space);
  padding: 4px 12px;
  background-color: var(--color-wash);
  border-color: var(--color-wash);
  color: var(--color-teal-deep);
  font-size: 13px;
  letter-spacing: 0.01em;
}

.button.small:hover {
  background-color: var(--color-wash-line);
  border-color: var(--color-wash-line);
  color: var(--color-teal-deep);
}

.button.small svg {
  width: 18px;
  height: 18px;
}

.wp-grid-builder .wpgb-card .small-outline,
.small-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space);
  border: 1px solid var(--color-wash-line);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  cursor: pointer;
  color: var(--color-grey-40);
}

.small-outline svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.button:disabled,
.button[aria-disabled="true"],
.button:disabled:hover,
.button[aria-disabled="true"]:hover {
  cursor: not-allowed;
  background-color: var(--color-grey-90);
  border-color: var(--color-grey-90);
  color: var(--color-grey-40);
  box-shadow: none;
  text-decoration: none;
}

.button:disabled svg,
.button[aria-disabled="true"] svg {
  fill: var(--color-grey-40);
}

.button:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.button-group {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

h1,
.h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-5xl);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h2,
.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h3,
.h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h4,
.h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h5,
.h5 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

h6,
.h6 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.subtitle {
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
}

.subtitle-2 {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
}

.text-body {
  font-weight: 400;
  font-size: 16px;
  line-height: 23px;
}

.text-body-2 {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}

.text-body-bold {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
}

.text-caption {
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
}

label,
.text-label {
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
}

.color-black10 {
  color: var(--color-black-10);
}

.color-black20 {
  color: var(--color-black-20);
}

.color-green40 {
  color: #0B7A3E; /* the cards' free chip colour (vivgb/pricing-resolver.php) */
}

.color-gold {
  color: var(--color-gold);
}

.color-blue50 {
  color: var(--color-blue-50);
}

.color-grey40 {
  color: var(--color-grey-40);
}

.color-grey50 {
  color: var(--color-grey-50);
}

.color-red40 {
  color: var(--color-red-40);
}

.svg-inherit-fill svg {
  fill: currentColor;
}

.svg-inherit-stroke svg {
  stroke: currentColor;
}

.badge-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space) var(--space-sm);
  border-radius: 250px;
  border: 1px solid var(--color-blue-80);
  gap: var(--space);
}

.badge-action button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--color-grey-50);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  width: 20px;
  height: 20px;
  padding: 0 0 2px;
}

.loader {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto auto;
}

.loader::after {
  content: '';
  width: 40px;
  height: 40px;
  border: 2px solid var(--color-blue-bg);
  border-top-color: var(--color-blue-50);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--content-padding) * 2);
  margin: 0 auto;
  padding: 0 var(--content-padding);
}

.medium-container {
  width: 100%;
  max-width: var(--medium-container);
  margin: 0 auto;
}

.small-container {
  width: 100%;
  max-width: var(--small-container);
  margin: 0 auto;
}

body.fullscreen {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.fullscreen.admin-bar {
  min-height: calc(100vh - var(--admin-bar-height));
}

body.fullscreen main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 0;
}

.site-title {
  display: inline-block;
  text-align: center;
  padding: 7.5px 0;
  white-space: nowrap;
}

.site-title a {
  display: inline-block;
}

.auth-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.auth-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding: var(--space-xl) var(--space-2xl);
  background-color: var(--color-white);
  border-radius: var(--space-md);
}

.auth-top {
  text-align: center;
}

.auth-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  text-align: center;
}

.viv-form,
.viv-form-grid,
.viv-form-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.viv-form-divider {
  flex-grow: 1;
  width: 100%;
  height: 1px;
  background-color: var(--color-grey-90);
}

.auth-content .viv-auth-form[data-form="email_confirmation"] {
  margin-top: 0;
}

.viv-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.viv-form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-lg);
}

.viv-form-row.small-gap {
  gap: var(--space-md);
}

.viv-form-row.flex-wrap {
  flex-wrap: wrap;
}

.viv-form-row.align-end {
  align-items: flex-end;
}

.viv-form-row .required {
  display: none;
}

.viv-form-row .form-control {
  display: flex;
  flex-direction: column;
  gap: var(--space);
  text-align: left;
  flex: 1;
  max-width: 100%;
  min-width: 0;
}

.viv-form-row .form-control-autowidth {
  flex: 0 0 auto;
}

.viv-form-row .viv-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  position: relative;
  flex: 1;
}

.viv-form-field.viv-field-content {
  margin-bottom: var(--space-xs);
}

.viv-form-row .viv-form-field .viv-toggle-password {
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(-12px, 50%);
  cursor: pointer;
}

.viv-form-row .viv-form-field .viv-toggle-password:hover svg {
  fill: var(--color-blue-50);
}

.viv-form-row .viv-form-field.password-visible .viv-toggle-password .hide {
  display: none;
}

.viv-form-row .viv-form-field:not(.password-visible) .viv-toggle-password .show {
  display: none;
}

.viv-form-row .form-control .viv-forgot-password {
  text-align: right;
}

.viv-form-row .viv-field-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: var(--space-xs);
  row-gap: var(--space);
  margin-bottom: var(--space);
}

.viv-form-row .viv-field-heading .viv-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  text-align: center;
  margin-bottom: var(--space-xs);
}

.viv-form-row .viv-form-notice {
  width: 100%;
  background-color: var(--color-green-95);
  border-radius: 8px;
  padding: var(--space-sm);
  color: var(--color-black-10);
}

.modal-form-divider {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
}

.modal-form-divider::before,
.modal-form-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--color-grey-90);
}

.viv-form-row .viv-error-message {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-red-40);
}

.viv-form-message {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-black-10);
  border-radius: 8px;
  padding: var(--space-sm);
}

.viv-form-message a {
  text-decoration: underline;
}

.viv-form-message.viv-message-error {
  background-color: var(--color-red-95);
}

.viv-form-message.viv-message-success {
  background-color: var(--color-green-95);
}

.forgot-password-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
}

.forgot-password-success .icon {
  margin-bottom: var(--space);
}

/* vivce#1897: "Skip the password — email me a sign-in link instead" */
.viv-form-row .viv-field-checkbox-wrapper:has(.viv-field-login-link) {
  margin-top: calc(-1 * var(--space-xs, 8px));
}

.viv-checkbox-wrapper:has(.viv-field-login-link) {
  color: var(--color-navy-ink);
}

.login-link-sent__note {
  color: var(--color-grey-40);
}

.auth-container .auth-bottom {
  text-align: center;
}

.auth-container .auth-bottom-link {
  color: var(--color-grey-40);
  text-decoration: underline;
  font-weight: 400;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.auth-bottom.switch-step .auth-bottom-page {
  display: none;
}

.auth-bottom:not(.switch-step) .auth-bottom-back {
  display: none;
}

.viv-checkbox-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  font-weight: 400;
  font-size: 16px;
  line-height: 145%;
  color: var(--color-grey-40);
  cursor: pointer;
}

.viv-checkbox-wrapper input[type='checkbox'] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.viv-checkbox-wrapper a {
  text-decoration: underline;
  color: var(--color-black-10);
}

.viv-checkbox-wrapper .viv-checkbox {
  width: 24px;
  height: 24px;
  border-radius: 0;
  border: 1px solid var(--color-grey-80);
  background-color: var(--color-white);
  display: block;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
}

.viv-checkbox-wrapper .viv-checkbox::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 7px;
  width: 8px;
  height: 14px;
  z-index: 1;
  border-style: solid;
  border-color: var(--color-blue-50);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.viv-checkbox-wrapper input[type='checkbox']:checked+.viv-checkbox::after {
  opacity: 1;
}

.viv-checkbox-custom {
  width: 100%;
}

.viv-checkbox-wrapper input[type='checkbox']:not(:checked)~.viv-checkbox-custom {
  display: none;
}

.viv-checkbox-label {
  flex: 1 0 0;
}

.viv-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
}

.viv-toggle input[type='checkbox'] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.viv-toggle__slider {
  position: relative;
  width: 53px;
  height: 32px;
  background-color: var(--color-grey-90);
  border-radius: 100px;
  transition: background-color 0.2s ease;
}

.viv-toggle input[type='checkbox']:checked~.viv-toggle__slider {
  background-color: var(--color-blue-bg);
}

.viv-toggle__slider::before {
  content: '';
  position: absolute;
  width: 28px;
  height: 28px;
  left: 2px;
  bottom: 2px;
  background-color: var(--color-white);
  transition: all 0.2s ease;
  border-radius: 50%;
  box-shadow: 0px 3px 1px 0px #0000000F, 0px 3px 8px 0px #00000026, 0px 0px 0px 1px #0000000A;
}

.viv-toggle input[type='checkbox']:checked~.viv-toggle__slider::before {
  transform: translateX(20px);
  background-color: var(--color-blue-50);
}

.viv-form-row .viv-field-radio {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-xl);
}

.viv-form-row .viv-field-radio.vertical {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.viv-form-row .viv-radio-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 400;
  font-size: 16px;
  line-height: 23px;
  cursor: pointer;
}

.viv-form-row .viv-radio-wrapper input[type='radio'] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.viv-form-row .viv-radio {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 100%;
  border: 1px solid var(--color-grey-80);
  background-color: var(--color-white);
  flex-shrink: 0;
  position: relative;
}

.viv-form-row .viv-radio::after {
  content: '';
  position: absolute;
  left: 20%;
  display: flex;
  top: 20%;
  height: 60%;
  width: 60%;
  border-radius: 100%;
  background-color: var(--color-blue-50);
  z-index: 1;
  transition: opacity 0.2s ease;
  opacity: 0;
}

.viv-form-row .viv-radio-wrapper input[type='radio']:checked+.viv-radio::after {
  opacity: 1;
}

.viv-form-row .viv-field-radio.masonry {
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-md);
}

.viv-form-row .viv-field-radio.masonry .viv-radio-wrapper {
  flex: 0 0 calc((100% - var(--space-md)) / 2);
  gap: var(--space-sm);
}

.viv-form-row .viv-field-radio.withwrapper .viv-radio-wrapper {
  border-radius: 8px;
  border: 1px solid var(--color-grey-90);
  padding: var(--space-md);
  gap: var(--space-sm);
  width: 100%;
}

.viv-form-row .viv-field-radio.withwrapper .viv-radio-wrapper:hover {
  border-color: var(--color-blue-50);
}

.viv-form-row .viv-field-radio.vertical.withwrapper {
  gap: var(--space-xs);
}

.viv-form-row .viv-radio.square {
  border-radius: 0;
}

.viv-form-row .viv-radio.square::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 7px;
  width: 6px;
  height: 12px;
  border-style: solid;
  border-color: var(--color-blue-50);
  background-color: transparent;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  border-radius: 0;
}

.viv-form-row .viv-radio-wrapper svg {
  flex-shrink: 0;
  margin-right: var(--space);
}

.viv-form-row .viv-field-label .characters {
  font-weight: 400;
  color: var(--color-grey-50);
  margin-left: auto;
}

.viv-form-row .viv-field-label .viv-field-optional {
  font-weight: 400;
  color: var(--color-grey-50);
}

.viv-form-row .viv-field-label.vertical {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space);
}

.viv-form-row .viv-field-label .viv-field-notice {
  width: 100%;
  color: var(--color-grey-40);
}

.viv-form-row .viv-field-submit,
.viv-form-row .viv-field-next {
  margin-top: var(--space-sm);
}

.viv-form-row .viv-field-acceptance {
  margin-top: var(--space-sm);
}

.viv-form-row .viv-field-panel {
  margin-top: var(--space-xs);
}

.viv-form-row .viv-field-panel .viv-radio-wrapper {
  border: 1px solid var(--color-grey-90);
  border-radius: 8px;
  padding: var(--space-md);
}

.viv-form-note {
  padding: var(--space-sm);
  border-radius: 8px;
  background-color: var(--color-green-95);
}

.viv-confirmation-message {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.auth-content .viv-confirmation-code-field {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.viv-resend-section {
  text-align: center;
  margin-top: var(--space-lg);
}

.viv-resend-section .viv-resend-code-btn {
  background: none;
  border: none;
  outline: none;
  text-decoration: underline;
  color: var(--color-black-10);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  cursor: pointer;
}

.viv-resend-section .viv-resend-code-btn:disabled {
  cursor: default;
  color: var(--color-grey-50);
}

header {
  /* overflow: hidden; */
  position: relative;
  z-index: 200;
}

.top-header {
  background-color: var(--color-black-10);
  color: var(--color-white);
}

.top-header .menu {
  display: flex;
  gap: var(--space-lg);
  list-style: none;
}

.top-header .menu a {
  display: flex;
  color: var(--color-grey-80);
  padding: 9px 10px 5px;
  border-bottom: 4px solid transparent;
}

.top-header .menu .menu-item.current-menu-item a {
  border-color: var(--color-white);
  color: var(--color-white);
}

.top-header .menu a.current-menu-item {
  border-color: var(--color-white);
  color: var(--color-white);
}

.header-main-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-md) 0;
}

header .header-logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-main-grid .grid-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-xl);
}

.header-main-grid .grid-item.center {
  flex: 1;
  justify-content: flex-end;
}

.header-main-grid .site-title {
  display: flex;
  align-self: stretch;
}

.header-main-grid .site-title a {
  display: flex;
  align-items: center;
}

.header-container {
  position: relative;
}

.header-container__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--content-padding);
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 100;
}

.header-container__head .mobile-menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  outline: none;
}

.header-container__head .mobile-menu__close svg {
  fill: var(--color-black-10);
}

.account-menu {
  position: relative;
}

.account-menu__container {
  display: flex;
  align-items: center;
  gap: var(--space);
  cursor: pointer;
}

.account-menu__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}

.account-menu__avatar .account-avatar {
  width: 44px;
  height: 44px;
  font-size: 18px;
}

.account-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--color-blue-90);
  font-weight: 500;
  font-size: 1em;
  text-transform: uppercase;
  user-select: none;
}

.account-menu__user {
  display: flex;
  flex-direction: column;
  gap: var(--space);
  align-items: flex-start;
  text-align: left;
}

.account-menu .arrow-icon svg {
  fill: var(--color-grey-50);
}

.account-menu.active .arrow-icon svg {
  fill: var(--color-blue-50);
  transform: rotate(180deg);
}

.account-menu__list {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: var(--space);
  z-index: 2;
}

.account-menu__list ul {
  padding: var(--space);
  box-shadow: 0px 2px 8px 0px #00000026;
  background-color: var(--color-white);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  list-style: none;
}

.account-menu__list .divider {
  height: 1px;
  background-color: var(--color-grey-90);
  margin: var(--space) 0;
}

.account-menu__list .account-menu__list-link {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs);
  padding: var(--space-sm);
  white-space: nowrap;
  color: var(--color-black-20);
  text-align: left;
  width: 100%;
}

.account-menu__list .account-menu__list-link:hover {
  background-color: var(--color-blue-95);
}

.account-menu__user-info {
  display: flex;
  flex-direction: column;
  gap: var(--space);
  padding: var(--space-xs) var(--space-md);
  text-align: left;
}

.account-menu__user-name {
  color: var(--color-black-20);
}

.account-menu__user-role {
  color: var(--color-grey-40);
  text-transform: capitalize;
}

.header-main-specialty.active svg {
  transform: rotate(180deg);
}

.main-menu {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100%);
  z-index: 1;
  height: calc(100vh - 40px - 100% - var(--admin-bar-height, 0px));
  width: 100vw;
  left: calc((100% - 100vw) / 2);
  border-top: 1px solid #0000001A;
}

body.header-fixed .main-menu {
  height: calc(100vh - 100% - var(--admin-bar-height, 0px));
}

.main-menu__container {
  position: relative;
  padding: var(--space-lg) 0 var(--space-2xl);
  z-index: 2;
  background-color: var(--color-white);
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.main-menu__container .container {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.main-menu__background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-black-10);
  opacity: 0.2;
  z-index: 1;
}

.specialty-navigation {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  height: 100%;
  overflow: auto;
  width: 100%;
}

.specialty-navigation__search-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  flex-shrink: 0;
  margin-bottom: var(--space-xs);
}

.specialty-navigation__search-title {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.specialty-navigation__search {
  max-width: 670px;
  margin: 0 auto;
  display: flex;
  border-radius: 250px;
  border: 1px solid var(--color-grey-80);
  padding: 3px 3px 3px 20px;
  background-color: var(--color-white);
  gap: var(--space-xs);
  width: 100%;
}

.specialty-navigation__search-input {
  border: none;
  padding: 0;
  background-color: transparent;
  flex-grow: 1;
}

.specialty-navigation__search-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: var(--color-blue-95);
  border-radius: 100%;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.specialty-navigation__badges {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.specialty-navigation__badges .badge-action {
  display: none;
}

.specialty-navigation__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-bottom: var(--space-md);
  width: 100%;
  overflow: hidden;
}

.specialty-navigation__parents {
  list-style: none;
  width: 100%;
  overflow: auto;
}

.specialty-navigation__parent {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.specialty-navigation__parent-data {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-xs);
  border-radius: 8px;
  border: 1px solid var(--color-grey-90);
  cursor: pointer;
  transition: all 0.2s linear;
  min-height: 60px;
}

.specialty-navigation__parent-icon:not(.default) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: #F1FFFF;
  flex-shrink: 0;
  padding: var(--space-xs);
  flex-shrink: 0;
  border: 1px solid #81DFE0;
}

.specialty-navigation__parent-icon.default {
  height: 40px;
  width: 60px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

.specialty-navigation__parent-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.specialty-navigation__parent-title {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--color-grey-40);
  gap: var(--space-xs);
  overflow-wrap: break-word;
  word-break: break-word;
}

.specialty-navigation__parent-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 100%;
  background-color: var(--color-blue-bg);
  flex-shrink: 0;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}

.specialty-navigation__parent-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid var(--color-blue-90);
  padding: 8px;
}

.specialty-navigation__parent-arrow svg {
  fill: var(--color-grey-80);
}

.specialty-navigation__parent-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.specialty-navigation__parent.preview .specialty-navigation__parent-data,
.specialty-navigation__parent.expanded .specialty-navigation__parent-data,
.specialty-navigation__parent-data:hover {
  background-color: var(--color-blue-95);
}

.specialty-navigation__parent.preview .specialty-navigation__parent-title,
.specialty-navigation__parent.expanded .specialty-navigation__parent-title,
.specialty-navigation__parent-data:hover .specialty-navigation__parent-title {
  color: var(--color-black-10);
}

.specialty-navigation__parent.preview .specialty-navigation__parent-arrow svg,
.specialty-navigation__parent.expanded .specialty-navigation__parent-arrow svg,
.specialty-navigation__parent-data:hover .specialty-navigation__parent-arrow svg {
  fill: var(--color-blue-50);
}

.specialty-navigation__parent.preview .specialty-navigation__parent-arrow svg,
.specialty-navigation__parent.expanded .specialty-navigation__parent-arrow svg {
  transform: rotate(90deg);
}

.specialty-navigation__status {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  padding: 2px;
}

.specialty-navigation__status::after {
  content: '';
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  border: 1px solid var(--color-grey-60);
  width: 100%;
  height: 100%;
}

.specialty-navigation__status-wrapper {
  position: relative;
}

.specialty-navigation__status-wrapper input[type='checkbox'] {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  opacity: 0;
}

.specialty-navigation__parent.preview:not(.expanded) .specialty-navigation__children {
  display: flex;
}

.specialty-navigation__parent:not(.expanded) .specialty-navigation__children {
  display: none;
}

.specialty-navigation__children {
  display: flex;
  flex-direction: column;
  gap: var(--space);
  background-color: var(--color-bg);
  max-height: 392px;
  padding: var(--space-sm);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.specialty-navigation__children-list {
  display: flex;
  flex-direction: column;
  gap: var(--space);
  list-style: none;
  overflow: auto;
}

.specialty-navigation__child {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  justify-content: space-between;
  padding: var(--space-xs);
  border-radius: 8px;
  border: 1px solid transparent;
  transition: all 0.2s linear;
  cursor: pointer;
  min-height: 60px;
}

.specialty-navigation__child-wrapper.hide {
  display: none;
}

.specialty-navigation__child-icon:not(.default) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: var(--color-blue-90);
  flex-shrink: 0;
  padding: var(--space-xs);
}

.specialty-navigation__child-icon.default {
  height: 40px;
  width: 60px;
  border-radius: 4px;
  overflow: hidden;
}

.specialty-navigation__child-title {
  flex: 1;
}

.specialty-navigation__parent.preview .specialty-navigation__child-title {
  color: var(--color-grey-40);
}

.specialty-navigation__parent.preview .specialty-navigation__child-title mark {
  color: var(--color-black-10);
  background-color: transparent;
}

.specialty-navigation__child-container {
  position: relative;
}

.specialty-navigation__child-container input[type='checkbox']:checked~.specialty-navigation__child,
.specialty-navigation__child:hover {
  border-color: var(--color-blue-50);
}

.specialty-navigation__child-container input[type='checkbox'] {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  opacity: 0;
}

.specialty-navigation__status-wrapper input[type='checkbox']:checked+.specialty-navigation__status::after,
.specialty-navigation__child-container input[type='checkbox']:checked~.specialty-navigation__child .specialty-navigation__status::after {
  background-image: url('../img/icons/checkbox-circle-fill.svg');
  background-size: 120%;
  background-position: center center;
  background-repeat: no-repeat;
  border: none;
}

.specialty-navigation__control {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-md);
}

.specialty-navigation__control-button {
  border: none;
  background: transparent;
  cursor: pointer;
  outline: none;
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
  color: var(--color-blue-50);
  padding: 8px 0;
}

.specialty-navigation__control-button:disabled {
  color: var(--color-grey-60);
  cursor: default;
}

.specialty-navigation__list-actions {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-lg);
  row-gap: var(--space-xl);
  justify-content: flex-end;
  width: 100%;
  margin-top: var(--space-xs);
}

.specialty-navigation__action-hint {
  width: 100%;
  text-align: center;
}

.specialty-navigation__action-hint a {
  color: var(--color-blue-50);
  text-decoration: underline;
}

.specialty-navigation__archive svg {
  fill: var(--color-blue-50);
}

.specialty-navigation__messages {
  width: 100%;
  text-align: center;
}

.specialty-navigation__empty {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
}

.specialty-navigation__empty a {
  color: var(--color-blue-50);
  text-decoration: underline;
}

.specialty-navigation__hint {
  width: 100%;
  text-align: center;
}

.specialty-navigation__hint a {
  color: var(--color-blue-50);
  text-decoration: underline;
}


@keyframes header-search-in {
  from {
    width: 0;
    opacity: 0;
    visibility: hidden;
  }

  to {
    width: 100%;
    opacity: 1;
    visibility: visible;
  }
}

.global-search {
  display: flex;
  position: relative;
  width: 100%;
}

.global-search__container {
  position: relative;
  flex: 1;
}

.global-search__form {
  display: flex;
  align-items: center;
  border-radius: 250px;
  border: 1px solid var(--color-grey-80);
  padding: 3px 3px 3px 20px;
  background-color: var(--color-white);
  gap: var(--space-xs);
}

.global-search.header-main-search {
  max-width: 400px;
}

.global-search.header-main-search .global-search__container {
  display: flex;
  justify-content: flex-end;
}

.global-search.header-main-search .global-search__form {
  display: inline-flex;
  justify-content: flex-end;
  overflow: hidden;
  transition: all 0.3s ease;
}

.global-search.header-main-search .global-search__form:not(.expanded) {
  border-color: transparent;
  background-color: transparent;
  padding: 0;
}

.global-search.header-main-search .global-search__form .global-search__input {
  flex-grow: 0;
  width: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
}

.global-search.header-main-search .global-search__form:not(.expanded) .global-search__input {
  display: none;
}

.global-search.header-main-search .global-search__form.expanded {
  flex-grow: 1;
}

.global-search.header-main-search .global-search__form.expanded .global-search__input {
  animation: header-search-in 0.3s ease forwards;
}

.global-search.body-main-search {
  max-width: 670px;
  margin: 0 auto var(--space-lg);
}

.global-search__input {
  border: none;
  padding: 0;
  background-color: transparent;
  flex-grow: 1;
}

/* #1397: the sitewide input:focus-visible ring (main.css ~5862) draws a rectangle
   on this borderless, full-bleed input with nothing to hug it. Move the ring to
   the pill (.global-search__form) instead of dropping it, so keyboard focus (#545)
   still shows. Scoped to header + library/body variants only — the homepage hero
   (.banner-search) keeps the ring on its own input by design (#1397 "Open"). */
.global-search.header-main-search .global-search__input:focus-visible,
.global-search.body-main-search .global-search__input:focus-visible {
  outline: none;
}

.global-search.header-main-search .global-search__form:focus-within {
  outline: 2px solid var(--color-focus-on-dark);
  outline-offset: 0;
}

.global-search.body-main-search .global-search__form:focus-within {
  outline: 2px solid var(--color-teal);
  outline-offset: 0;
}

.global-search__submit.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: var(--color-blue-95);
  border-radius: 100%;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.global-search__result {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: var(--space);
  width: 100%;
  z-index: 3;
  text-align: left;
}

.global-search.has-value .global-search__result {
  display: block;
}

.global-search .global-search__result-list {
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  box-shadow: 0px 2px 8px 0px #00000026;
  border-radius: 4px;
  padding: var(--space);
  list-style: none;
}

.global-search__result-list li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  border-radius: 2px;
  padding: var(--space-sm);
  color: var(--color-grey-50);
  font-size: 16px;
  font-weight: 400;
  line-height: 23px;
  min-width: 0;
  max-width: 100%;
}

.global-search__item-text {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-search__result-list li svg {
  fill: var(--color-black-20);
  flex-shrink: 0;
}

.global-search__result-list li .global-search__query {
  color: var(--color-black-20);
}

.global-search__result-list li.global-search__group {
  pointer-events: none;
  cursor: default;
  color: var(--color-grey-50);
  text-transform: capitalize;
  font-size: 14px;
  line-height: 20px;
  padding: var(--space-sm) var(--space-sm) 0;
}

.global-search__result-list li:not(.no-results) {
  cursor: pointer;
}

.global-search__result-list li.no-results {
  pointer-events: none;
}

.global-search__result-list mark {
  background-color: transparent;
  color: var(--color-black-10);
}

.global-search__result-list .activity-provider {
  opacity: 0.5;
}

.global-search__result-list li:not(.no-results):not(.global-search__group):hover {
  background-color: var(--color-blue-95);
}

.global-search.has-filters .global-search__form {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.global-search.has-filters .global-search__filters .button {
  height: 100%;
  border-radius: 250px 0 0 250px;
}

.global-search__filter-list {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: var(--space);
  z-index: 3;
  background-color: var(--color-white);
  box-shadow: 0px 2px 8px 0px #00000026;
  border-radius: 4px;
  padding: var(--space);
  list-style: none;
}

.global-search__filter-list li {
  padding: var(--space-sm);
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.global-search__filter-list .viv-checkbox-wrapper {
  color: var(--color-black-10);
}

footer {
  margin-top: var(--space-section);
  background-color: var(--color-blue-95);
}

.footer-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-xl) 0;
}

.footer-grid .footer-top {
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-blue-90);
}

.footer-grid .footer-bottom {
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-blue-90);
}

.footer-grid .footer-body {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: repeat(3, 1fr);

}

.footer-grid .footer-menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-grid .footer-menu .col-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--color-grey-40);
}

.footer-grid .footer-menu .sub-menu {
  display: flex;
  flex-direction: column;
  list-style: none;
}

.footer-grid .footer-menu .sub-menu a {
  display: inline-block;
  padding: var(--space) 0;
}

.footer-grid .copyright-menu {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  list-style: none;
  gap: var(--space);
}

.footer-grid .copyright-menu li {
  display: flex;
  gap: var(--space);
}

.footer-grid .copyright-menu li+li::before {
  content: "·";
  font-size: 20px;
}

.content-grid {
  display: grid;
  grid-template-columns: auto var(--sidebar-container);
  grid-template-rows: auto minmax(0, 1fr);
  align-items: flex-start;
  gap: var(--space-md);
}

.content-grid.left-sidebar {
  grid-template-columns: var(--sidebar-container) auto;
}

.content-grid,
.content-grid.left-sidebar {
  --sidebar-container: 250px;
}

.content-grid__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  overflow: hidden;
  grid-column: 1;
  grid-row: auto;
}

.content-grid__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  overflow: hidden;
  grid-column: 1;
  grid-row: auto;
}

.content-grid.left-sidebar .content-grid__head {
  grid-column: 2;
}

.content-grid.left-sidebar .content-grid__content {
  grid-column: 2;
}

.content-grid__sidebar {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-self: flex-start;
  overflow: hidden;
  /* position: sticky;
  top: calc(var(--admin-bar-height) + var(--space-md));
  right: 0; */
}

.content-grid.left-sidebar .content-grid__sidebar {
  grid-column: 1;
}

.content-plate {
  background-color: var(--color-white);
  padding: var(--space-md);
  border-radius: 8px;
  border: 1px solid var(--color-grey-90);
}

.content-plate.size-small {
  padding: var(--space-sm);
}

.content-plate.size-large {
  padding: var(--space-lg);
}

.global-topbar {
  margin: var(--space-xs) 0 var(--space-md);
}

.global-topbar__grid {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.global-topbar__grid .return-page:hover {
  color: var(--color-blue-50);
}

.global-topbar__grid .return-page:hover svg {
  fill: currentColor;
}

.breadcrumbs {
  max-width: 100%;
  overflow: hidden;
}

.breadcrumbs__list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-black-10);
  white-space: nowrap;
}

.breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.breadcrumbs__item:last-child {
  font-weight: 500;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breadcrumbs__item:last-child span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breadcrumbs__item:not(:last-child)::after {
  content: "/";
  font-weight: normal;
}

.breadcrumbs__item a {
  color: var(--color-grey-40);
}

.viv-modal {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 300;
}

.viv-modal__wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  padding: var(--space-lg) 0;
}

.viv-modal__container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  width: 100%;
  padding: var(--space-2xl);
  position: relative;
  z-index: 2;
  background-color: var(--color-white);
  max-width: var(--modal-lg);
  border-radius: 16px;
  max-height: calc(100vh - (2 * var(--space-lg)));
}

.viv-modal__container.medium-size {
  max-width: var(--modal-xl);
}

.viv-modal__container.small-size {
  max-width: var(--modal-md);
}

.viv-modal__content {
  display: flex;
  flex-direction: column;
  width: calc(100% + var(--space-sm) * 2);
  position: relative;
  z-index: 3;
  max-height: 100%;
  overflow-y: auto;
  padding: 0 var(--space-sm);
  margin: 0 calc(var(--space-sm) * -1);
}

.viv-modal__background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: #00000033;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.viv-modal__container .close-button {
  display: flex;
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  z-index: 5;
}

.viv-modal__container .close-button:hover svg {
  fill: var(--color-blue-50);
}

.viv-modal__container.fullscreen,
.viv-modal__container.fullscreen .viv-modal__content {
  flex-grow: 1;
}

.select2-container--default .select2-selection--single {
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-90);
  border-radius: 4px;
  height: auto;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 10px 36px 10px 12px;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: var(--color-black-10);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  width: 24px;
  top: 0;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-grey-50);
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow {
  transform: rotate(180deg);
  color: var(--color-blue-50);
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none;
}

.select2-container--open .select2-dropdown {
  box-shadow: 0px 2px 8px 0px #00000026;
  border: none;
  border-radius: 4px;
  padding: var(--space);
  top: 4px;
}

.select2-results__option {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-black-10);
  padding: 10px 8px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--color-grey-50);
}

.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--color-blue-95);
  color: var(--color-black-10);
}

.select2-container--default .select2-results>.select2-results__options {
  max-height: 240px;
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.modal-form__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.modal-form__top.align-center {
  align-items: center;
  text-align: center;
}

.modal-form__title.center {
  text-align: center;
}

.modal-form__description {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Exit modal on the single-activity page (#1937, ported from dev #746). */
.exit-modal-title {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
}

.exit-modal-title__provider {
  font-size: 0.8em;
  font-weight: 400;
  color: var(--color-grey-50);
}

.exit-modal-quote {
  margin: 0;
  padding: var(--space-xs) var(--space-sm);
  border-left: 3px solid var(--color-teal);
  font-style: italic;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-black-20);
}

/* The "let us know" trigger: a button that reads as an inline link. */
.exit-modal__link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--color-teal);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.exit-modal__link:hover,
.exit-modal__link:focus-visible {
  color: var(--color-teal-deep);
}

/* Two labelled buttons in the small modal: keep each on one line, let the row wrap. */
.exit-modal .modal-form__actions {
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.exit-modal .modal-form__actions .button {
  white-space: nowrap;
}

.exit-modal .button.transparent svg {
  width: 1em;
  height: 1em;
}

.modal-form__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.viv-form.gap-big,
.viv-form-grid.gap-big,
.modal-form__body.gap-big {
  gap: var(--space-xl);
}

.viv-form.gap-small,
.viv-form-grid.gap-small,
.modal-form__body.gap-small {
  gap: var(--space-md);
}

.modal-form__body.align-center {
  align-items: center;
  text-align: center;
}

.modal-form__body.top-margin {
  margin-top: var(--space-xs);
}

.modal-form__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.modal-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-lg);
}

.modal-form__actions.center {
  justify-content: center;
}

.modal-form__actions.between {
  justify-content: space-between;
}

.modal-form__extra {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.modal-form__extra-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.modal-form__actions.left {
  justify-content: flex-start;
}

.modal-form__post-info {
  display: flex;
  flex-direction: column;
  gap: var(--space);
}

.modal-form__post-info .label {
  color: var(--color-grey-50);
}

.post-thumbnail-wrapper {
  display: grid;
}

.post-thumbnail {
  width: 100%;
  position: relative;
  /* 3:2. Provider logos are wordmarks far more often than square marks, and a
     wide lockup letterboxed into a square renders about a third smaller. */
  padding-top: 66.67%;
  background-color: #8ACADA;
  border-radius: var(--space-xs);
  overflow: hidden;
}

.post-thumbnail img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-thumbnail--provider-logo {
  background-color: #fff;
}

.post-thumbnail--provider-logo img {
  box-sizing: border-box;
  object-fit: contain;
  padding: 8%;
}

.single-activity__sidebar .post-thumbnail-wrapper {
  width: 100%;
  max-width: 250px;
  margin-inline: auto;
}

.content-grid__sidebar-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.content-grid__sidebar-content .property-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  list-style: none;
}

.content-grid__sidebar-content .property-list__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-xs);
  border-bottom: 1px solid var(--color-grey-90);
  padding-bottom: var(--space-sm);
}

.content-grid__sidebar-content .property-list__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.content-grid__sidebar-content .property-list__item:not(.property-list__actions) svg {
  width: 24px;
  height: 24px;
  fill: var(--color-black-20);
}

.content-grid__sidebar-content .property-list__item .global-info svg {
  width: 18px;
  height: 18px;
  fill: var(--color-blue-80);
}

.content-grid__sidebar-content .property-list__label {
  color: var(--color-grey-50);
}

.property-list__value {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.property-list__value.not-available {
  color: var(--color-grey-50);
}

.global-info {
  display: flex;
  cursor: pointer;
}

.property-list__item-checkbox {
  display: flex;
}

.property-list__item-checkbox svg {
  width: 24px;
  height: 24px;
}

.deadline-indicator {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  width: 100%;
}

.deadline-indicator__date {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.deadline-indicator__date svg {
  flex-shrink: 0;
}

.content-grid__sidebar-content .deadline-indicator--good .deadline-indicator__date svg {
  fill: var(--color-green-40);
}

.content-grid__sidebar-content .deadline-indicator--warning .deadline-indicator__date svg {
  fill: var(--color-gold-50);
}

.content-grid__sidebar-content .deadline-indicator--danger .deadline-indicator__date svg {
  fill: var(--color-red-40);
}

.content-grid__sidebar-content .deadline-indicator--expired .deadline-indicator__date svg {
  fill: var(--color-grey-60);
}

.deadline-indicator__bar-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: 100%;
}

.deadline-indicator__bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
  height: 6px;
  background: var(--color-grey-90);
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
  position: relative;
}

.deadline-indicator__bar::after {
  content: '';
  display: block;
  height: 100%;
  width: var(--deadline, 0%);
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 8px;
}

.deadline-indicator--good .deadline-indicator__bar::after {
  background: var(--color-green-40);
}

.deadline-indicator--warning .deadline-indicator__bar::after {
  background: var(--color-gold-50);
}

.deadline-indicator--danger .deadline-indicator__bar::after {
  background: var(--color-red-40);
}

.content-grid__sidebar-content .property-list__actions {
  gap: var(--space-sm);
}

.content-grid__sidebar-content .property-list__actions .button {
  width: 100%;
}

.single-activity__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.single-activity__header-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.single-activity__header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-xl);
}

.single-activity__specialty {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.activity__provider {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* #1184: the provider name links to the public /provider/<slug>/ page */
.activity__provider-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color .15s;
}
.activity__provider-link:hover,
.activity__provider-link:focus-visible {
  text-decoration-color: currentColor;
}

.activity__tags {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  list-style: none;
}

.activity__tag {
  color: var(--color-white);
  border-radius: 2px;
  padding: 2px 8px;
  font-weight: 600;
  font-size: 12px;
  line-height: 15px;
  text-transform: uppercase;
}

.single-activity__header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.single-activity__header-bottom {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-lg);
}

.single-activity__header-bottom .report-activity {
  padding: 0;
  color: var(--color-grey-50);
}

.activity-reviews-rating {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-md) 0 var(--space-lg);
  border-bottom: 1px solid var(--color-grey-90);
}

.rating-stars {
  display: flex;
}

.post-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-blue-95);
  min-width: 22px;
  min-height: 22px;
  border-radius: 250px;
  padding: 4.5px 5.5px;
  aspect-ratio: 1/1;
}

.post-counter.big-size {
  min-width: 32px;
  min-height: 32px;
}

.tabs {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.tabs__control-wrapper {
  width: 100%;
  border-bottom: 1px solid var(--color-grey-90);
}

.tabs__control {
  display: flex;
  align-items: center;
}

.tabs__control:not(.swiper-wrapper) {
  gap: var(--space-lg);
}

.tabs__control-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  background-color: transparent;
  color: var(--color-grey-40);
  border: none;
  padding-bottom: var(--space-xs);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  width: auto;
}

.tabs__control-item.swiper-slide {
  margin-right: var(--space-xl);
}

.tabs__control-item.active {
  color: var(--color-black-10);
  border-color: var(--color-blue-50);
}

.tabs__control-item svg {
  fill: currentColor;
}

.tabs__control-item.active svg {
  fill: var(--color-blue-50);
}

.tab-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.tab-panel:not(.active) {
  display: none;
}

.single-activity__description-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-grey-90);
}

.single-activity__description {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.single-activity__description-grid h1,
.single-activity__description-grid h2,
.single-activity__description-grid h3,
.single-activity__description-grid h4,
.single-activity__description-grid h5,
.single-activity__description-grid h6 {
  margin-top: var(--space-sm);
}

.single-activity__description-grid ul,
.single-activity__description-grid ol {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  list-style: none;
}

.single-activity__description-grid li {
  position: relative;
  padding-left: var(--space-2xl);
  max-width: 540px;
  line-height: 24px;
}

.single-activity__description-grid li::before {
  content: url('../img/icons/check-line.svg');
  position: absolute;
  left: 0;
  top: 0;
}

.single-activity__mo {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.single-activity__schedule {
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-grey-90);
}

.activity-properties {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.activity-properties__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.activity-properties__item-empty {
  display: flex;
  flex-direction: column;
  gap: var(--space);
}

.activity-properties__note {
  background-color: var(--color-bg);
  padding: var(--space-sm);
  border-radius: 8px;
}

.info-list {
  display: grid;
  column-gap: var(--space-4xl);
}

.info-list.general-list,
.info-list.schedule-list {
  grid-template-columns: repeat(2, minmax(auto, 230px));
}

.info-list.cme-list {
  grid-template-columns: 1fr 1fr;
}

.info-list__item {
  display: flex;
  justify-content: space-between;
  gap: var(--space-xs);
}

.info-list.schedule-list .info-list__item,
.info-list.general-list .info-list__item {
  flex-direction: column;
}

.info-list.cme-list .info-list__item,
.info-list.moc-list .info-list__item {
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--color-grey-90);
}

.info-list.cme-list .info-list__item:nth-child(-n + 2),
.info-list.moc-list .info-list__item:first-child {
  border-top: none;
}

.info-list__data {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.info-list__switch {
  display: flex;
  align-items: center;
  gap: var(--space);
}

.info-list__switch svg {
  width: 16px;
  height: 16px;
}

.provider-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.provider-detail__addresses {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.provider-detail__addresses ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  list-style: none;
  width: 100%;
}

.provider-detail__addresses li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.provider-detail__description {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.provider-detail__activities {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.provider-detail__activities ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-lg);
  row-gap: var(--space-sm);
  list-style: none;
  width: 100%;
}

.provider-detail__activities li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-radius: 8px;
  border: 1px solid var(--color-grey-90);
}

.provider-detail__activities .post-thumbnail-wrapper {
  width: 100%;
  max-width: 135px;
  flex-shrink: 0;
}

.provider-detail__activity-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.provider-detail__activities .title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.provider-detail__activities .points {
  display: flex;
  align-items: center;
  gap: var(--space);
}

.provider-detail__price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.provider-detail__price p {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.provider-detail__specialties {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.provider-detail__specialties ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  list-style: none;
  width: 100%;
}

.provider-detail__specialties ul li:nth-child(n+15) {
  display: none;
}

.provider-detail__specialties ul.expanded li {
  display: list-item;
}

.provider-detail__specialties ul li a:hover {
  color: var(--color-blue-50);
}

.share-post-url {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  border: 1px solid var(--color-grey-90);
  border-radius: 4px;
  padding: var(--space-xs);
}

.share-post-url__link {
  color: var(--color-grey-50);
  white-space: nowrap;
  overflow: hidden;
}

.share-post-url__copy {
  flex-shrink: 0;
}

.share-social {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.share-social__list {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  list-style: none;
}

.share-social__item,
.share-social__link {
  display: inline-flex;
}

.tippy-box[data-theme~='tooltip'],
.res-grid.wp-grid-builder .wpgb-card div.tippy-box[data-theme~='tooltip'] {
  background-color: var(--color-white);
  color: var(--color-black-10);
  box-shadow: 0px 2px 12px 0px #0000001A;
  border-radius: 4px;
  white-space: normal;
}

.tippy-box[data-theme~='tooltip']:has(.no-moc-points),
.res-grid.wp-grid-builder .wpgb-card div.tippy-box[data-theme~='tooltip']:has(.no-moc-points) {
  max-width: 240px !important;
}

/* vivce#1865 — specialty chip tooltip: name, one count line, arrow link. */
.tippy-box[data-theme~='tooltip']:has(.specialty-tooltip-content),
.res-grid.wp-grid-builder .wpgb-card div.tippy-box[data-theme~='tooltip']:has(.specialty-tooltip-content) {
  max-width: 260px !important;
}

/* vivce#1548 — wide enough for a couple of sponsor names to wrap cleanly;
   #1677: 300 keeps the rule line at three lines and the hide link on one */
.tippy-box[data-theme~='tooltip']:has(.commercial-support-tooltip),
.res-grid.wp-grid-builder .wpgb-card div.tippy-box[data-theme~='tooltip']:has(.commercial-support-tooltip) {
  max-width: 300px !important;
}

.tippy-box[data-theme~='tooltip'] .tippy-content {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  padding: var(--space-sm);
}

.tippy-box[data-theme~='tooltip'] .tippy-arrow,
.res-grid.wp-grid-builder .wpgb-card div.tippy-box[data-theme~='tooltip'] .tippy-arrow {
  color: var(--color-white);
  border-top-color: var(--color-white);
  border-bottom-color: var(--color-white);
}

.bookmark-button.bookmarked path {
  fill: var(--color-blue-50);
}

.page-header.top-space {
  margin-top: var(--space-md);
}

.page-header__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
}

.page-header__data {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-lg);
}

.page-header__description {
  width: 100%;
}

.page-header__data .page-header__description {
  width: auto;
  flex-grow: 1;
}

.page-header__status {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.page-header__status svg {
  width: 24px;
  height: 24px;
}

.page-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-lg);
}

.page-header__actions-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-lg);
}

.page-header__date {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.resources-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.resources-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  list-style: none;
}

.resources-list__item {
  display: grid;
  grid-template-areas: "title status date actions"
    "count status date actions";
  grid-template-columns: 1fr 1fr 1fr 1fr;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  column-gap: var(--space-lg);
  row-gap: var(--space);
  border-radius: 8px;
  border: 1px solid var(--color-grey-90);
  background-color: var(--color-white);
  position: relative;
  transition: all 0.2s ease-in-out;
}

.resources-list__item:hover {
  background-color: var(--color-blue-95);
}

.resources-list__item-link {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.resources-list.saved-searches-list .resources-list__item {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "title date actions";
}

.resources-list__item-date {
  display: flex;
  grid-area: date;
  position: relative;
  z-index: 1;
}

.resources-list__item-status {
  display: flex;
  grid-area: status;
  position: relative;
  z-index: 3;
  pointer-events: none;
}

.resources-list__item-status .select2-container,
.resources-list__item-status select {
  pointer-events: all;
  max-width: 160px;
}

.resources-list__item-status .select2-container.select2-container--default .select2-selection--single {
  background-color: transparent;
}

.resources-list__item-title {
  grid-area: title;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  position: relative;
  z-index: 1;
}

.resources-list__item-icon {
  display: flex;
}

.resources-list__item-count {
  color: var(--color-grey-50);
  grid-area: count;
  position: relative;
  z-index: 1;
}

.resources-list__item-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-lg);
  position: relative;
  z-index: 3;
  pointer-events: none;
}

.resources-list__item-links,
.resources-list__item-buttons {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  pointer-events: all;
}

.resources-list__item-buttons a,
.resources-list__item-buttons button {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid var(--color-blue-90);
  padding: var(--space);
  background-color: transparent;
  cursor: pointer;
  color: var(--color-grey-50);
}

.resources-list__item-buttons svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.resources-list__item-buttons a:hover,
.resources-list__item-buttons button:hover {
  border-color: var(--color-blue-50);
  background-color: var(--color-white);
}

.resources-list__item-buttons a:active,
.resources-list__item-buttons button:active {
  border-color: var(--color-blue-50);
  background-color: var(--color-white);
  color: var(--color-black-10);
}

.resources-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.resources-actions__filters {
  display: flex;
  gap: var(--space-md);
  min-width: 250px;
}

.resources-actions__filter-order {
  flex: 1;
}

.collection-editor__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.collection-editor__handle {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.collection-editor__actions {
  display: flex;
  gap: var(--space-md);
}

.resources-grid__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  padding: var(--space-2xl);
  margin-top: var(--space-xs);
}

.resources-grid__empty-icon {
  width: 100px;
  height: 100px;
}

.resources-grid__empty-icon svg {
  width: 100%;
  height: 100%;
  fill: var(--color-blue-90);
}

.resources-grid__empty-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  text-align: center;
}

.resources-grid__empty-action {
  display: flex;
  justify-content: center;
}

/* vivce#2016 — bookmarks empty state: a real course card (2x crop) with the bookmark icon
   ringed. --bm-x / --bm-y are the icon's centre as a share of each crop; re-measure them
   if the crops in img/empty-states/ are re-shot. */
.bookmarks-empty-shot {
  --bm-x: 94.68%;
  --bm-y: 18.07%;
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0;
  background: var(--color-white);
  border: 1px solid var(--color-grey-90);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
}

.bookmarks-empty-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px 8px 0 0;
}

.bookmarks-empty-shot__ring {
  position: absolute;
  left: var(--bm-x);
  top: var(--bm-y);
  width: 36px;
  height: 36px;
  border: 2px solid var(--color-teal);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px rgba(13, 115, 119, 0.14);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .bookmarks-empty-shot__ring {
    animation: bookmarks-empty-pulse 2.4s ease-out infinite;
  }
}

@keyframes bookmarks-empty-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(13, 115, 119, 0.32); }
  70%  { box-shadow: 0 0 0 12px rgba(13, 115, 119, 0); }
  100% { box-shadow: 0 0 0 0 rgba(13, 115, 119, 0); }
}

.resources-grid__empty--bookmarks {
  gap: var(--space-lg);
}

.resources-grid__empty--bookmarks .resources-grid__empty-content {
  gap: var(--space-md);
}

.resources-grid__empty--bookmarks .h3 {
  text-wrap: balance;
}

.resources-grid__empty--bookmarks .resources-grid__empty-description p {
  text-wrap: pretty;
}

@media (max-width: 600px) {
  .bookmarks-empty-shot {
    --bm-x: 91.53%;
    max-width: 376px;
  }

  .resources-grid__empty--bookmarks {
    padding: var(--space-xl) 0;
  }
}

.toggle-bookmark[current-mode='add'] [mode-action='remove'] {
  display: none;
}

.toggle-bookmark[current-mode='remove'] [mode-action='add'] {
  display: none;
}

.activity-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.activity-editor__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.activity-editor__control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.activity-editor__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.activity-editor__order {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.activity-editor__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.activity-editor__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  color: var(--color-grey-50);
}

#search-activities .viv-modal__content {
  height: 100%;
  overflow: hidden;
}

.search-activities {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  overflow: hidden;
  flex-grow: 1;
  justify-content: space-between;
}

.search-activities__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  overflow: hidden;
  flex-grow: 1;
}

.search-activities__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.search-activities__form {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-grey-80);
  border-radius: 4px;
}

.search-activities__form svg {
  fill: var(--color-grey-60);
}

.search-activities__input {
  border: none;
  padding: 0;
  background-color: transparent;
  flex-grow: 1;
}

.search-activities__result {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  overflow-y: auto;
  list-style: none;
  flex-grow: 1;
}

.search-activities__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.search-activities__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-lg);
}

.search-activities__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  border: 1px solid var(--color-grey-90);
  border-radius: 8px;
  padding: var(--space-md);
  position: relative;
}

.search-activities__item-head {
  display: grid;
  grid-template-areas: "image title"
    "image meta";
  ;
  column-gap: var(--space-md);
  row-gap: var(--space-xs);
  grid-template-columns: 80px 1fr;
}

.search-activities__item-title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  grid-area: title;
}

.search-activities__item-image {
  grid-area: image;
}

/* 80px column, so square for the same reason as the collection card. */
.search-activities__item-image .post-thumbnail {
  padding-top: 100%;
}

.search-activities__item-meta {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  grid-area: meta;
}

.search-activities__activity-type {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.search-activities__finder-type {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.search-activities__item-description {
  overflow: hidden;
  position: relative;
  max-height: 40px;
  /* display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: clip; */
}

.search-activities__item-description::after {
  content: '';
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0));
  position: absolute;
  pointer-events: none;
}

.search-activities__item-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
}

.search-activities__item .toggle-item {
  width: 40px;
  height: 40px;
  background-color: var(--color-white);
  box-shadow: 0px 2px 12px 0px #0000001F;
  border-radius: 50%;
  border: 1px solid var(--color-grey-90);
  color: var(--color-black-10);
}

.search-activities__item .toggle-item.active {
  background-color: var(--color-blue-90);
  border-color: var(--color-blue-90);
  color: var(--color-black-10);
}

.search-activities__item .toggle-item.active svg {
  transform: rotate(45deg);
}

.search-activities__item .toggle-item.disabled {
  cursor: not-allowed;
  pointer-events: none;
  background-color: var(--color-grey-90);
  border-color: var(--color-grey-90);
}

.search-activities__item .toggle-item.disabled svg {
  fill: var(--color-grey-60);
}

.search-activities__load-more,
.search-activities__all-loaded {
  display: flex;
  justify-content: flex-end;
}

.search-activities__all-loaded svg {
  fill: var(--color-blue-50);
}

.search-activities .search-no-results {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
}

.search-activities .search-no-results__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-2xl);
  text-align: center;
}

.search-activities .search-no-results .description {
  color: var(--color-grey-40);
}

.search-activities .search-no-results__actions {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-top: var(--space-md);
}

.activity-editor__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  list-style: none;
}

.activity-editor__item {
  display: flex;
  flex-direction: column;
  padding: var(--space-sm);
  border-radius: 8px;
  border: 1px solid var(--color-grey-80);
  background-color: var(--color-white);
}

.activity-editor__item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  cursor: pointer;
}

.activity-editor__handler {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: stretch;
}

.activity-editor__title {
  flex-grow: 1;
  font-weight: 500;
}

.activity-editor__toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.activity-editor__toggle-icon svg {
  fill: var(--color-grey-50);
}

.activity-editor__item-content {
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-grey-90);
  margin-top: var(--space-sm);
}

.accordion:not(.show) .accordion-content {
  display: none;
}

.viv-multiple-select-wrapper {
  max-width: 100%;
}

.viv-multiple-select-wrapper .viv-field-label {
  display: none;
}

.viv-multiple-select .select2-container {
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
}

.viv-multiple-select .select2-container .select2-dropdown {
  position: relative;
  box-shadow: none;
  top: 0;
  padding: 0;
  min-width: 100%;
}

.viv-multiple-select .select2-container .select2-dropdown:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 20%;
  background: linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 1;
}

.viv-multiple-select .select2-container .select2-results__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-height: 50vh;
}

.viv-multiple-select .select2-container .select2-results__option {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-xl) var(--space-xs) var(--space-xs);
  border-radius: 8px;
  border: 1px solid var(--color-grey-90);
  position: relative;
  background-position: calc(100% - 8px) 50%;
  background-repeat: no-repeat;
  background-size: 24px;
}

.viv-multiple-select .select2-container .select2-results__option img {
  flex: 0 0 34px;
  border-radius: 4px;
  overflow: hidden;
}

.viv-multiple-select .select2-container .select2-results__option .select2-option__text {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--color-grey-40);
  flex: 1;
}

.viv-multiple-select .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: transparent;
}

.viv-multiple-select .select2-container--default .select2-results__option:hover {
  border-color: var(--color-blue-50);
}

.viv-multiple-select .select2-container--default .select2-results__option[aria-selected=true] {
  background-color: transparent;
  border-color: var(--color-blue-50);
  background-image: url('../img/icons/checkbox-circle-fill.svg');
}

.viv-multiple-select .select2-container--default .select2-selection--multiple {
  display: flex;
  border: none;
}

.viv-multiple-select .select2-selection--multiple .select2-selection__rendered {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.viv-multiple-select .select2-selection__rendered .select2-search {
  width: 100%;
  order: 1;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-grey-80);
  border-radius: 4px;
}

.viv-multiple-select .select2-selection__rendered .select2-search svg {
  flex-shrink: 0;
}

.viv-multiple-select .select2-selection__rendered .select2-search input {
  padding: 0;
  flex-grow: 1;
  margin: 0;
}

.viv-multiple-select .select2-selection--multiple .select2-selection__choice {
  margin: 0;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: var(--space);
  order: 2;
  color: var(--color-black-10);
  background-color: var(--color-white);
  border-radius: 250px;
  border: 1px solid var(--color-blue-80);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.viv-multiple-select .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 300;
  margin: 0;
  width: 20px;
  height: 20px;
  color: var(--color-grey-50);
  padding-bottom: 2px;
}

.viv-auth-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  text-align: center;
}

.learning-hub {
  margin-top: var(--space-lg);
}

.collections-head__grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.single-collection-content {
  margin-top: var(--space-xl);
}

.coll-preview-control {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: var(--color-white);
  box-shadow: 0px -3px 7.6px 0px #4343432B;
  z-index: 100;
  padding: var(--space-lg) 0;
}

.coll-preview-control__grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.coll-preview-control__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.coll-preview-control__actions {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.user-collections .resources-grid {
  margin-top: var(--space-xs);
}

.short-collection {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.short-collection__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  border: 1px solid var(--color-grey-90);
  border-radius: 8px;
  padding: var(--space-sm);
}

.short-collection__item-head {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex: 1 0 40%;
}

.short-collection__item-counter {
  flex: 1 0 25%;
}

.short-collection__item-actions {
  flex: 0 0 auto;
}

.viv-form-step__counter {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: var(--space-md);
}

.specialty-selector {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.specialty-selector .global-search__result {
  position: relative;
  top: 0;
}

.specialty-selector__result {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-height: 425px;
  overflow-y: auto;
  padding: 0 var(--space-sm);
  margin: 0 calc(var(--space-sm) * -1);
}

.specialty-selector__result-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(5, 60px);
  gap: var(--space-sm);
  list-style: none;
  margin-top: var(--space-md);
}

.specialty-selector__item {
  display: flex;
  align-items: center;
  padding: var(--space-xs);
  border: 1px solid var(--color-grey-90);
  border-radius: 8px;
  cursor: pointer;
  gap: var(--space-sm);
  color: var(--color-grey-40);
  background-color: var(--color-white);
  position: relative;
}

.specialty-selector__item:hover {
  border-color: var(--color-blue-80);
  color: var(--color-black-10);
}

.specialty-selector__item.selected {
  border-color: var(--color-blue-80);
  color: var(--color-black-10);
}

.specialty-selector__item.selected::after {
  content: url('../img/icons/checkbox-circle-fill.svg');
  position: absolute;
  top: -10px;
  right: -10px;
  width: 24px;
  height: 24px;
  z-index: 1;
}

.specialty-selector__item-img {
  display: flex;
  flex: 0 0 auto;
  max-width: 64px;
  border-radius: 4px;
  overflow: hidden;
}

.specialty-selector__item-img:not(.default) {
  padding: 7px;
  border: 1px solid var(--color-blue-90);
  background-color: var(--color-blue-bg);
  border-radius: 8px;
}

.specialty-selector__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.specialty-selector__result-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-lg);
}

.specialty-selector__search {
  max-width: 400px;
  margin: 0 auto;
}

.subscription-updates {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding: var(--space-lg) 0;
}

.subscription-updates .viv-form-row {
  width: 100%;
  max-width: var(--small-container);
  margin: 0 auto;
  gap: var(--space-md);
}

.subscription-updates .submit-field {
  flex: 0 0 auto;
}

.subscription-updates .viv-checkbox-wrapper {
  color: var(--color-black-10);
  margin: 0 auto;
}

.subscription-updates .viv-form-message {
  width: 100%;
}

.viv-divider-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
  color: var(--color-grey-50);
}

.viv-divider-row::before,
.viv-divider-row::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background-color: var(--color-grey-90);
}

.viv-auth-social-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.viv-auth-social-buttons [data-provider="google"]::before {
  content: url('../img/icons/auth-google.svg');
  line-height: 0;
}

/* #259 Microsoft sign-in (viv-auth 2.0.4.2+) */
.viv-auth-social-buttons [data-provider="microsoft"]::before {
  content: url('../img/icons/auth-microsoft.svg');
  line-height: 0;
}

.viv-auth-social-buttons [data-provider="facebook"]::before {
  content: url('../img/icons/auth-facebook.svg');
  line-height: 0;
}

.complete-course__rating-container {
  margin-top: var(--space-xs);
}

.complete-course__rating .viv-radio-wrapper.checked svg {
  fill: var(--color-gold-50);
}

.airdatepicker-icon {
  padding-right: var(--space-2xl);
  background-image: url('../img/icons/calendar.svg');
  background-repeat: no-repeat;
  background-position: right var(--space-sm) center;
}

.complete-course-action:not(.active) {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-grey-40);
  padding-left: 9px;
  padding-right: 9px;
}

.complete-course-action:not(.active):hover svg,
.complete-course-action.active svg {
  fill: var(--color-blue-50);
}

.complete-course-action:not(.active):hover {
  background-color: var(--color-blue-95);
  border-color: var(--color-blue-95);
  color: var(--color-blue-50);
}

.complete-course-action.active {
  background-color: var(--color-blue-95);
  border-color: var(--color-blue-50);
  color: var(--color-black-10);
}

.activities-summary__wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.activities-summary__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.activities-summary__list {
  width: 100%;
}

.activities-summary__container {
  width: 100%;
  position: relative;
  --swiper-navigation-sides-offset: -22px;
}

.activities-summary__item {
  border: 1px solid var(--color-grey-90);
  background-color: var(--color-white);
  border-radius: 8px;
  padding: var(--space-md);
  height: auto;
  position: relative;
  overflow: hidden;
}

.activities-summary__item-content {
  display: grid;
  grid-template-rows: minmax(40px, 1fr) auto;
  gap: var(--space);
  height: 100%;
  text-align: center;
  position: relative;
  z-index: 1;
}

.activities-summary__item-content .name {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-black-10);
}

.activities-summary__item-content .count {
  color: var(--color-blue-50);
}

.activities-summary__item.moc::before {
  content: 'MOC';
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  background-color: var(--color-blue-95);
  color: var(--color-blue-50);
  padding: 1px 4px;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  border-bottom-right-radius: 4px;
}

.activities-summary__container .activities-summary__next,
.activities-summary__container .activities-summary__prev {
  border-radius: 250px;
  box-shadow: 0px 1px 12px 0px #0000001A;
  padding: 10px;
  background-color: var(--color-white);
}

.activities-summary__container .activities-summary__next svg,
.activities-summary__container .activities-summary__prev svg {
  fill: var(--color-grey-50);
}

.activities-summary__container .activities-summary__next.swiper-button-disabled,
.activities-summary__container .activities-summary__prev.swiper-button-disabled {
  opacity: 0;
}

.as-form__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.as-form__search {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-grey-80);
  border-radius: 4px;
}

.as-form__search svg {
  fill: var(--color-grey-60);
}

.as-form__input {
  border: none;
  padding: 0;
  background-color: transparent;
  flex-grow: 1;
}

.as-form__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  overflow-y: auto;
  list-style: none;
  flex-grow: 1;
  min-height: 0;
}

#activities-summary .viv-modal__container {
  overflow: hidden;
}

#activities-summary .viv-modal__content {
  flex-grow: 1;
  min-height: 0;
  overflow: hidden;
}

#activities-summary .modal-form {
  flex-grow: 1;
  min-height: 0;
  overflow: hidden;
}

#activities-summary .modal-form__body {
  flex-grow: 1;
  min-height: 0;
  overflow: hidden;
}

#activities-summary .as-form__container {
  flex-grow: 1;
  min-height: 0;
  overflow: hidden;
}

.as-form__item-container {
  display: grid;
  align-items: center;
  gap: var(--space-sm);
  grid-template-columns: 24px 3fr 1fr 1fr 1fr;
  padding: var(--space-sm);
  border-radius: 8px;
  border: 1px solid var(--color-grey-90);
  cursor: pointer;
}

.as-form__item-points {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--color-blue-50);
}

.as-form__item-badge .moc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space) var(--space-xs);
  border-radius: 4px;
  background-color: var(--color-blue-95);
  color: var(--color-blue-50);
}

.custom-activity .viv-form-row {
  column-gap: var(--space-md);
  row-gap: var(--space-sm);
}

.repeater-group__preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  border: 1px solid var(--color-grey-80);
  border-radius: 8px;
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
}

.repeater-group__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.repeater-group__item-form {
  border: 1px solid var(--color-grey-80);
  border-radius: 8px;
  padding: var(--space-sm) var(--space-md);
}

.repeater-group__item-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
}

.repeater-group__item-actions .repeater-group__item-delete-button {
  color: var(--color-red-40);
}

.repeater-group__item:not([data-status="open"]) .repeater-group__item-form,
.repeater-group__item:not([data-status="closed"]) .repeater-group__preview {
  display: none;
}

.repeater-group__action {
  align-self: flex-start;
}

.viv-form-file__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.viv-form-file {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  padding: var(--space-md) var(--space-lg);
  border-radius: 8px;
  position: relative;
  color: var(--color-grey-50);
  background:
    repeating-linear-gradient(to right, var(--color-blue-80) 0 8px, transparent 8px 16px) top / 100% 1px no-repeat,
    repeating-linear-gradient(to right, var(--color-blue-80) 0 8px, transparent 8px 16px) bottom / 100% 1px no-repeat,
    repeating-linear-gradient(to bottom, var(--color-blue-80) 0 8px, transparent 8px 16px) left / 1px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--color-blue-80) 0 8px, transparent 8px 16px) right / 1px 100% no-repeat;
  background-color: var(--color-blue-bg);
}

.viv-form-file__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.viv-form-file__input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  cursor: pointer;
}

.viv-form-file__top {
  display: flex;
}

.viv-form-file__top svg {
  fill: var(--color-blue-80);
}

.viv-form-file__body {
  display: flex;
  flex-direction: column;
  gap: var(--space);
  text-align: center;
  align-items: center;
}

.viv-form-file__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  text-align: center;
  align-items: center;
}

.viv-form-file__message.viv-message-error {
  color: var(--color-red-40);
}

.viv-form-file__preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  border-radius: 8px;
  border: 1px solid var(--color-grey-80);
  padding: var(--space-sm) var(--space-md);
}

.viv-form-file__preview .text-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-activity__data {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.custom-activity__data-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.custom-activity__body-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.custom-activity_provider {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space) var(--space-xs);
  border-radius: 250px;
  border: 1px solid var(--color-blue-50);
  gap: var(--space);
}

.custom-activity__body-top .badge svg {
  width: 18px;
  height: 18px;
  fill: var(--color-black-10);
}

.custom-activity__original-title {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.custom-activity__dates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
}

.custom-activity__date {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.custom-activity__date svg {
  width: 20px;
  height: 20px;
  fill: var(--color-blue-80);
}

.custom-activity__date-icon {
  display: flex;
}

.custom-activity__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.custom-activity__certificate-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.custom-activity__file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--color-grey-80);
  border-radius: 8px;
  padding: var(--space-sm) var(--space-md);
  gap: var(--space-lg);
}

.custom-activity__file .text-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-activity__file-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.custom-activity__credits {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.custom-activity__credits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.custom-activity__credit-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.activity-reviews-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.activity-reviews-list {
  display: flex;
  flex-direction: column;
  list-style: none;
}

.activity-review {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-grey-90);
}

.activity-review__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.activity-review__rating {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.activity-reviews-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* #1818 — faculty reviews. Same shape as .activity-review* above (list item structure is
   identical: author/date header, star rating, text) plus a verified badge pill. */
.faculty-reviews-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.faculty-reviews-summary {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.faculty-reviews-list {
  display: flex;
  flex-direction: column;
  list-style: none;
}

.faculty-review {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-grey-90);
}

.faculty-review__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.faculty-review__rating {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.faculty-review__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: var(--space-xs);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-wash);
  color: var(--color-teal-deep);
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

.faculty-review__badge svg {
  width: 12px;
  height: 12px;
}

.faculty-reviews-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* #1913: the write-a-review stars. `.checked` is set by js/faculty-reviews.js on every star up
   to the pick; hovering previews the same fill (the :has() rule fills the stars before the
   hovered one, older browsers just get the hovered star). */
.faculty-review-form__rating .viv-radio-wrapper.checked svg,
.faculty-review-form__rating .viv-radio-wrapper:hover svg,
.faculty-review-form__rating .viv-radio-wrapper:has(~ .viv-radio-wrapper:hover) svg {
  fill: var(--color-gold-50);
}

.faculty-review-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-grey-90);
}

/* #1813 — "No reviews yet" + the "Leave a review" CTA inline, wrapping on narrow widths. */
.activity-reviews-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

.specialty-section {
  margin-top: var(--space-xl);
}

.specialty-section__grid {
  width: 100%;
  display: flex;
  background-color: var(--color-white);
  border-radius: 12px;
  border: 1px solid var(--color-grey-90);
  padding: var(--space-lg) var(--space-lg) 0 var(--space-lg);
}

.specialty-section__grid .specialty-navigation__hint,
.specialty-section__grid .specialty-navigation__list-actions {
  margin-bottom: var(--space-xs);
}

.error-404__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4xl);
  padding: var(--space-4xl) 0;
  justify-content: center;
  align-items: center;
}

.error-404__image {
  display: flex;
}

.error-404__image svg {
  max-width: 100%;
  height: auto;
}

.error-404__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  align-items: center;
}

.error-404__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: center;
  text-align: center;
  max-width: var(--small-container);
}

.error-404__actions {
  display: flex;
}

.mobile-header__grid {
  display: none;
  gap: var(--space-sm);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) 0;
}

.mobile-menu__button {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid var(--color-blue-95);
  cursor: pointer;
  background-color: transparent;
  padding: var(--space-xs);
}

.mobile-menu__close.button {
  color: var(--color-black-10);
}

.specialty-list-form .modal-form__title {
  text-align: center;
}

.specialty-list-form .modal-form__actions .button {
  flex: 1;
}

.specialty-list-slim .specialty-selector {
  gap: var(--space-sm);
}

.specialty-list-slim .specialty-selector__result-list {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(10, 40px);
  gap: var(--space-xs);
  margin-top: 0;
}

.specialty-list-slim .specialty-selector__item {
  gap: var(--space-xs);
}

.specialty-list-slim .specialty-selector__item-img {
  max-width: 34px;
}

.specialty-list-slim .specialty-selector__item-img:not(.default) {
  border-radius: 4px;
  padding: 3px;
  max-width: 24px;
}

.specialty-list-slim .specialty-selector__item.selected::after {
  position: relative;
  top: 0;
  right: 0;
  margin-left: auto;
}

.specialty-list-slim .specialty-selector__search {
  max-width: 100%;
}

.specialty-list-slim .global-search__form {
  border-radius: 4px;
  padding: var(--space-xs) var(--space-sm);
  flex-direction: row-reverse;
}

.specialty-list-slim .global-search__submit.icon {
  border-radius: 0;
  padding: 0;
  width: 24px;
  height: 24px;
  background-color: transparent;
}

.specialty-list-slim .global-search__submit svg {
  fill: var(--color-grey-60);
}

.specialty-list-slim .modal-form__actions .button {
  flex: 1;
}

.generate-report-pdf .loader::after {
  width: 24px;
  height: 24px;
}

.single-activity__specialties {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.single-activity__specialties-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-sm);
  row-gap: var(--space-xs);
}

.single-activity__specialty-item a {
  display: flex;
  align-items: center;
  gap: var(--space);
}

.single-activity__specialty-item svg {
  fill: var(--color-black-10);
}

.single-activity__specialty-item a:hover {
  color: var(--color-blue-50);
}

.single-activity__specialty-item a:hover svg {
  fill: var(--color-blue-50);
}

/* #1450 — cross-specialty activity: one hub chip (the sidebar fact-chip look)
   with the activity's tagged hub children nested under it, in place of the
   full specialty list. */
.single-activity__specialties-cross {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.single-activity__specialty-hub {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 7px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-wash);
  color: var(--color-teal-deep);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.single-activity__specialty-hub svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: var(--color-teal);
}

a.single-activity__specialty-hub:hover {
  background: var(--color-pale);
  color: var(--color-teal-deep);
}

.single-activity__specialty-children {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0 0 0 var(--space-md);
  padding: 0 0 0 var(--space-sm);
  border-left: 2px solid var(--color-grey-90);
}

.single-activity__specialties-note {
  color: var(--color-grey-50);
}

.terms-container {
  margin-top: var(--space-xl);
}

.terms-container__content {
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-90);
  border-radius: 12px;
  padding: var(--space-lg);
}

.terms-container__content .wp-block-heading {
  margin-top: var(--space-xl);
}

.terms-container__content p {
  margin-top: var(--space-md);
}

.terms-container__content .wp-block-list {
  padding-left: 20px;
}

.terms-container .terms-container__content>*:first-child {
  margin-top: 0;
}

.terms-container__content a {
  color: var(--color-blue-50);
}

.viv-modal[data-vivgb-ss-popup] {
  background-color: transparent;
  padding: 0;
}

.add-saved-search .vivgb-ss-error {
  border-color: var(--color-red-40);
}

/* #1332: one-line note under a field (save popup, hub edit form, profile switch) */
.viv-field-hint {
  margin: var(--space-xs) 0 0;
  color: var(--color-grey-50);
}

.form-preview__hint {
  margin-top: 2px;
  color: var(--color-grey-50);
}

.resources-list__item-meta {
  margin: 2px 0 0;
  color: var(--color-teal-deep);
}

/* #1392 — WP Grid Builder pins .wpgb-viewport to an inline height measured from
   the previous result set, far too short for an empty state carrying a form, so
   the block spilled out of the grid and over the footer. The class is set by
   js/vivgb-empty-state.js only while the grid is genuinely empty; an earlier
   `:has(.empty-library)` version of this rule also matched a *stale* empty
   state left behind by the addon and collapsed the viewport to 736px while
   twelve cards overflowed it (#1467). */
.wp-grid-builder.vivgb-empty .wpgb-viewport {
  height: auto !important;
}

.empty-library {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xl);
  padding: var(--space-3xl) var(--space-lg) var(--space-4xl);
  text-align: center;
}

.empty-library__lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  max-width: 640px;
}

.empty-library__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-navy-deep);
}

/* The one next step, set apart from the title so the eye lands on it second.
   The arrow points back at the filter column (left of the results on desktop,
   above them once the mobile filter drawer takes over at 992px). */
.empty-library__hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px var(--space-lg) 10px var(--space-md);
  border: 1px solid var(--color-wash-line);
  border-radius: var(--radius-pill);
  background-color: var(--color-wash);
  color: var(--color-navy-ink);
  max-width: 100%;
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  text-align: left;
}

.empty-library__hint-arrow {
  display: flex;
  flex-shrink: 0;
  color: var(--color-teal);
  transform: rotate(180deg);
}

.empty-library__hint-arrow svg {
  width: 22px;
  height: 22px;
}

.empty-library__did-you-mean {
  font-size: var(--text-md);
  color: var(--color-grey-50);
}

.empty-library__did-you-mean a {
  color: var(--color-teal);
  font-weight: 600;
  text-decoration: underline;
}

/* Level three: the CME request ask, boxed so it reads as a separate offer
   rather than more of the same message. */
.empty-library__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  max-width: 480px;
  padding: var(--space-xl);
  border: 1px solid var(--color-grey-90);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
}

.empty-library__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-xs);
  border-radius: 50%;
  background-color: var(--color-wash);
  color: var(--color-teal);
}

.empty-library__card-icon svg {
  width: 26px;
  height: 26px;
}

.empty-library__card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: var(--leading-snug);
  color: var(--color-navy-deep);
}

.empty-library__card-text {
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-grey-50);
}

.empty-library__card .button {
  margin-top: var(--space-md);
}

/* #1388 — the CME request is asked inline, with the search already written into
   the textarea, instead of behind a button that opens a modal of four fields.
   Header stays centred with the rest of the empty state; the fields go
   left-aligned, because centred labels over inputs read as broken. */
.empty-library__card.cme-request-inline {
  max-width: 540px;
}

.cme-request-inline__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
  margin-top: var(--space-md);
  text-align: left;
}

.cme-request-inline__row {
  display: flex;
  flex-direction: column;
  gap: var(--space);
}

.cme-request-inline .viv-field-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-navy-ink);
}

.cme-request-inline input[type="email"],
.cme-request-inline textarea {
  width: 100%;
  font-size: var(--text-sm);
}

/* Nothing a signed-in member has already given us gets asked again: the address
   is filled from their account, and the consent tick was covered by the terms
   they accepted at /welcome/ (Kalman, 2026-09-07). Guests — the specialty
   archives are public — still see both. */
body.logged-in .cme-request-inline__guest-only {
  display: none;
}

.cme-request-inline__check .viv-checkbox-label {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-grey-40);
}

.cme-request-inline__message {
  width: 100%;
  margin-top: var(--space-md);
  text-align: left;
}

/* Collections keep the icon-led layout: an empty collection is a state the
   member created, not a failed search. */
.empty-library__icon {
  display: flex;
}

.empty-library__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.empty-library__description {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 520px;
}

.empty-library__actions.mt {
  margin-top: var(--space-lg);
}

/* vivce#1548 — commercial support tooltip (card + single-activity) */
.commercial-support-tooltip {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--color-grey-50);
}

.commercial-support-tooltip__title {
  font-weight: 600;
  color: var(--color-black-10);
  margin: 0;
}

.commercial-support-tooltip__names {
  margin: 0;
  padding: 0 0 0 18px;
}

/* #1677 — the rule line sits between the sponsor list and the hide link */
.commercial-support-tooltip__rule {
  margin: 0;
}

.commercial-support-tooltip a {
  color: var(--color-teal-deep);
  text-decoration: underline;
}

/* #1629 — shared card-tooltip furniture. Unscoped on purpose: tippy appends
   the popper to <body>, so anything scoped to `.wpgb-card` never matches. */
.card-cme-point-tt {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-tt__title {
  font-weight: 600;
  color: var(--color-black-10);
  margin: 0;
}

.card-cme-point-tt p {
  margin: 0;
}

.card-tt__link {
  color: var(--color-teal-deep);
  text-decoration: underline;
}

.credit-tooltip {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.credit-tooltip__section {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.credit-tooltip__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.credit-tooltip .credit-tooltip__item .credit-tooltip__content {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-grey-50)
}

.credit-tooltip .credit-tooltip__section .credit-tooltip__item .credit-tooltip__content svg {
  width: 16px;
  height: 16px;
}

/* Structured credit / MOC breakdown for the library card credit tooltip
   (vivce#730 — ported from dev PR #736). The base .credit-tooltip / __section /
   __item / __content rules already exist above and stay unchanged; these only
   ADD the per-row list styling that the new .credit-tooltip__row markup needs
   (zebra rows, name+value columns, uppercase section title). The row / name /
   value / unit rules match only markup that emits those classes — the library
   card tooltip — so the existing single-activity + complete-card tooltips are
   untouched apart from getting the intended __title header styling. Uses only
   design tokens already defined on this branch. */
.tippy-box[data-theme~='tooltip']:has(.credit-tooltip),
.res-grid.wp-grid-builder .wpgb-card div.tippy-box[data-theme~='tooltip']:has(.credit-tooltip) {
  max-width: 420px !important;
}
.tippy-box[data-theme~='tooltip'] .tippy-content .credit-tooltip__value {
  color: var(--color-black-10);
  font-weight: 600;
}
/* The CME-points / credit explainer text was too light over the white box. */
.tippy-box[data-theme~='tooltip'] .card-cme-point-tt,
.res-grid.wp-grid-builder .wpgb-card div.card-cme-point-tt {
  color: var(--color-grey-40);
  font-weight: 500;
}
.credit-tooltip__title {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-grey-50);
}
.credit-tooltip__note {
  margin: 0 0 4px;
  color: var(--color-grey-40);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}
.credit-tooltip__section:has(.credit-tooltip__row) > .credit-tooltip__item {
  flex: 1;
}
/* Specificity includes :has() so the column list layout beats the base
   .credit-tooltip__content (centered row) rule above. */
.credit-tooltip .credit-tooltip__item .credit-tooltip__content:has(.credit-tooltip__row) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.credit-tooltip__row {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 5px 8px;
  border-radius: 5px;
  line-height: 1.4;
}
.credit-tooltip__row:nth-child(odd) {
  background: var(--color-bg);
}
.credit-tooltip__name {
  font-weight: 500;
  color: var(--color-grey-40);
}
.credit-tooltip__name strong {
  font-weight: 700;
  color: var(--color-black-10);
}
.credit-tooltip__value {
  flex-shrink: 0;
  white-space: nowrap;
  text-align: right;
  font-weight: 600;
  color: var(--color-black-10);
  font-variant-numeric: tabular-nums;
}
.credit-tooltip__unit {
  font-weight: 400;
  color: var(--color-grey-50);
}
.credit-tooltip__qualifier {
  font-weight: 500;
  color: var(--color-grey-40);
}

/* #1273: a long board list would otherwise grow the tooltip taller than the card
   it belongs to — at 22 boards it ran 758px and the top rows sat off-screen
   behind the fixed header. Flow the rows into columns instead of scrolling them.
   Desktop only: below 900px the box is already clamped to the viewport, and one
   column reads fine there. Row order stays top-to-bottom, column by column. */
@media (min-width: 900px) {
  .tippy-box[data-theme~='tooltip']:has(.credit-tooltip__row:nth-child(7)),
  .res-grid.wp-grid-builder .wpgb-card div.tippy-box[data-theme~='tooltip']:has(.credit-tooltip__row:nth-child(7)) {
    max-width: 620px !important;
  }

  .tippy-box[data-theme~='tooltip']:has(.credit-tooltip__row:nth-child(13)),
  .res-grid.wp-grid-builder .wpgb-card div.tippy-box[data-theme~='tooltip']:has(.credit-tooltip__row:nth-child(13)) {
    max-width: 900px !important;
  }

  /* `display: block` overrides the column-list flex above — multicol needs a
     block formatting context to flow the rows into. */
  .credit-tooltip .credit-tooltip__item .credit-tooltip__content:has(.credit-tooltip__row:nth-child(7)) {
    display: block;
    columns: 2;
    column-gap: 12px;
  }

  .credit-tooltip .credit-tooltip__item .credit-tooltip__content:has(.credit-tooltip__row:nth-child(13)) {
    columns: 3;
  }

  .credit-tooltip__content:has(.credit-tooltip__row:nth-child(7)) .credit-tooltip__row {
    break-inside: avoid;
  }
}

.edit-activity__grid {
  grid-template-columns: auto 400px;
}

.edit-activity__head {
  grid-column: 1 / -1;
}

.edit-activity__sidebar {
  grid-row: 2 / -1;
}

.edit-activity__head-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.provider-tooltip-content {
  max-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.provider-tooltip-content svg {
  fill: currentColor;
}

/* #1427: rate the provider from the tooltip. Sits under the links, behind a hairline,
   so it reads as an action on the provider rather than another fact about it.
   Contrast on the white tooltip: teal 5.62:1, red 6.13:1, grey-50 5.85:1 — all past
   AA, and past the 3:1 that the icons need as non-text UI. */
.provider-tt-thumbs {
  display: flex;
  align-items: center;
  gap: var(--space-xs, 8px);
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--color-grey-90);
}

.viv-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--color-grey-80);
  border-radius: 6px;
  background: var(--color-white);
  color: var(--color-grey-50);
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background-color .12s ease;
}

.viv-thumb svg {
  width: 18px;
  height: 18px;
}

.viv-thumb:hover {
  border-color: var(--color-grey-50);
  color: var(--color-black-10);
}

.viv-thumb:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* The chosen thumb is filled, not merely outlined: at 18px an outline-vs-fill
   difference is easier to read at a glance than a hue change alone. */
.viv-thumb--up.is-on {
  background: var(--color-teal);
  border-color: var(--color-teal);
  color: var(--color-white);
}

.viv-thumb--down.is-on {
  background: var(--color-red-40);
  border-color: var(--color-red-40);
  color: var(--color-white);
}

.provider-tt-thumbs__note {
  flex-basis: 100%;
  font-size: 12px;
  line-height: 140%;
  color: var(--color-grey-50);
  text-wrap: auto;
}

.provider-tt-thumbs__note:empty {
  display: none;
}

/* Progress steps styles */
.progress-steps {
  --ps-size: 64px;
  --ps-stroke: 10px;
  --ps-active-color: var(--color-blue-50);
  --ps-success-color: var(--color-green-40);
  --ps-empty-color: var(--color-grey-90);

  position: relative;
  width: var(--ps-size);
  height: var(--ps-size);
}

.progress-steps__svg {
  width: 100%;
  height: 100%;
  transform: rotate(-84deg);
}

.progress-steps__segment {
  fill: none;
  stroke-width: var(--ps-stroke);
  stroke-linecap: round;
}

.progress-steps__segment--empty {
  stroke: var(--ps-empty-color);
}

.progress-steps__segment--active {
  stroke: var(--ps-active-color);
}

.progress-steps__segment--success {
  stroke: var(--ps-success-color);
}

.progress-steps__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Progress ring styles */
.progress-ring {
  --pr-size: 64px;
  --pr-stroke: 12px;
  --pr-progress: 0;
  --pr-active-color: #fff;
  --pr-bg-color: #0241F533;

  position: relative;
  width: var(--pr-size);
  height: var(--pr-size);
}

.progress-ring__svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.progress-ring__bg,
.progress-ring__bar {
  fill: none;
  stroke-width: var(--pr-stroke);
  stroke-linecap: round;
}

.progress-ring__bg {
  stroke: var(--pr-bg-color);
}

.progress-ring__bar {
  stroke: var(--pr-active-color);
  stroke-linecap: butt;
  /* ≈ 2 * π * 43 */
  stroke-dasharray: 270.176;
  stroke-dashoffset: calc(270.176 * (1 - var(--pr-progress) / 100));
  transition: stroke-dashoffset 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.progress-ring__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ==========================================================================
   #545 — keyboard accessibility: general layer only.
   The theme reset `input,textarea,select { outline: none }` (main.css:113)
   left keyboard users with NO visible focus indicator. Its `!important` was
   dropped (a plain reset is enough) so this `:focus-visible` rule can restore
   the ring by normal specificity — no `!important` needed. `:focus-visible`
   means the ring shows on keyboard focus only, not on mouse clicks. Ring uses
   the palette blue (--color-blue-50) so focus reads distinctly from brand teal.
   NOTE: library/grid-specific focus rings (facet accordions, viv_toggle
   switches, card tooltip icons, series expander, the grid search input whose
   own reset lives at style.css:169) go in vivgb-grid-1.css.
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
label:focus-visible,
[role="button"]:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

/* Screen-reader-only helper (visually-hidden but announced). General utility;
   used by the library results live region (js). Focusable if a child needs it. */
.viv-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Footer bottom row: © + aggregator disclaimer left, legal menu right (#1088) */
.footer-grid .footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
}

.footer-grid .footer-note {
  margin: 0;
  max-width: 64ch;
  color: var(--color-grey-40);
}

/* Legal pages (Terms Template): readable width and calmer headings (#1088) */
.terms-container__content {
  max-width: 880px;
  margin: 0 auto;
}

.terms-container__content h2.wp-block-heading {
  font-size: 1.5rem;
  line-height: 1.3;
}

.terms-container__content h3.wp-block-heading {
  font-size: 1.125rem;
  line-height: 1.35;
  margin-top: var(--space-lg);
}

.terms-container__content .wp-block-list {
  margin-top: var(--space-sm);
}

.terms-container__content .wp-block-list li+li {
  margin-top: 6px;
}


/* ==========================================================================
   #1093 design refresh — component layer. Tokens are in :root (top of this
   file); the header/banner composition is in critical-child.css (printed
   last); mobile-only rules are at the end of media.css. Sections:
     1. surfaces + links      2. header (account menu)
     3. auth pages            4. single activity
     5. provider page         6. library (logged-in, light touch)
     7. motion
   ========================================================================== */

/* --- 1. surfaces + links ------------------------------------------------ */
.content-plate {
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 6px rgba(16, 86, 106, 0.05);
}

.single-activity__description a,
.terms-container__content a,
.provider-about a {
  color: var(--color-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.single-activity__description a:hover,
.terms-container__content a:hover,
.provider-about a:hover {
  color: var(--color-teal-deep);
  text-decoration-thickness: 2px;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-grey-40);
  opacity: 1;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  border-color: var(--color-teal);
  outline: 2px solid var(--color-teal);
  outline-offset: 0;
}

input.viv-field-error,
textarea.viv-field-error,
select.viv-field-error {
  border-color: var(--color-red-40);
  box-shadow: 0 0 0 1px var(--color-red-40);
}

/* checkbox: teal fill when checked, white tick (was a blue tick on white) */
.viv-checkbox-wrapper .viv-checkbox {
  border-radius: 4px;
}

.viv-checkbox-wrapper input[type='checkbox']:checked+.viv-checkbox {
  background-color: var(--color-teal);
  border-color: var(--color-teal);
}

.viv-checkbox-wrapper input[type='checkbox']:checked+.viv-checkbox::after {
  border-color: var(--color-white);
}

.viv-checkbox-wrapper input[type='checkbox']:focus-visible+.viv-checkbox {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.viv-checkbox-wrapper a {
  color: var(--color-teal);
  text-underline-offset: 3px;
}

.viv-checkbox-wrapper a:hover {
  color: var(--color-teal-deep);
}

.viv-form-message {
  text-align: left;
  border-left: 4px solid transparent;
}

.viv-form-message.viv-message-error {
  border-left-color: var(--color-red-40);
  color: var(--color-black-10);
}

.viv-form-message.viv-message-success {
  border-left-color: var(--color-green-40);
}

.viv-form-row .viv-error-message {
  font-weight: 500;
}

/* --- 2. header: the account dropdown ------------------------------------ */
.account-menu__list ul {
  min-width: 240px;
  padding: var(--space-xs);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop), 0 0 0 1px var(--color-grey-90);
}

.account-menu__list .account-menu__list-link {
  border-radius: var(--radius);
  align-items: center;
}

.account-menu__list .account-menu__list-link svg {
  fill: currentColor;
}

/* Track CME while hidden: two-line row, second line asks for early access */
.account-menu__list button.account-menu__list-link--stacked {
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.account-menu__list .account-menu__list-link--stacked {
  align-items: start;
}

.account-menu__list .account-menu__list-link--stacked svg {
  margin-top: 2px;
}

.account-menu__stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.account-menu__stack-name {
  color: var(--color-grey-50);
}

.account-menu__stack-cta {
  color: var(--color-teal-deep);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-teal-deep) 35%, transparent);
  text-underline-offset: 2px;
}

.account-menu__list .account-menu__list-link--stacked:hover .account-menu__stack-cta {
  text-decoration-color: currentColor;
}

.account-menu__stack-cta.is-requested {
  color: var(--color-grey-40);
  font-weight: 500;
  text-decoration: none;
}

.account-menu__list .account-menu__list-link--stacked.is-disabled:hover {
  background-color: transparent;
}

/* #1294: greyed placeholder row (no link) */
.account-menu__list .account-menu__list-link.is-disabled {
  color: var(--color-grey-50);
  cursor: default;
}

.account-menu__list .account-menu__list-link.is-disabled:hover {
  background-color: transparent;
  color: var(--color-grey-50);
}

.account-menu__list .account-menu__badge {
  display: inline-block;
  margin-left: var(--space-xs);
  padding: 1px 7px;
  border-radius: 999px;
  background-color: var(--color-wash);
  color: var(--color-teal-deep);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.account-menu__list .account-menu__list-link:hover {
  background-color: var(--color-wash);
  color: var(--color-teal-deep);
}

.account-menu__list .account-menu__list-link:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: -3px;
}

/* Kalman 2026-10-02: the rows that repeat the personal area's tab row (My feed … Track CME)
   sit in one tinted block, colours flipped against the plain rows below it: wash ground,
   white on hover. Account and Feedback stay plain, so the menu reads as "your lists" and
   "your account". */
.account-menu__list .account-menu__hub-list {
  min-width: 0;
  padding: var(--space-xs);
  border-radius: var(--radius);
  background-color: var(--color-wash);
  box-shadow: none;
}

.account-menu__hub + .account-menu__list-item {
  margin-top: var(--space-xs);
}

.account-menu__hub-list .account-menu__list-link {
  color: var(--color-navy-ink);
}

.account-menu__hub-list .account-menu__list-link svg {
  fill: var(--color-teal);
}

.account-menu__list .account-menu__hub-list .account-menu__list-link:hover {
  background-color: var(--color-white);
  color: var(--color-teal-deep);
}

.account-menu__list .account-menu__hub-list .account-menu__list-link--stacked.is-disabled:hover {
  background-color: transparent;
}

/* --- 3. auth pages (templates/auth.php) ---------------------------------
   The homepage hero band (photo + navy gradient) as the ground, the white
   logo above one white card. Header and footer are hidden on this template,
   so the "copyright" menu prints as a legal line under the card. */
body.page-template-auth {
  background-color: var(--color-navy-deep);
}

body.page-template-auth main {
  position: relative;
  isolation: isolate;
  background: var(--color-navy-deep) url(../img/cme-banner.jpg) no-repeat center;
  background-size: cover;
  padding: clamp(32px, 6vh, 72px) 0;
}

body.page-template-auth main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gradient-navy);
}

.auth-container {
  gap: var(--space-lg);
}

/* vivce#2047: way out of the auth pages — quiet, on the band, aligned with the
   card's left edge. */
.auth-back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: calc(-1 * var(--space-sm)) 0 calc(-1 * var(--space-xs)) -8px;
  padding: 8px 12px 8px 8px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  transition: color 0.15s ease;
}

.auth-back:hover {
  color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.08);
}

.auth-back:hover .auth-back__arrow {
  transform: translateX(-3px);
}

.auth-back__arrow {
  font-size: 18px;
  line-height: 1;
  transition: transform 0.15s ease;
}

.auth-back:focus-visible {
  outline: 3px solid var(--color-focus-on-dark);
  outline-offset: 4px;
  border-radius: 4px;
}

body.welcome-embed .auth-back { display: none; }

.auth-brand {
  display: flex;
  justify-content: center;
  padding-bottom: var(--space-xs);
}

.auth-brand .site-logo__img {
  height: 54px;
  filter: brightness(0) invert(1);
}

.auth-brand .site-logo:focus-visible {
  outline: 3px solid var(--color-focus-on-dark);
  outline-offset: 6px;
  border-radius: 4px;
}

.auth-content {
  gap: 0;
  padding: 40px 44px 36px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-deep), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.auth-main {
  gap: var(--space-sm);
}

.viv-auth-content {
  gap: var(--space-xs);
}

/* vivce#1521: "Sign in / Create account" switcher — first thing on the card
   (lib/auth.php vivce_auth_page_switcher()). Two equal segments on a wash
   track; the active one lifts to a white pill. People were filling in the
   sign-in form when they meant to register, so the mode choice sits above
   the form, not under it. */
.auth-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin: -8px 0 28px;
  background: var(--color-wash);
  border: 1px solid var(--color-wash-line);
  border-radius: calc(var(--radius-btn) + 4px);
}

.auth-switch__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: var(--radius-btn);
  color: var(--color-teal-deep);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.auth-switch__item:hover {
  color: var(--color-navy-ink);
  background: rgba(255, 255, 255, 0.55);
}

.auth-switch__item.is-active {
  color: var(--color-navy-ink);
  background: var(--color-white);
  box-shadow: 0 1px 2px rgba(14, 71, 84, 0.12), 0 2px 8px rgba(14, 71, 84, 0.10);
}

.auth-switch__item:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.viv-auth-content h3 {
  font-size: 28px;
  line-height: 1.2;
  color: var(--color-navy-ink);
  text-wrap: balance;
}

.viv-auth-content-body {
  max-width: 40ch;
  margin: 0 auto;
  color: var(--color-grey-40);
  font-size: 16px;
  line-height: 1.5;
}

.viv-auth-form .viv-form-page {
  gap: 20px;
}

.viv-divider-row {
  color: var(--color-grey-40);
}

.viv-form-row .viv-field-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-black-10);
  margin-bottom: 2px;
}

.auth-content input:not([type="checkbox"]):not([type="radio"]),
.auth-content select {
  min-height: 48px;
}

.viv-form-row .form-control .viv-forgot-password a {
  color: var(--color-teal);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.viv-form-row .form-control .viv-forgot-password a:hover {
  color: var(--color-teal-deep);
}

.viv-form-row .viv-field-submit,
.viv-form-row .viv-field-next {
  margin-top: var(--space);
}

.viv-form-row .viv-field-submit .button,
.viv-form-row .viv-field-next .button {
  width: 100%;
  min-height: 52px;
  font-size: 16px;
}

.viv-auth-social-buttons .button.white {
  min-height: 48px;
}

.forgot-password-success .icon svg {
  width: 56px;
  height: 56px;
  fill: var(--color-teal);
}

.forgot-password-success .title {
  color: var(--color-navy-ink);
}

.forgot-password-success .text-body {
  color: var(--color-grey-40);
}

.auth-container .auth-bottom {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
}

.auth-container .auth-bottom-link {
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.auth-container .auth-bottom-link:hover {
  color: var(--color-pale);
  text-decoration-thickness: 2px;
}

.auth-container .auth-bottom-link:focus-visible {
  outline: 3px solid var(--color-focus-on-dark);
  outline-offset: 4px;
  border-radius: 2px;
}

.auth-legal {
  text-align: center;
}

.auth-legal__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 20px;
  margin: 0;
  padding: 0;
}

.auth-legal__list a {
  color: var(--color-pale);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-legal__list a:hover {
  color: var(--color-white);
}

.auth-legal__list a:focus-visible {
  outline: 3px solid var(--color-focus-on-dark);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- 4. single activity -------------------------------------------------- */
.single-activity__header-actions .bookmark-button {
  min-width: 48px;
  min-height: 48px;
  padding: 0 12px;
  background-color: var(--color-white);
  border: 1px solid var(--color-teal);
  border-radius: var(--radius-btn);
  color: var(--color-teal-deep);
}

.single-activity__header-actions .bookmark-button svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.single-activity__header-actions .bookmark-button:hover {
  background-color: var(--color-wash);
  border-color: var(--color-teal-deep);
  color: var(--color-teal-deep);
}

.single-activity__header-actions .bookmark-button.bookmarked {
  background-color: var(--color-teal);
  border-color: var(--color-teal);
  color: var(--color-white);
}

.single-activity__header-actions .bookmark-button.bookmarked path {
  fill: currentColor;
}

.single-activity__header-actions .complete-course-action {
  min-height: 48px;
}

.single-activity .tabs__control-item {
  font-family: var(--font-display);
  font-weight: 600;
}

.single-activity .tabs__control-item.active {
  color: var(--color-navy-ink);
}

.single-activity .post-counter {
  font-family: var(--font-body);
}

.single-activity__description-grid .h5,
.single-activity__mo .h5 {
  color: var(--color-navy-ink);
}

.content-grid__sidebar-content .property-list__label {
  color: var(--color-grey-40);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.content-grid__sidebar-content .property-list__actions {
  gap: var(--space-sm);
  padding-top: var(--space-xs);
}

.content-grid__sidebar-content .property-list__actions .button {
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
}

.content-grid__sidebar-content .property-list__item:not(.property-list__actions) .button.link {
  color: var(--color-teal);
}

.content-grid__sidebar-content .property-list__item:not(.property-list__actions) .button.link svg {
  fill: currentColor;
}

/* --- 5. provider page (single-provider.php + template-parts/provider/banner.php) */
.provider-hero .content-plate {
  text-align: center;
}

.provider-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 14px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-teal);
}

.provider-hero__eyebrow::before,
.provider-hero__eyebrow::after {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-accent);
}

.provider-hero__title {
  max-width: 22ch;
  margin: 0 auto 18px;
  color: var(--color-navy-ink);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

/* #1967: "Also known as AHA · Part of …" under the provider name. */
.provider-aka {
  max-width: 60ch;
  margin: -6px auto 18px;
  color: var(--color-navy-ink);
  font-size: 15px;
  line-height: 1.5;
  opacity: 0.82;
  text-wrap: balance;
}
.provider-aka strong { font-weight: 700; opacity: 1; }
.provider-aka a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.provider-hero__meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
  margin: 0 0 var(--space-lg);
  padding: 0;
}

.provider-hero__meta li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-wash);
  color: var(--color-teal-deep);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}

.provider-hero__meta li svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: currentColor;
}

.provider-hero__meta li b {
  font-weight: 600;
  color: var(--color-navy-ink);
  font-variant-numeric: tabular-nums;
}

.provider-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 16px;
}

.provider-hero__actions .button {
  min-height: 50px;
}

.provider-page {
  padding-bottom: var(--space-2xl);
}

.provider-page .content-grid {
  gap: var(--space-lg);
}

.provider-about h2 {
  margin-bottom: var(--space-sm);
  color: var(--color-navy-ink);
  font-size: 22px;
  line-height: 1.3;
}

.provider-about p {
  max-width: 68ch;
  color: var(--color-black-20);
  line-height: 1.6;
}

.provider-about p+p {
  margin-top: var(--space-sm);
}

.provider-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 14px 28px;
  margin: var(--space-lg) 0 0;
  padding: var(--space-lg) 0 0;
  border-top: 1px solid var(--color-grey-90);
}

.provider-facts dt {
  padding-top: 3px;
  color: var(--color-grey-40);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.provider-facts dd {
  margin: 0;
  min-width: 0;
  color: var(--color-black-10);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.provider-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.provider-side .viv-provpricing {
  margin: 0;
}

.provider-note {
  padding: 16px 18px 16px 22px;
  border: 1px solid var(--color-wash-line);
  border-radius: var(--radius-lg);
  background: var(--color-wash);
  box-shadow: inset 4px 0 0 var(--color-accent);
  color: var(--color-black-20);
  font-size: 14px;
  line-height: 1.55;
}

.provider-note b {
  color: var(--color-navy-ink);
  font-weight: 600;
}

/* vivce#913: provider reviews — mirrors the .activity-review* rules above
   (kept as separate classes since template-parts/provider/review.php is a
   parallel partial, not a reuse of the activity one). */
.provider-reviews {
  gap: var(--space-md);
}

.provider-reviews__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.provider-reviews__head h2 {
  margin: 0;
  color: var(--color-navy-ink);
  font-size: 22px;
  line-height: 1.3;
}

.provider-reviews__rating {
  border-top: 1px solid var(--color-grey-90);
}

.provider-reviews-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.provider-reviews-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.provider-review {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-grey-90);
}

.provider-review__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.provider-review__rating {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.provider-reviews-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- 6. library (logged-in): light touch. The grid CSS files keep their
   structure; only type, spacing, the sort select, the card action and the
   mobile filter button are touched, with a `body` prefix so these win by
   specificity regardless of enqueue order. */
body div.res-grid .wpgb-area.wpgb-area-top-2 {
  padding: var(--space-md);
  gap: var(--space-md);
  border-color: var(--color-grey-90);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: 0 2px 6px rgba(16, 86, 106, 0.05);
}

body div.res-grid .wpgb-area-top-2 .wpgb-facet-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-grey-40);
}

body div.res-grid .wpgb-area-top-2 > div.wpgb-facet > .vivgb-acc .vivgb-acc h4 {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-black-10);
}

body .res-grid .wpgb-result-count {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-navy-ink);
}

body div.res-grid .wpgb-sidebar .wpgb-sort-facet .wpgb-select,
body div.res-grid .wpgb-area-bottom-1 .wpgb-per-page-facet .wpgb-select {
  border-color: var(--color-grey-80);
  border-radius: var(--radius);
}

body .res-grid.wp-grid-builder .wpgb-card .vivgb-act-left-right .vivgb-act-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.35;
  margin: 8px 0;
}

body .res-grid.wp-grid-builder .wpgb-card .vivgb-act__actions a {
  min-height: 44px;
  padding: 9px 18px;
  border: 1px solid var(--color-teal);
  border-radius: var(--radius-btn);
  background-color: var(--color-white);
  color: var(--color-teal-deep);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: none;
}

body .res-grid.wp-grid-builder .wpgb-card .vivgb-act__actions a:hover {
  background-color: var(--color-wash);
  border-color: var(--color-teal-deep);
  color: var(--color-teal-deep);
}

body .res-grid.wp-grid-builder .wpgb-card .vivgb-act__actions a:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

body .res-grid.wp-grid-builder #filter-mob-but-w button,
body .res-grid.wp-grid-builder button.vivgb-ss-button {
  border: 1px solid var(--color-teal);
  border-radius: var(--radius-btn);
  background-color: var(--color-white);
  color: var(--color-teal-deep);
  font-family: var(--font-display);
  font-weight: 600;
}

/* #1292: Save this search shares the Filter button's shape; hover and saved states */
body .res-grid.wp-grid-builder button.vivgb-ss-button:hover:not(:disabled) {
  background-color: var(--color-wash);
}

body .res-grid.wp-grid-builder button.vivgb-ss-button:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

body .res-grid.wp-grid-builder button.vivgb-ss-button.is-saved {
  background-color: var(--color-wash);
  border-color: var(--color-wash-line);
  color: var(--color-teal-deep);
}

/* --- 7. motion: only for visitors who allow it ---------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .button,
  .header-main,
  .header-container .top-header .menu a::after,
  .account-menu__list-link,
  .auth-container .auth-bottom-link,
  .auth-legal__list a,
  .provider-hero__meta li,
  input,
  textarea,
  select {
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  }

  .button:not(.link):not(.text):not(.transparent):not(:disabled):hover {
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* #1301 — Credit & MOC details fold into the About panel (the "Credit Details"
   tab is gone). Reuses the #1273 .credit-tooltip row design, sized for a page
   panel instead of a 420px tooltip. Sits between the description grid (which
   draws the rule above it) and Target Specialties. */
.single-activity__credits {
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-grey-90);
}

.single-activity__credits-header {
  margin-bottom: 18px;
}

.single-activity__credits-header .h5 {
  color: var(--color-navy-ink);
}

.single-activity__credits-note {
  margin-top: 4px;
  max-width: 62ch;
}

.single-activity__credits .credit-tooltip {
  min-width: 0;
  width: 100%;
  max-width: 620px;
  gap: 26px;
}

.single-activity__credits .credit-tooltip__section {
  gap: 40px;
}

.single-activity__credits .credit-tooltip__title {
  font-size: 12px;
}

.single-activity__credits .credit-tooltip__content,
.single-activity__credits .credit-tooltip__empty {
  font-size: 15px;
}

.single-activity__credits .credit-tooltip__row {
  padding: 9px 12px;
}

/* "No Credit" / "No MOC" state, shared by the panel and the tooltips */
.credit-tooltip__empty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-grey-50);
}

.credit-tooltip__empty svg {
  width: 16px;
  height: 16px;
  flex: none;
}

@media (max-width: 599px) {
  .single-activity__credits .credit-tooltip__section {
    flex-direction: column;
    gap: 18px;
  }
}

/* #1314 — a zero on the Reviews tab is grey, not a teal badge (vivce#559 on production) */
.post-counter.is-zero {
  background-color: var(--color-grey-90);
  color: var(--color-grey-50);
}

/* #1314 — hero Format chip tooltip: the activity-type / delivery-method descriptions */
.chip-tip {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 320px;
  text-align: left;
}

.chip-tip__row {
  margin: 0;
  color: var(--color-grey-40);
  font-size: 13px;
  line-height: 1.45;
}

.chip-tip__row b {
  color: var(--color-black-10);
  font-weight: 600;
}

/* #1629 — the filter link inside a type chip's tooltip. Same treatment as the
   commercial-support tooltip's link so every tooltip link reads alike. */
.chip-tip__link {
  color: var(--color-teal-deep);
  text-decoration: underline;
}

/* #1956 — a format chip's tooltip: name, one-line definition, then the actions as one
   list (filter link + the two feed preferences). Rows rather than bare icons: "Show more"
   and "Hide" need their words, and the tooltip has the room. The chosen preference fills
   in teal / red like the provider thumbs (.viv-thumb--up/--down.is-on), and all three
   colors clear AA on the white tooltip (see the thumbs note above). */
.chip-tip__title {
  margin: 0;
  color: var(--color-black-10);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.chip-tip--type .chip-tip__title + .chip-tip__row {
  margin-top: -4px;
}

.chip-tip__actions {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 6px 0 0;
  list-style: none;
  border-top: 1px solid var(--color-grey-90);
}

.chip-tip__actions li {
  margin: 0;
  padding: 0;
}

.chip-tip__act {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% + 12px);
  margin: 0 -6px;
  padding: 5px 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--color-grey-40);
  font: inherit;
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}

.chip-tip__act svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.chip-tip__act:hover {
  background: var(--color-wash);
  color: var(--color-black-10);
}

.chip-tip__act:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.chip-tip__act.chip-tip__link {
  color: var(--color-teal-deep);
  text-decoration: none;
}

.chip-tip__act.chip-tip__link span {
  text-decoration: underline;
}

.chip-tip__act.chip-tip__link svg {
  fill: none;
}

.chip-tip__act--pref[data-viv-fmt="1"].is-on {
  background: var(--color-wash);
  color: var(--color-teal-deep);
  font-weight: 600;
}

.chip-tip__act--pref[data-viv-fmt="-1"].is-on {
  background: var(--color-red-95);
  color: var(--color-red-40);
  font-weight: 600;
}

.chip-tip__act--pref:disabled {
  cursor: progress;
  opacity: .7;
}

.chip-tip__note {
  margin: 0;
  color: var(--color-grey-50);
  font-size: 12px;
  line-height: 1.4;
}

.chip-tip__note:empty {
  display: none;
}

/* #1956 — welcome Formats step: a format hidden from a chip tooltip says so on its row. */
.welcome__fmt-hidden {
  display: block;
  margin-top: 2px;
  color: var(--color-red-40);
  font-size: 12px;
  line-height: 1.4;
}

/* #1319 — Related courses: up to two rows under the single-activity content
   grid (other providers on the topic; the provider's own). Cards share the
   sidebar/hero language: white plate, bank-icon provider row, wash chips. */
.related-courses {
  padding: 8px 0 56px;
}

.related-courses__row + .related-courses__row {
  margin-top: 40px;
}

.related-courses__head {
  margin-bottom: 18px;
}

.related-courses__title {
  position: relative;
  margin: 0;
  padding-left: 14px;
  color: var(--color-navy-ink);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.related-courses__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 4px;
  border-radius: 2px;
  background: var(--color-accent);
}

.related-courses__sub {
  margin: 6px 0 0 14px;
  color: var(--color-grey-50);
  font-size: 15px;
}

/* #1333 — "See all" sits by the title, quiet until hovered */
.related-courses__head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
}

.related-courses__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-teal);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.related-courses__more svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.related-courses__more:hover,
.related-courses__more:focus-visible {
  color: var(--color-teal-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 599px) {
  .related-courses__head-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .related-courses__more {
    margin-left: 14px;
  }
}

.related-courses__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.related-courses__item {
  min-width: 0;
}

.rc-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  height: 100%;
  padding: 14px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-90);
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
}

.rc-card:hover,
.rc-card:focus-visible {
  border-color: var(--color-wash-line);
  box-shadow: var(--shadow-card);
}

.rc-card .post-thumbnail-wrapper {
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-pale);
}

.rc-card .post-thumbnail {
  width: 100%;
  height: 100%;
  padding-top: 0;
  aspect-ratio: auto;
  border-radius: 0;
}

.rc-card .post-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Provider-logo fallback in the small square tile: the generic
   .post-thumbnail--provider-logo rule loses to the two-class selector above,
   so wide lockups were cropped to their middle third ("ORTH SEMINA"). Fit,
   never crop, and keep the white plate. */
.rc-card .post-thumbnail-wrapper:has(.post-thumbnail--provider-logo) {
  background: var(--color-white);
}

.rc-card .post-thumbnail--provider-logo img {
  object-fit: contain;
  padding: 6%;
}

.rc-card__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: stretch;
}

.rc-card__provider {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-grey-50);
  font-size: 13px;
  line-height: 1.3;
}

.rc-card__provider svg {
  flex: none;
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* In the "More from <Provider>" row every card is that provider's: the heading
   already says so, so the per-card provider line is dropped there. */
.related-courses__row--provider .rc-card__provider {
  display: none;
}

.rc-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--color-navy-ink);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

.rc-card:hover .rc-card__title {
  color: var(--color-teal-deep);
}

.rc-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
}

.rc-card__chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--color-wash);
  color: var(--color-teal-deep);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}

.rc-card__chip b {
  font-weight: 600;
  color: var(--color-navy-ink);
}

@media (max-width: 992px) {
  .related-courses__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 599px) {
  .related-courses {
    padding-bottom: 32px;
  }

  .related-courses__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .related-courses__title {
    font-size: 21px;
  }
}

/* #1240 / #1254 terms line under the social buttons, and the /welcome/ step */
.viv-auth-terms-line {
  margin: var(--space-sm, 12px) 0 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-grey-40);
}

.viv-auth-terms-line a,
.welcome__check .viv-checkbox-label a,
.welcome__signout a {
  color: var(--color-teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.viv-auth-terms-line a:hover,
.viv-auth-terms-line a:focus-visible {
  color: var(--color-navy-ink);
}

.welcome {
  text-align: center;
}

.welcome__title {
  margin: 0 0 var(--space-xs, 8px);
  color: var(--color-navy-ink);
}

.welcome__text {
  margin: 0 0 var(--space-lg, 24px);
  color: var(--color-grey-40);
}

.welcome__form {
  display: grid;
  gap: var(--space-md, 16px);
  justify-items: stretch;
  text-align: left;
}

.welcome__field {
  display: grid;
  gap: 6px;
}

.welcome__label {
  font-weight: 600;
  color: var(--color-navy-ink);
}

.welcome__optional {
  font-weight: 400;
  color: var(--color-grey-40);
}

.welcome__field input[type="text"] {
  width: 100%;
  min-height: 48px;
  letter-spacing: 0.08em;
}

.welcome__help {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-grey-40);
}

/* #1741 budget step: radio cards in the formats' clothing. */
.welcome__opts {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
}

.welcome__opt { position: relative; min-width: 0; }

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

.welcome__opt-body {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid var(--color-grey-80);
  border-radius: 12px;
  background: var(--color-white);
  font-size: 15px;
  color: var(--color-navy-ink);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.welcome__opt-body:hover { border-color: var(--color-teal); box-shadow: 0 4px 14px rgba(6, 39, 51, 0.08); }

.welcome__opt-box:focus-visible + .welcome__opt-body { border-color: var(--color-teal); box-shadow: 0 0 0 3px rgba(13, 115, 119, 0.2); }

.welcome__opt-check {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-grey-80);
  border-radius: 50%;
  background: var(--color-white);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.welcome__opt-box:checked + .welcome__opt-body { border-color: var(--color-teal); background: var(--color-pale); }

.welcome__opt-box:checked + .welcome__opt-body .welcome__opt-check { border-color: var(--color-teal); background: var(--color-teal); box-shadow: inset 0 0 0 4px var(--color-white); }

.welcome__budget-amount { margin-top: 12px; }

.welcome__label--gap { margin-top: var(--space-md, 16px); }

.welcome__money {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.welcome__money-sign { color: var(--color-grey-40); font-weight: 600; }

.welcome__money input {
  width: 140px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--color-grey-80);
  border-radius: 8px;
  font: inherit;
}

/* #1737: the explaining line sits between the label and the search box. */
.welcome__help + .welcome__specialties {
  margin-top: 10px;
}

.welcome__field-error {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-red-40);
}

.welcome__check--error .viv-checkbox {
  box-shadow: 0 0 0 2px var(--color-red-40);
}

.welcome__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--color-pale);
  color: var(--color-teal-deep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

.welcome__submit {
  width: 100%;
  min-height: 48px;
}

.welcome__error {
  margin: 0;
}

.welcome__signout--who {
  margin-top: 6px;
}

.welcome__signout {
  margin: var(--space-lg, 24px) 0 0;
  font-size: 13px;
  color: var(--color-grey-40);
}

/* #1354 NPI on the sign-up form */
.viv-auth-form .viv-field-npi {
  letter-spacing: 0.08em;
}

.viv-auth-form .viv-field-help {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-grey-40);
}

/* viv-auth's plain checkbox template gives the text span no class, so it wraps under the box;
   give it the same flex role as .viv-checkbox-label on the acceptance field. */
.viv-auth-form .viv-checkbox-wrapper:has(.viv-field-npi-consent) {
  align-items: flex-start;
  flex-wrap: nowrap;
}

.viv-auth-form .viv-checkbox-wrapper:has(.viv-field-npi-consent) > span:last-of-type {
  flex: 1 0 0;
  line-height: 24px;
}

.viv-auth-form .viv-checkbox-wrapper:has(.viv-field-npi-consent) .welcome__badge {
  margin-left: 6px;
  vertical-align: 1px;
}

/* #1410 square sign-in buttons on the wall modal */
.wall-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md, 16px);
  margin-top: var(--space-md, 16px);
  padding-top: var(--space-md, 16px);
  border-top: 1px solid var(--color-wash-line);
}

.wall-social__label {
  font-size: 13px;
  color: var(--color-grey-40);
}

.wall-social__row {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 12px);
}

.wall-social__square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-grey-80);
  border-radius: 8px;
  background: var(--color-white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wall-social__square:hover,
.wall-social__square:focus-visible {
  border-color: var(--color-teal);
  box-shadow: 0 0 0 3px var(--color-pale);
}

.wall-social__square img {
  width: 22px;
  height: 22px;
}

/* Google's own icon button, transparent, laid over our square (js/consent.js) */
.wall-social__google-wrap {
  position: relative;
  display: inline-flex;
}

.wall-social__google-live {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  opacity: 0.01;
}

.wall-social__google-wrap.is-live .wall-social__google-live {
  display: flex;
}

.wall-social__google-wrap.is-live:hover .wall-social__square,
.wall-social__google-wrap.is-live:focus-within .wall-social__square {
  border-color: var(--color-teal);
  box-shadow: 0 0 0 3px var(--color-pale);
}

/* #1417 — the facts, once, in the sidebar, in the chip style the hero used.
   The single-activity sidebar is wider so four chips read in two lines. */
.single-activity .content-grid {
  --sidebar-container: 360px;
}

.activity-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0 0 var(--space-md);
  border-bottom: 1px solid var(--color-grey-90);
}

.activity-facts__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-wash);
  color: var(--color-teal-deep);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}

.activity-facts__chip svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: var(--color-teal);
}

.activity-facts__chip b {
  color: var(--color-navy-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.activity-facts__chip--tip {
  cursor: help;
}

.activity-facts__chip--tip:hover {
  background: var(--color-pale);
}

.activity-facts__info {
  display: inline-flex;
  margin-left: -2px;
  opacity: .75;
}

.activity-facts__info svg {
  width: 14px;
  height: 14px;
  fill: var(--color-teal-deep);
}

/* #1484 — free reads green, like the cards' free state */
.activity-facts__chip--free {
  background: var(--color-green-95);
  color: #0B7A3E; /* the cards' free chip colour (vivgb/pricing-resolver.php) */
}

.activity-facts__chip--free svg,
.activity-facts__chip--free .activity-facts__info svg {
  fill: var(--color-green-40);
}

.activity-facts__chip--free.activity-facts__chip--tip:hover {
  background: #d6f5e0;
}

/* vivce#1548 — commercial support reads like a disclosure, not a defect */
.activity-facts__chip--commercial {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.activity-facts__chip--commercial svg,
.activity-facts__chip--commercial .activity-facts__info svg {
  fill: var(--color-warning);
}

.activity-facts__chip--commercial.activity-facts__chip--tip:hover {
  background: #FFEAC0;
}

.activity-facts__chip--includes {
  background: transparent;
  border: 1px dashed var(--color-wash-line);
  color: var(--color-grey-40);
  font-size: 13px;
}

/* #1416 — time-left pill next to "Last day to claim credit" */
.deadline-indicator__left {
  margin-left: 6px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  background: var(--color-wash);
  color: var(--color-teal-deep);
}

.deadline-indicator--warning .deadline-indicator__left {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.deadline-indicator--danger .deadline-indicator__left {
  background: var(--color-red-95);
  color: var(--color-red-40);
}

@media (max-width: 992px) {
  .single-activity .content-grid {
    --sidebar-container: 305px;
  }
}

/* "Signing you in…" veil after a successful sign-in / sign-up (js/consent.js) */
.vivce-signin-progress {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 63, 78, 0.72);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.vivce-signin-progress.is-on {
  opacity: 1;
}

.vivce-signin-progress__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md, 16px);
  min-width: 240px;
  padding: var(--space-xl, 32px) var(--space-lg, 24px);
  border-radius: 16px;
  background: var(--color-white);
  box-shadow: 0 20px 50px rgba(11, 63, 78, 0.35);
}

.vivce-signin-progress__spinner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid var(--color-pale);
  border-top-color: var(--color-teal);
  animation: spin 0.8s linear infinite;
}

.vivce-signin-progress__text {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-navy-ink);
}

@media (prefers-reduced-motion: reduce) {
  .vivce-signin-progress { transition: none; }
  .vivce-signin-progress__spinner { animation-duration: 2s; }
}

/* #1506 welcome panel 2: confirm specialty + state */
.welcome__facts {
  display: grid;
  gap: 6px;
  margin: 0 0 var(--space-sm, 12px);
  padding: var(--space-sm, 12px) var(--space-md, 16px);
  border-radius: 10px;
  background: var(--color-wash);
  text-align: left;
}

.welcome__facts > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md, 16px);
  font-size: 14px;
}

.welcome__facts dt {
  color: var(--color-grey-40);
}

.welcome__facts dd {
  margin: 0;
  font-weight: 600;
  color: var(--color-navy-ink);
  text-align: right;
}

.welcome__select,
.profile-select {
  width: 100%;
  min-height: 48px;
  padding: 0 40px 0 14px;
  border: 1px solid var(--color-grey-80);
  border-radius: 8px;
  background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2310566A' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  font: inherit;
  color: var(--color-navy-ink);
  appearance: none;
  -webkit-appearance: none;
}

.welcome__select:focus-visible,
.profile-select:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: 1px;
}

/* #1506 lists on the welcome panel: several specialties / states, renewal dates */
.welcome__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.welcome__list legend {
  padding: 0;
  margin-bottom: 2px;
}

.welcome__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.welcome__row--state {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

.welcome__row .welcome__select {
  min-width: 0;
}

.welcome__renewal {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: var(--color-grey-40);
}

.welcome__renewal input[type="date"] {
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--color-grey-80);
  border-radius: 8px;
  font: inherit;
  font-size: 16px; /* #1898: the value read smaller than the fields around it */
  color: var(--color-navy-ink);
  background: var(--color-white);
}

.welcome__remove {
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-grey-80);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-grey-40);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.welcome__remove:hover,
.welcome__remove:focus-visible {
  border-color: var(--color-red-40);
  color: var(--color-red-40);
}

.welcome__add {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-teal);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.welcome__facts-sub {
  font-weight: 400;
  color: var(--color-grey-40);
}

/* #1735: the account-vs-registry name line under the facts. */
.welcome__name-check {
  margin: -6px 0 var(--space-sm, 12px);
  padding: 0 4px;
  text-align: left;
}

.welcome__name-check__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-grey-40);
}

.welcome__name-check__text b {
  color: var(--color-navy-ink);
  font-weight: 600;
}

.welcome__name-check__link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--color-teal-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.welcome__name-check__npi {
  margin-top: 8px;
}

.profile-select--multi {
  min-height: 160px;
  padding: 8px 12px;
  background-image: none;
}

@media (max-width: 560px) {
  .welcome__row--state {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .welcome__row--state .welcome__renewal {
    grid-column: 1 / -1;
  }
  .welcome__row--state > .welcome__select,
  .welcome__row--state > .welcome__combo,
  .welcome__row--state > .welcome__remove {
    margin-top: 0;
  }
  .welcome__row--state > .welcome__remove {
    grid-row: 1;
    grid-column: 2;
  }
}

/* #1506 specialty search on the welcome panel + the NPI escape hatch */
.welcome__specialties {
  text-align: left;
}

.welcome__specialties .specialty-selector__badges {
  margin: 10px 0 0;
}

.welcome__specialties .specialty-selector__result {
  max-height: 260px;
  overflow: auto;
  margin-top: 8px;
}

/* QA 2026-09-09: the first chip is the main specialty; the others offer "Make main" (reorder). */
.welcome__specialties .badge-action.is-main {
  border-color: var(--color-teal-deep);
  background: var(--color-teal-bg, var(--color-blue-bg));
}

.welcome__specialties .badge-action.is-main::before {
  content: "Main";
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-teal-deep);
}

.welcome__specialties .badge-action .welcome__make-main {
  display: inline-flex;
  align-items: center;
  width: auto;
  height: auto;
  padding: 0 4px;
  border: 0;
  border-radius: 4px;
  background: none;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-teal-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.welcome__specialties .badge-action .welcome__make-main:hover,
.welcome__specialties .badge-action .welcome__make-main:focus-visible {
  background: var(--color-wash);
  outline: none;
}

.welcome__specialties .badge-action.is-main .welcome__make-main {
  display: none;
}

/* Versions b/c (Kalman 2026-09-09): category chips say so; the Topics step gets its own box. */
.welcome__chip-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-grey-40);
}

.welcome__subs--step {
  margin-top: 0;
  padding: 0;
  border: 0;
  background: none;
}

.welcome__subs--step .welcome__sub-head {
  font-size: 14px;
}

/* #1506 NPI escape hatch — above the form; a side card with an arrow from 1180px up (Kalman 2026-09-08). */
.welcome__npi-out {
  margin: 0 0 var(--space-md, 16px);
  border-radius: 10px;
  background: var(--color-wash);
  text-align: left;
}

.welcome__npi-out__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-navy-ink);
}

.welcome__npi-out__summary::-webkit-details-marker {
  display: none;
}

.welcome__npi-out__summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 10px;
}

.welcome__npi-out__arrow {
  display: none;
  color: var(--color-teal);
}

.welcome__npi-out__text {
  flex: 1 1 auto;
}

.welcome__npi-out__toggle {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-teal-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.welcome__npi-out[open] .welcome__npi-out__toggle {
  display: none;
}

.welcome__npi-out__form {
  padding: 0 14px 14px;
}

.welcome__npi-out__row {
  display: flex;
  gap: 8px;
}

.welcome__npi-out__row .button {
  white-space: nowrap;
}

.welcome__npi-out__row input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--color-grey-80);
  border-radius: 8px;
  font: inherit;
  letter-spacing: 0.08em;
}

@media (min-width: 1180px) {
  .auth-content {
    position: relative;
  }
  .welcome--profile .welcome__npi-out {
    position: absolute;
    top: 44px;
    left: calc(100% + 24px);
    width: 250px;
    margin: 0;
    padding: 16px 16px 16px;
    border-radius: var(--radius-xl, 16px);
    background: var(--color-white);
    box-shadow: var(--shadow-deep), 0 0 0 1px rgba(255, 255, 255, 0.06);
  }
  .welcome--profile .welcome__npi-out__summary {
    display: block;
    padding: 0 0 10px;
    cursor: default;
    pointer-events: none;
  }
  .welcome--profile .welcome__npi-out__arrow {
    display: block;
    position: absolute;
    top: 10px;
    left: -40px;
  }
  .welcome--profile .welcome__npi-out__toggle {
    display: none;
  }
  .welcome--profile .welcome__npi-out__form {
    padding: 0;
  }
  .welcome--profile .welcome__npi-out__row {
    flex-direction: column;
  }
  .welcome--profile .welcome__npi-out__row .button {
    width: 100%;
  }
}

/* The slim selector's result grid reserves ten rows even when empty; not on the welcome panel. */
.welcome__specialties .specialty-selector__result-list {
  grid-template-rows: none;
  grid-auto-rows: 40px;
}

.welcome__specialties .specialty-selector__result:empty,
.welcome__specialties .specialty-selector__result-list:empty {
  margin: 0;
}

/* #1520 board certifications on the welcome panel */
.welcome__board {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--color-wash-line);
  border-radius: 10px;
}

.welcome__certs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px 12px;
}

.welcome__cert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
}

.welcome__cert input {
  margin-top: 3px;
  accent-color: var(--color-teal);
}

/* Kalman 2026-09-11: only the ticked certificates until "Show all" */
.welcome__certs.is-collapsed .welcome__cert:not(.is-on) { display: none; }

.welcome__certs-more {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-teal);
  cursor: pointer;
}

.welcome__certs-more:hover,
.welcome__certs-more:focus-visible { text-decoration: underline; text-underline-offset: 3px; outline: none; }

.welcome__moc {
  display: grid;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--color-wash-line);
}

/* #1506 browse-by-category picker on the welcome panel */
.welcome__browse {
  margin: 6px 0 4px;
  text-align: left;
}

.welcome__browse > summary,
.welcome__cat > summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 12px;
  font-weight: 600;
  color: var(--color-navy-ink);
}

/* Kalman 2026-09-11: a small link above the chips; the tree keeps its box once open */
.welcome__browse > summary {
  display: inline-block;
  padding: 2px 0;
  font-size: 13px;
  color: var(--color-teal);
}

.welcome__browse > summary:hover,
.welcome__browse > summary:focus-visible { color: var(--color-teal-deep); text-decoration: underline; text-underline-offset: 3px; outline: none; }

.welcome__browse[open] > .welcome__browse-body {
  margin-top: 6px;
  border: 1px solid var(--color-wash-line);
  border-radius: 10px;
}

.welcome__browse > summary::-webkit-details-marker,
.welcome__cat > summary::-webkit-details-marker { display: none; }

.welcome__browse > summary::before,
.welcome__cat > summary::before {
  content: '▸';
  display: inline-block;
  width: 14px;
  color: var(--color-teal);
}

.welcome__browse[open] > summary::before,
.welcome__cat[open] > summary::before { content: '▾'; }

.welcome__browse-body {
  max-height: 360px;
  overflow: auto;
}

.welcome__cat + .welcome__cat { border-top: 1px solid var(--color-wash-line); }

.welcome__cat > summary { font-weight: 500; font-size: 14px; }

.welcome__cat-count {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-grey-40);
}

.welcome__picks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 12px 12px 26px;
}

.welcome__pick {
  padding: 5px 10px;
  border: 1px solid var(--color-grey-80);
  border-radius: 999px;
  background: var(--color-white);
  font: inherit;
  font-size: 13px;
  color: var(--color-navy-ink);
  cursor: pointer;
}

.welcome__pick small {
  margin-left: 4px;
  font-size: 11px;
  color: var(--color-grey-40);
}

.welcome__pick--cat { font-weight: 600; }

.welcome__pick:hover { border-color: var(--color-teal); }

.welcome__pick.is-on {
  border-color: var(--color-teal);
  background: var(--color-pale);
  color: var(--color-teal-deep);
}

.welcome__pick.is-on::before { content: '✓ '; }

/* #1763 "What matters most": the chips carry their pick order (1, 2, 3) instead of the tick;
   once three are picked the rest step back without becoming unclickable (a click on a picked one frees a slot). */
.welcome__picks--priorities {
  padding: 0;
  gap: 8px;
}

.welcome__pick--priority {
  padding: 8px 14px;
  font-size: 14px;
}

.welcome__pick--priority.is-on::before {
  content: attr(data-n);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin: 0 6px 0 -4px;
  border-radius: 50%;
  background: var(--color-teal);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  vertical-align: -3px;
}

.welcome__pick--priority.is-full {
  color: var(--color-grey-40);
  border-color: var(--color-grey-90);
}

.welcome__wants {
  display: grid;
  gap: 6px;
}

.welcome__textarea {
  width: 100%;
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid var(--color-grey-80);
  border-radius: 8px;
  background: var(--color-white);
  font: inherit;
  line-height: 1.5;
  color: var(--color-navy-ink);
  resize: vertical;
}

.welcome__textarea:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: 1px;
}

/* #1509 topics panel */
.welcome__topics {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.welcome__topic {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "box label" "box meta";
  column-gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-grey-80);
  border-radius: 10px;
  cursor: pointer;
}

.welcome__topic input { grid-area: box; margin-top: 3px; accent-color: var(--color-teal); }
.welcome__topic-label { grid-area: label; font-weight: 600; color: var(--color-navy-ink); }
.welcome__topic-meta { grid-area: meta; font-size: 12px; color: var(--color-grey-40); }
.welcome__topic.is-on { border-color: var(--color-teal); background: var(--color-wash); }

/* #1508 estimated licence renewal dates on the welcome panel */
.welcome__hint {
  display: block;
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-grey-40);
}

.welcome__renewal input[type="date"][data-estimated] {
  border-color: var(--color-teal);
  background: #eef8f7;
}

.welcome__birth {
  margin-top: 4px;
  padding: 12px;
  border: 1px dashed var(--color-grey-80);
  border-radius: 10px;
  text-align: left;
}

.welcome__birth .welcome__select {
  min-height: 48px;
}

.welcome__row--state {
  align-items: start;
}

.welcome__row--state > .welcome__select,
.welcome__row--state > .welcome__combo,
.welcome__row--state > .welcome__remove {
  margin-top: 22px; /* level with the date input, under its label line */
}

.welcome__birth {
  margin: 4px 0 8px;
}

/* Welcome panel in steps + searchable board / state pickers (Kalman 2026-09-08) */
.welcome__progress {
  margin: 0 0 4px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--color-grey-40);
  text-align: left;
}

.welcome__progress b {
  font-weight: 600;
  color: var(--color-teal-deep);
}

/* #1763 the live preview (Kalman's shape): "Honing in…", N / total possible matches + the top three
   activities, N / total provider matches + the top three providers. Narrow screens: a pale card under the
   progress line, sticky, the lists folded under "See the top matches". Wide screens (>= 1180px, below):
   a white rail hung off the right of the panel, everything showing, sticky as the step scrolls. */
.welcome__preview-slot {
  min-width: 0;
}

.welcome__preview {
  position: sticky;
  top: 8px;
  z-index: 19;
  margin: 0 0 4px;
  padding: 12px 14px;
  border: 1px solid var(--color-wash-line);
  border-radius: var(--radius-lg);
  background: var(--color-pale);
  transition: opacity 0.2s;
}

.welcome__preview[hidden] {
  display: none;
}

.welcome__preview.is-loading {
  opacity: 0.7;
}

.welcome__preview-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-navy-ink);
}

.welcome__preview-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 5px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--color-navy-ink);
}

.welcome__preview-line--providers {
  margin-top: 6px;
}

.welcome__preview-count {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-teal-deep);
}

.welcome__preview-of {
  font-variant-numeric: tabular-nums;
  color: var(--color-grey-40);
}

.welcome__preview-toggle {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-teal-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.welcome__preview-fold {
  display: none;
}

.welcome__preview-fold.is-open {
  display: block;
}

.welcome__preview-label {
  margin: 8px 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-grey-40);
}

.welcome__preview-label[hidden] {
  display: none;
}

.welcome__preview-list {
  display: grid;
  gap: 6px;
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
}

.welcome__preview-item {
  min-width: 0;
}

.welcome__preview-provider {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--color-grey-90);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  color: inherit;
  text-decoration: none;
}

.welcome__preview-provider:hover,
.welcome__preview-provider:focus-visible {
  border-color: var(--color-wash-line);
  box-shadow: var(--shadow-card);
}

.welcome__preview-provider .welcome__plogo {
  flex: none;
  width: 36px;
  height: 36px;
  font-size: 12px;
}

.welcome__preview-provider-body {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.welcome__preview-provider-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-navy-ink);
}

.welcome__preview-provider-n {
  font-size: 12px;
  color: var(--color-grey-40);
}

@media (min-width: 1180px) {
  .welcome--wv-d .welcome__preview-slot {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(100% + 24px);
    width: 300px;
  }
  .welcome--wv-d .welcome__preview {
    top: 24px;
    margin: 0;
    padding: 18px 18px 14px;
    border: 0;
    border-radius: var(--radius-xl, 16px);
    background: var(--color-white);
    box-shadow: var(--shadow-deep), 0 0 0 1px rgba(255, 255, 255, 0.06);
  }
  .welcome--wv-d .welcome__preview-title {
    font-size: 17px;
    margin-bottom: 8px;
  }
  .welcome--wv-d .welcome__preview-toggle {
    display: none;
  }
  .welcome--wv-d .welcome__preview-fold {
    display: block;
  }
  .welcome--wv-d .welcome__preview-line--providers {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-grey-90);
  }
  .welcome--wv-d .welcome__preview .rc-card--row,
  .welcome--wv-d .welcome__preview-provider {
    background: var(--color-pale);
    border-color: transparent;
  }
  .welcome--wv-d .welcome__preview .rc-card--row .rc-card__title,
  .welcome--wv-d .welcome__preview-provider-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
  }
  /* The NPI escape hatch keeps its side card, on the other side — the rail has the right. */
  .welcome--profile.welcome--wv-d .welcome__npi-out {
    left: auto;
    right: calc(100% + 24px);
  }
  .welcome--profile.welcome--wv-d .welcome__npi-out__arrow {
    left: auto;
    right: -40px;
    transform: scaleX(-1);
  }
}

/* The compact row of the shared small card (lib/rc-card.php): one line of title, a smaller thumbnail. */
.rc-card--row {
  gap: 10px;
  padding: 8px 10px;
}

.rc-card--row .post-thumbnail-wrapper {
  flex-basis: 56px;
  width: 56px;
  height: 56px;
}

.rc-card--row .rc-card__body {
  gap: 3px;
}

.rc-card--row .rc-card__provider {
  font-size: 12px;
}

.rc-card--row .rc-card__title {
  -webkit-line-clamp: 1;
  font-size: 14px;
}

.rc-card--row .rc-card__meta {
  padding-top: 0;
}

.rc-card--row .rc-card__chip {
  padding: 2px 7px;
  font-size: 11px;
}

.welcome__step {
  display: grid;
  gap: var(--space-md, 16px);
}

.welcome__step[hidden] {
  display: none;
}

.welcome__nav {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.welcome__nav .welcome__nav-next,
.welcome__nav .welcome__submit {
  flex: 1 1 auto;
  margin-left: auto;
}

.welcome__nav .welcome__nav-prev {
  flex: 0 0 auto;
  min-width: 96px;
}

.welcome__nav [hidden],
.welcome__progress[hidden] {
  display: none !important; /* .button sets display, which would beat the hidden attribute */
}

.welcome__combo {
  position: relative;
  min-width: 0;
}

.welcome__combo-input {
  width: 100%;
  min-height: 48px;
  padding: 0 40px 0 14px;
  border: 1px solid var(--color-grey-80);
  border-radius: 8px;
  font: inherit;
  color: var(--color-navy-ink);
  background: var(--color-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230D7377' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>") no-repeat right 12px center;
}

.welcome__combo-input:focus {
  outline: none;
  border-color: var(--color-teal);
  box-shadow: 0 0 0 3px rgba(13, 115, 119, 0.15);
}

.welcome__combo-list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--color-white);
  border: 1px solid var(--color-grey-80);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(6, 39, 51, 0.18);
  text-align: left;
}

.welcome__combo-item,
.welcome__combo-empty {
  padding: 9px 14px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--color-navy-ink);
  cursor: pointer;
}

.welcome__combo-empty {
  color: var(--color-grey-40);
  cursor: default;
}

.welcome__combo-item:hover,
.welcome__combo-item.is-active {
  background: var(--color-wash);
}

.welcome__combo-item.is-selected {
  font-weight: 600;
  color: var(--color-teal-deep);
}

/* #1898: a picked board is a chip — wash fill, teal text, × inside the box (Kalman 2026-09-17) */
.welcome__combo.is-picked .welcome__combo-input {
  padding-right: 48px;
  border-color: var(--color-teal);
  background-color: var(--color-wash);
  background-image: none;
  color: var(--color-teal-deep);
  font-weight: 600;
  cursor: default;
}

.welcome__combo.is-picked .welcome__combo-input:focus {
  box-shadow: none;
}

.welcome__combo-clear {
  display: none;
  position: absolute;
  top: 50%;
  right: 8px;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-teal-deep);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.welcome__combo.has-clear .welcome__combo-clear {
  display: inline-flex;
}

.welcome__combo.has-clear:not(.is-picked) .welcome__combo-input {
  padding-right: 48px;
  background-position: right 44px center;
}

.welcome__combo-clear:hover,
.welcome__combo-clear:focus-visible {
  background: rgba(13, 115, 119, 0.12);
  outline: none;
}

.welcome__submit.is-submitting {
  opacity: 0.75;
  cursor: progress;
}

/* "Add “…” as your board" — a board we don't list (2026-09-10) */
.welcome__combo-add {
  border-top: 1px solid var(--color-grey-90);
  color: var(--color-teal);
  font-weight: 600;
}

.welcome__combo-add::before { content: '+ '; }

.welcome__help--small {
  margin-top: 4px;
  font-size: 13px;
}

/* #1988: the Providers step's one instruction reads at body size. */
.welcome__help--lead {
  font-size: 16px;
}

/* Cross-specialty topics step (2026-09-10): larger pills, room to breathe */
.welcome__cross .welcome__picks {
  margin-top: 10px;
  padding: 0;
  gap: 8px;
}

.welcome__cross .welcome__pick {
  padding: 8px 14px;
  font-size: 15px;
}

.lib-hero__moc--credit {
  margin-top: 6px;
}

/* Formats step (2026-09-10): headline cards + "More formats" accordion */
.welcome__fmts {
  display: grid;
  grid-template-columns: 1fr; /* the auth panel is ~500px wide; two columns cramp the taglines */
  gap: 10px;
  margin-top: 6px;
}

.welcome__fmt {
  position: relative;
  min-width: 0;
}

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

.welcome__fmt-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "art text ." "art text meta";
  align-items: center;
  column-gap: 12px;
  min-height: 72px;
  padding: 12px 14px 12px 12px;
  border: 1px solid var(--color-grey-80);
  border-radius: 12px;
  background: var(--color-white);
  box-shadow: 0 1px 2px rgba(6, 39, 51, 0.04);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.welcome__fmt-body:hover { border-color: var(--color-teal); box-shadow: 0 4px 14px rgba(6, 39, 51, 0.08); }

.welcome__fmt-box:focus-visible + .welcome__fmt-body {
  outline: none;
  border-color: var(--color-teal);
  box-shadow: 0 0 0 3px rgba(13, 115, 119, 0.2);
}

.welcome__fmt-art {
  grid-area: art;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--color-wash);
  color: var(--color-teal);
}

.welcome__fmt-text {
  grid-area: text;
  display: grid;
  gap: 2px;
  min-width: 0;
  padding-right: 28px; /* room for the "i" */
}

.welcome__fmt-name {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.25;
  color: var(--color-navy-ink);
}

.welcome__fmt-tag {
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-grey-40);
}

.welcome__fmt-meta {
  grid-area: meta;
  align-self: end;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}

.welcome__fmt-count {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--color-grey-40);
  white-space: nowrap;
}

.welcome__fmt-check {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--color-grey-80);
  border-radius: 50%;
  background: var(--color-white);
}

.welcome__fmt.is-on .welcome__fmt-body,
.welcome__fmt-box:checked + .welcome__fmt-body {
  border-color: var(--color-teal);
  background: var(--color-wash);
}

.welcome__fmt.is-on .welcome__fmt-art,
.welcome__fmt-box:checked + .welcome__fmt-body .welcome__fmt-art {
  background: var(--color-teal);
  color: var(--color-white);
}

.welcome__fmt.is-on .welcome__fmt-check,
.welcome__fmt-box:checked + .welcome__fmt-body .welcome__fmt-check {
  border-color: var(--color-teal);
  background: var(--color-teal) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 13l4 4L19 7'/></svg>") no-repeat center;
}

.welcome__fmt-info {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--color-grey-80);
  border-radius: 50%;
  background: var(--color-white);
  font: 600 11px/1 Georgia, serif;
  font-style: italic;
  color: var(--color-grey-40);
  cursor: help;
}

.welcome__fmt-info:hover,
.welcome__fmt-info:focus-visible { border-color: var(--color-teal); color: var(--color-teal); outline: none; }

.welcome__fmt-tip {
  position: absolute;
  z-index: 25;
  right: 12px;
  top: 38px;
  width: min(280px, calc(100% - 24px));
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--color-navy-ink);
  color: var(--color-white);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  box-shadow: 0 10px 30px rgba(6, 39, 51, 0.25);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.12s, transform 0.12s;
}

.welcome__fmt-tip::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 6px;
  border: 6px solid transparent;
  border-top: 0;
  border-bottom-color: var(--color-navy-ink);
}

.welcome__fmt-info:hover + .welcome__fmt-tip,
.welcome__fmt-info:focus-visible + .welcome__fmt-tip,
.welcome__fmt-tip.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* compact rows under "More formats" */
.welcome__fmt--small .welcome__fmt-body { min-height: 62px; padding: 9px 12px 9px 10px; }
.welcome__fmt--small .welcome__fmt-art { width: 34px; height: 34px; border-radius: 8px; }
.welcome__fmt--small .welcome__fmt-icon { width: 20px; height: 20px; }
.welcome__fmt--small .welcome__fmt-name { font-size: 14px; }
.welcome__fmt--small .welcome__fmt-tag { font-size: 12px; }
.welcome__fmt--small .welcome__fmt-check { width: 18px; height: 18px; }
.welcome__fmt--small .welcome__fmt-info { top: 8px; }

.welcome__fmt-more {
  margin-top: 10px;
  border: 1px solid var(--color-wash-line);
  border-radius: 10px;
  text-align: left;
}

.welcome__fmt-more > summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 12px;
  font-weight: 600;
  color: var(--color-navy-ink);
}

.welcome__fmt-more > summary::-webkit-details-marker { display: none; }

.welcome__fmt-more > summary::before {
  content: '▸';
  display: inline-block;
  width: 14px;
  color: var(--color-teal);
}

.welcome__fmt-more[open] > summary::before { content: '▾'; }

.welcome__fmts--more {
  margin: 0;
  padding: 0 10px 10px;
  border-top: 1px solid var(--color-wash-line);
  padding-top: 10px;
}

/* Tree layout of the Formats step (the filter's shape, 2026-09-10) */
.welcome__ftree {
  display: grid;
  gap: 12px;
  margin-top: 6px;
}

.welcome__fgroup {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.welcome__fgroup > *,
.welcome__ftree > * { min-width: 0; } /* a nowrap preview must not widen the column */

.welcome__fkids {
  display: grid;
  gap: 6px;
  margin-left: 22px;
  padding-left: 12px;
  border-left: 2px solid var(--color-wash-line);
}

.welcome__fkids--2 {
  margin-left: 18px;
  gap: 4px;
}

/* "Expand (10 subtypes) +" inside the group row (2026-09-10, quiet accordion) */
.welcome__fmt--haskids .welcome__fmt-body { padding-bottom: 30px; }

.welcome__fmt-toggle {
  position: absolute;
  left: 68px;
  bottom: 10px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-teal);
  cursor: pointer;
}

.welcome__fmt-toggle:hover,
.welcome__fmt-toggle:focus-visible { color: var(--color-teal-deep); text-decoration: underline; text-underline-offset: 3px; outline: none; }

.welcome__fkids-wrap.welcome__fkids-wrap--quiet > summary { display: none; } /* beats the bar's display:flex below */

/* accordion bar under a group (2026-09-10) */
.welcome__fkids-wrap {
  margin-left: 22px;
  min-width: 0;
  overflow: hidden;
}

.welcome__fkids-wrap > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 4px 6px 4px 0;
  list-style: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--color-grey-40);
}

.welcome__fkids-wrap > summary::-webkit-details-marker { display: none; }

.welcome__fkids-wrap > summary::before {
  content: '▸';
  flex: 0 0 auto;
  width: 14px;
  color: var(--color-teal);
}

.welcome__fkids-wrap[open] > summary::before { content: '▾'; }

.welcome__fkids-wrap > summary:hover .welcome__fkids-n,
.welcome__fkids-wrap > summary:focus-visible .welcome__fkids-n { color: var(--color-teal); }

.welcome__fkids-wrap > summary:focus-visible { outline: none; }

.welcome__fkids-n {
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--color-navy-ink);
}

.welcome__fkids-preview {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.welcome__fkids-wrap[open] > summary .welcome__fkids-preview { display: none; }

.welcome__fkids-wrap > .welcome__fkids { margin-left: 0; margin-top: 2px; }

.welcome__fmt--l0 .welcome__fmt-body { background: #f7fbfb; }
.welcome__fmt--l0.is-on .welcome__fmt-body,
.welcome__fmt--l0 .welcome__fmt-box:checked + .welcome__fmt-body { background: var(--color-wash); }

.welcome__fmt--l2 .welcome__fmt-body { min-height: 0; padding: 7px 12px 7px 10px; }
.welcome__fmt--l2 .welcome__fmt-art { width: 28px; height: 28px; border-radius: 7px; }
.welcome__fmt--l2 .welcome__fmt-icon { width: 16px; height: 16px; }
.welcome__fmt--l2 .welcome__fmt-name { font-size: 13px; }
.welcome__fmt--l2 .welcome__fmt-tag { font-size: 12px; }
.welcome__fmt--l2 .welcome__fmt-info { top: 7px; }

/* Narrow screens: the count drops under the name, the rails get thinner */
@media (max-width: 520px) {
  .welcome__fmt-body {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "art text" "art meta";
    row-gap: 4px;
  }
  .welcome__fmt-meta { justify-self: end; }
  .welcome__fmt-art { align-self: start; }
  .welcome__fmt--haskids .welcome__fmt-body { padding-bottom: 34px; } /* the Expand link keeps its band under the count */
  .welcome__fkids-wrap { margin-left: 8px; }
  .welcome__fkids { margin-left: 8px; padding-left: 8px; }
  .welcome__fkids--2 { margin-left: 6px; }
}

/* Sticky Back / Skip / Next bar (Kalman 2026-09-10) */
.welcome__nav--sticky {
  position: sticky;
  bottom: 0;
  z-index: 20;
  margin-top: 4px;
  padding: 12px 0 max(12px, env(safe-area-inset-bottom));
  background: var(--color-white);
  border-top: 1px solid var(--color-grey-90);
  box-shadow: 0 -10px 24px rgba(6, 39, 51, 0.06);
}

.welcome__nav-skip {
  flex: 0 0 auto;
  padding: 0 4px;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--color-grey-40);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.welcome__nav-skip:hover,
.welcome__nav-skip:focus-visible { color: var(--color-teal); outline: none; }

/* Sub-topics under the picked specialties (welcome panel) */
.welcome__subs {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--color-grey-90);
  border-radius: 10px;
  background: var(--color-white);
  text-align: left;
}

.welcome__sub-head {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-grey-40);
}

.welcome__sub-head b {
  color: var(--color-navy-ink);
}

.welcome__sub-count {
  color: var(--color-teal-deep);
  font-variant-numeric: tabular-nums;
}


/* Providers step (vivce#1626): the plugin's rows in the welcome panel's register. */
.welcome__providers { display: grid; gap: 10px; }
.welcome__pscope { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: -4px 0 0; font-size: 13px; line-height: 1.5; color: var(--color-grey-40); }
.welcome__pscope[hidden] { display: none; }
.welcome__pscope-label { font-weight: 600; color: var(--color-navy-ink); }
.welcome__pchange { margin-left: auto; font-weight: 600; color: var(--color-teal-deep); text-decoration: underline; text-underline-offset: 3px; }
.welcome__plocal { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--color-grey-80); }
.welcome__plocal[hidden] { display: none; }
.welcome__plocal-label { margin: -4px 0 0; font-size: 13px; line-height: 1.5; font-weight: 600; color: var(--color-navy-ink); }
.welcome__prows { margin: 0; padding: 0; list-style: none; }
.welcome__providers .vivpd-row.welcome__prow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 2px; border-bottom: 1px solid var(--color-grey-90); }
.welcome__providers .vivpd-row.welcome__prow:last-child { border-bottom: 0; }
.welcome__plogo { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--color-grey-90); border-radius: 8px; background: var(--color-white); font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: -0.02em; color: var(--color-navy-deep); overflow: hidden; }
.welcome__plogo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.welcome__providers .vivpd-title .subtitle { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.25; color: var(--color-navy-ink); }
.welcome__providers .vivpd-meta { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--color-grey-40); }
.welcome__providers .vivpd-meta b { color: var(--color-teal-deep); font-weight: 600; }
.welcome__pwhy { display: inline-block; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--color-teal-deep); text-decoration: underline; text-underline-offset: 3px; }
.welcome__pwhy[hidden] { display: none; }
/* #1697: "i" after "Want to say why?" — reuses the Formats tooltip (data-fmt-info JS + .welcome__fmt-tip hover/focus rules), re-anchored to the row's text column and hidden with the link. */
.welcome__providers .vivpd-info { position: relative; }
.welcome__pwhy-info.welcome__fmt-info { position: static; display: inline-grid; place-items: center; width: 16px; height: 16px; margin: 4px 0 0 6px; vertical-align: text-bottom; font-size: 10px; }
.welcome__pwhy-tip.welcome__fmt-tip { right: auto; left: 0; top: calc(100% + 6px); width: min(300px, 100%); }
.welcome__pwhy-tip.welcome__fmt-tip::before { right: auto; left: 14px; }
.vivpd-why[hidden] + .welcome__pwhy-info, .vivpd-why[hidden] ~ .welcome__pwhy-tip { display: none; }
.welcome__providers .vivpd-thumbs { display: flex; gap: 6px; }
.welcome__providers .vivpd-th { display: grid; place-items: center; width: 38px; height: 34px; padding: 0; border: 1px solid var(--color-grey-80); border-radius: 8px; background: var(--color-white); color: var(--color-grey-40); cursor: pointer; }
.welcome__providers .vivpd-th:hover { border-color: var(--color-teal); color: var(--color-teal); }
.welcome__providers .vivpd-th:focus-visible { outline: 3px solid rgba(13, 115, 119, 0.3); outline-offset: 2px; }
.welcome__providers .vivpd-up.sel { background: var(--color-teal); border-color: var(--color-teal); color: var(--color-white); }
.welcome__providers .vivpd-down.sel { background: #B24A22; border-color: #B24A22; color: var(--color-white); }
.welcome__providers .vivpd-th.sel span { filter: none; }
.welcome__pfoot { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.welcome__pmore { padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--color-teal-deep); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.welcome__pmore[hidden] { display: none; }
.welcome__pbrowse { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--color-teal-deep); text-decoration: underline; text-underline-offset: 3px; }
.welcome__providers-loading, .welcome__providers-empty { margin: 4px 0; }

/* #1691: the Providers list loads while the member is still on the earlier steps; when it is not ready yet, say so. */
.welcome__providers-loading { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.welcome__spinner { flex: 0 0 auto; width: 18px; height: 18px; border: 2px solid var(--color-wash-line); border-top-color: var(--color-teal); border-radius: 50%; animation: welcome-spin 0.8s linear infinite; }
@keyframes welcome-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .welcome__spinner { animation: none; border-top-color: var(--color-teal-deep); } }

/* #1693: the picked formats a provider has, as small chips under the counts. */
.welcome__pfmts { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0; }
.welcome__pfmt { display: inline-block; padding: 1px 8px; border: 1px solid var(--color-wash-line); border-radius: var(--radius-pill); background: var(--color-wash); font-size: 11.5px; font-weight: 500; line-height: 1.5; color: var(--color-teal-deep); }
.welcome__pfmt--more { background: var(--color-white); border-color: var(--color-grey-90); color: var(--color-grey-40); }

/* #2015: the /providers/ directory's Providers | Faculty switch and filter panel inside the step.
   The plugin's pd.css draws both (.vivpd-entity-tabs, .vivpd-filters …); its colour tokens live on
   the directory page, so the step defines the same ones. The panel is collapsed behind "Filters". */
.welcome__providers {
  --vivpd-ink: #18323a;
  --vivpd-muted: #64777d;
  --vivpd-line: #dce7e7;
  --vivpd-teal: var(--color-teal, #03afb1);
  --vivpd-deep: var(--color-teal-deep, #0d7377);
}
.welcome__providers .welcome__ptabs { max-width: none; margin: 0 0 4px; gap: 6px; padding: 5px; border-radius: 14px; }
.welcome__providers .welcome__ptabs .vivpd-entity-tab { min-height: 58px; padding: 9px 12px; gap: 10px; border-radius: 10px; font: inherit; text-align: left; background: transparent; cursor: pointer; }
.welcome__providers .welcome__ptabs .vivpd-entity-tab.is-active { background: var(--color-white); }
.welcome__providers .welcome__ptabs .vivpd-entity-tab:focus-visible { outline: 3px solid rgba(13, 115, 119, 0.3); outline-offset: 1px; }
.welcome__providers .welcome__ptabs .vivpd-entity-tab__icon { flex-basis: 34px; width: 34px; height: 34px; font-size: 17px; border-radius: 9px; }
.welcome__ppane { display: grid; gap: 10px; }
.welcome__ppane[hidden] { display: none; }
.welcome__psearch--tools { display: flex; gap: 8px; align-items: stretch; }
.welcome__psearch--tools .welcome__psearch-input { flex: 1; min-width: 0; }
.welcome__pfilter-btn { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; min-height: 44px; padding: 0 14px; border: 1px solid var(--color-grey-80); border-radius: 8px; background: var(--color-white); font: inherit; font-size: 14px; font-weight: 600; color: var(--color-navy-ink); cursor: pointer; }
.welcome__pfilter-btn:hover { border-color: var(--color-teal); color: var(--color-teal-deep); }
.welcome__pfilter-btn:focus-visible { outline: 3px solid rgba(13, 115, 119, 0.3); outline-offset: 2px; }
.welcome__pfilter-btn[aria-expanded="true"], .welcome__pfilter-btn.is-on { border-color: var(--color-teal); background: #e2f5f4; color: var(--color-teal-deep); }
.welcome__pfilter-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill, 999px); background: var(--color-teal-deep); color: var(--color-white); font-size: 11.5px; font-weight: 700; line-height: 1; }
.welcome__pfilter-n[hidden] { display: none; }
.welcome__providers .vivpd-filters.welcome__pfilters { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; padding: 14px 16px 16px; box-shadow: none; }
.welcome__pfilters[hidden], .welcome__pfilters [hidden] { display: none !important; }
.welcome__pfilters .vivpd-filters__head, .welcome__pfilters .vivpd-priority, .welcome__pfilters .vivpd-filter-types, .welcome__pfilters .welcome__pfilter-opts { grid-column: 1 / -1; }
.welcome__pfilters .vivpd-filter-group { align-content: start; padding: 12px 0; border-bottom: 0; border-top: 1px solid #edf2f2; }
.welcome__pfilters .vivpd-filter-types { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 22px; }
.welcome__pfilters .welcome__pfilter-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; }
.welcome__providers .welcome__ptabs .vivpd-entity-tab b { line-height: 1.25; }
.welcome__providers .welcome__ptabs .vivpd-entity-tab small { line-height: 1.3; }
.welcome__pfilters-title { margin: 0; font-size: 14px; font-weight: 700; color: var(--vivpd-ink); }
.welcome__pfilters .vivpd-filter-types .vivpd-chip { font: inherit; font-size: 12.5px; }
.welcome__pfilters .vivpd-priority { margin-top: 4px; padding-top: 12px; border-top: 1px solid #edf2f2; }
.welcome__providers .vivpd-badge-comm { font-size: 10.5px; }

/* Faculty rows: the provider row's look; round photo, credential after the name. */
.welcome__providers .welcome__frow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 2px; border-bottom: 1px solid var(--color-grey-90); }
.welcome__providers .welcome__frow:last-child { border-bottom: 0; }
.welcome__providers .welcome__frow[hidden] { display: none; }
.welcome__flogo { border-radius: 50%; background: var(--gradient-navy, linear-gradient(108deg, #0B3F4E, #10566A)); border-color: transparent; color: var(--color-white); }
.welcome__flogo.welcome__plogo--img { background: var(--color-white); }
.welcome__flogo img { object-fit: cover; padding: 0; }
.welcome__fcred { font-size: 11px; font-weight: 700; color: var(--color-teal-deep); }
.welcome__providers .vivpd-faculty-up.sel { background: var(--color-teal); border-color: var(--color-teal); color: var(--color-white); }
.welcome__providers .vivpd-faculty-down.sel { background: #B24A22; border-color: #B24A22; color: var(--color-white); }

@media (max-width: 560px) {
  .welcome__providers .welcome__ptabs .vivpd-entity-tab small { display: none; }
  .welcome__providers .welcome__ptabs .vivpd-entity-tab { min-height: 48px; }
  .welcome__providers .vivpd-filters.welcome__pfilters { grid-template-columns: 1fr; }
  .welcome__pfilters .welcome__pfilter-opts, .welcome__pfilters .vivpd-filter-types { grid-template-columns: 1fr; }
  .welcome__pfilter-btn { padding: 0 12px; }
}

/* #1789: the welcome step inside the profile pop-up (iframe, body.welcome-embed) — no band, no logo,
   no legal links; the card is the frame. */
body.welcome-embed main::before,
body.welcome-embed .auth-brand,
body.welcome-embed .auth-legal,
body.welcome-embed .welcome__signout { display: none; }
body.welcome-embed { display: block; min-height: 0; background: var(--color-white); }
body.welcome-embed main { display: block; flex: none; padding: 0; min-height: 0; background: var(--color-white); }
body.welcome-embed .auth-band__container { padding: 0; }
body.welcome-embed .auth-container { gap: 0; padding: 0; max-width: none; }
body.welcome-embed .auth-content { box-shadow: none; border-radius: 0; padding: 28px 28px 0; }
body.welcome-embed .welcome__nav-cancel { flex: 0 0 auto; order: -1; min-width: 96px; }

/* #1701: the closing screen. */
.welcome__done { display: grid; gap: 10px; }
.welcome__done-title { margin: 0; }
.welcome__done-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--color-grey-40); }
.welcome__done-links { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 0; font-size: 14px; color: var(--color-grey-60); }
.welcome__done-link { padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--color-teal-deep); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.welcome__done-link:hover, .welcome__done-link:focus-visible { color: var(--color-teal); outline: none; }

/* ------------------------------------------------------------------
 * #1713 — Explore-shaped specialty tree picker
 * (template-parts/global/specialty-tree.php + js/libs.js initSpecialtyTree)
 * ------------------------------------------------------------------ */
.spt { gap: 10px; }
.spt [hidden] { display: none !important; }

.spt__search { position: relative; }

.spt__search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 42px 11px 16px;
  border: 1px solid var(--color-grey-80);
  border-radius: 999px;
  background: var(--color-white);
  font: inherit;
  font-size: 14px;
  color: var(--color-navy-ink);
  -webkit-appearance: none;
  appearance: none;
}

.spt__search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.spt__search-input:focus {
  outline: none;
  border-color: var(--color-teal);
  box-shadow: 0 0 0 3px var(--color-pale);
}

.spt__search-icon {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  pointer-events: none;
}

.spt__search-icon svg { width: 18px; height: 18px; fill: var(--color-grey-50); }

.spt__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--color-grey-50);
}

.spt__clear {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-teal-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.spt__clear:hover, .spt__clear:focus-visible { color: var(--color-teal); outline: none; }

.spt__tree {
  min-height: 240px;
  max-height: 56vh;
  overflow: auto;
  border: 1px solid var(--color-wash-line);
  border-radius: 12px;
  background: var(--color-white);
}

.spt__cat + .spt__cat { border-top: 1px solid var(--color-wash-line); }

.spt__cat > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  list-style: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-navy-ink);
}

.spt__cat > summary::-webkit-details-marker { display: none; }

.spt__cat > summary::before {
  content: '▸';
  flex: 0 0 auto;
  width: 14px;
  color: var(--color-teal);
}

.spt__cat[open] > summary::before { content: '▾'; }
.spt__cat > summary:hover { background: var(--color-wash); }
.spt__cat[open] > summary { background: #f7fbfb; }
.spt__cat > summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-pale); }

.spt__n {
  margin-left: auto;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-grey-40);
  white-space: nowrap;
}

.spt__picked {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--color-teal);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.spt__body {
  display: grid;
  gap: 2px;
  padding: 4px 12px 12px 34px;
}

.spt__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--color-navy-ink);
  cursor: pointer;
}

.spt__row:hover { background: var(--color-wash); }
.spt__row.is-on { background: var(--color-pale); }
.spt__row.is-covered { color: var(--color-grey-50); }
.spt__row.is-covered .spt__box { opacity: .5; }
.spt__row--cat { font-weight: 600; }

.spt__label {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  cursor: pointer;
}

.spt__label .spt__name { flex: 1 1 auto; min-width: 0; }

.spt__box {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-teal);
  cursor: pointer;
}

.spt__name mark {
  padding: 0 1px;
  border-radius: 2px;
  background: #fff1a8;
  color: inherit;
}

.spt__toggle {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-teal);
  white-space: nowrap;
  cursor: pointer;
}

.spt__toggle:hover, .spt__toggle:focus-visible {
  color: var(--color-teal-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: none;
}

.spt__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 8px 38px;
  padding-left: 12px;
  border-left: 2px solid var(--color-wash-line);
}

.spt__topic.is-covered { border-style: dashed; color: var(--color-grey-50); }

.spt__empty {
  margin: 0;
  padding: 28px 16px;
  text-align: center;
  font-size: 14px;
  color: var(--color-grey-50);
}

@media (max-width: 520px) {
  .spt__cat > summary { padding: 11px 12px; font-size: 14px; }
  .spt__body { padding: 4px 8px 10px 14px; }
  .spt__row { padding: 7px 8px; font-size: 13px; }
  .spt__topics { margin-left: 14px; padding-left: 8px; }
  .spt__tree { max-height: 62vh; }
}
.welcome__done-status { font-size: 13px; color: var(--color-teal-deep); }

/* #1807: the provider search box on the Providers step. */
.welcome__psearch { margin: 2px 0 0; }
.welcome__psearch-input { width: 100%; min-height: 44px; padding: 0 14px 0 40px; border: 1px solid var(--color-grey-80); border-radius: 8px; background: var(--color-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235E626E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>") no-repeat 13px center; font: inherit; font-size: 14px; color: var(--color-navy-ink); }
.welcome__psearch-input:focus { border-color: var(--color-teal); outline: none; box-shadow: 0 0 0 3px rgba(13, 115, 119, 0.2); }
.welcome__psearch-input::placeholder { color: var(--color-grey-50); }

.screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* #1850 — Faculty block in the About panel. Cards echo .rc-card (white plate, grey-90
   line, radius-lg); the avatar is an initials tile on the pale wash, never a stock photo.
   #1858: claiming is explained once by the heading ⓘ; cards carry no claim line. */
.activity-faculty {
  margin: 28px 0 8px;
}

.activity-faculty__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin-bottom: 14px;
}

.activity-faculty__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  color: var(--color-navy-ink);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.activity-faculty__count {
  color: var(--color-grey-50);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
}

.activity-faculty__info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-grey-50);
  cursor: help;
  align-self: center;
}

.activity-faculty__info svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.activity-faculty__info:hover,
.activity-faculty__info:focus-visible {
  color: var(--color-teal-deep);
}

.activity-faculty__tip p {
  margin: 0;
}

.activity-faculty__tip p + p {
  margin-top: 6px;
}

.activity-faculty__tip a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.activity-faculty__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-teal);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.activity-faculty__more svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.activity-faculty__more:hover,
.activity-faculty__more:focus-visible {
  color: var(--color-teal-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.activity-faculty__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.activity-faculty__item {
  min-width: 0;
}

.fac-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  height: 100%;
  padding: 14px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-90);
  border-radius: var(--radius-lg);
}

.fac-card:hover,
.fac-card:focus-within {
  border-color: var(--color-wash-line);
  box-shadow: var(--shadow-card);
}

.fac-card__avatar {
  flex: 0 0 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-wash);
  color: var(--color-teal-deep);
  text-decoration: none;
}

.fac-card__avatar--photo {
  background: var(--color-pale);
}

.fac-card__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fac-card__initials {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

.fac-card__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-self: stretch;
}

.fac-card__name {
  margin: 0;
  color: var(--color-navy-ink);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

.fac-card__name a {
  color: inherit;
  text-decoration: none;
}

.fac-card__name a:hover,
.fac-card__name a:focus-visible {
  color: var(--color-teal-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fac-card__cred {
  color: var(--color-grey-50);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
}

.fac-card__role {
  margin: 0;
  color: var(--color-teal-deep);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.fac-card__line {
  margin: 0;
  color: var(--color-grey-50);
  font-size: 13.5px;
  line-height: 1.4;
}

.fac-card__line--affil {
  color: var(--color-navy-ink);
  font-weight: 500;
}

.fac-card__info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin: 0 0 -4px 3px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-grey-50);
  cursor: help;
  vertical-align: middle;
}

.fac-card__info svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.fac-card__info:hover,
.fac-card__info:focus-visible {
  color: var(--color-teal-deep);
}

.fac-card__dot {
  margin: 0 5px;
}

.fac-card__inst {
  color: inherit;
  text-decoration: none;
}

.fac-card__inst:hover,
.fac-card__inst:focus-visible {
  color: var(--color-teal-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fac-card__facts {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  color: var(--color-navy-ink);
  font-size: 13.5px;
  line-height: 1.4;
}

.fac-card__facts li + li {
  margin-top: 2px;
}

.fac-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin: auto 0 0;
  padding-top: 8px;
  font-size: 12.5px;
  line-height: 1.3;
}

.fac-card__courses {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-teal-deep);
  font-weight: 600;
  text-decoration: none;
}

.fac-card__courses svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.fac-card__courses:hover,
.fac-card__courses:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fac-card__claimed {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #0B7A3E;
  font-weight: 600;
}

.fac-card__claimed svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.activity-faculty__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 14px;
}

.activity-faculty__toggle {
  min-height: 40px;
  padding: 8px 18px;
  font-size: 14px;
}

@media (max-width: 767px) {
  .activity-faculty__grid {
    grid-template-columns: minmax(0, 1fr);
  }

}

/* #1934 opening an activity from a card: top progress bar + the clicked card dims (js/nav-progress.js) */
.vivce-nav-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 9400; /* above the header (200) and modals (300), under the consent bar (9500) */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.vivce-nav-progress.is-on {
  opacity: 1;
}

/* Light aqua so it reads on the navy header as well as on white pages. */
.vivce-nav-progress__bar {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #2BB3B1 0%, #8FE8E5 100%);
  box-shadow: 0 0 10px rgba(143, 232, 229, 0.9);
  border-radius: 0 2px 2px 0;
}

/* Races to two thirds, then crawls; the arriving page is what "finishes" it. */
.vivce-nav-progress.is-on .vivce-nav-progress__bar {
  animation: vivce-nav-progress 8s cubic-bezier(0.1, 0.8, 0.2, 1) forwards;
}

@keyframes vivce-nav-progress {
  0% { width: 0; }
  12% { width: 40%; }
  35% { width: 66%; }
  70% { width: 84%; }
  100% { width: 95%; }
}

html.is-navigating,
html.is-navigating a {
  cursor: progress;
}

.wpgb-card.is-opening .wpgb-card-wrapper,
.collection-single-activity.is-opening,
[data-nav-card].is-opening {
  position: relative;
}

.wpgb-card.is-opening .wpgb-card-wrapper > *,
.rc-card.is-opening > *,
.collection-single-activity.is-opening > *,
[data-nav-card].is-opening > * {
  opacity: 0.45;
  transition: opacity 0.2s ease;
}

/* "Opening…" pill centred on the card: ::before is the pill, ::after the spinner in its left end. */
.wpgb-card.is-opening .wpgb-card-wrapper::before,
.rc-card.is-opening::before,
.collection-single-activity.is-opening::before,
[data-nav-card].is-opening::before {
  content: 'Opening\2026';
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  box-sizing: border-box;
  width: 156px;
  padding: 10px 16px 10px 46px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: var(--color-white);
  box-shadow: 0 8px 24px rgba(11, 63, 78, 0.22), 0 0 0 1px rgba(11, 63, 78, 0.06);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  color: var(--color-navy-ink);
  white-space: nowrap;
}

.wpgb-card.is-opening .wpgb-card-wrapper::after,
.rc-card.is-opening::after,
.collection-single-activity.is-opening::after,
[data-nav-card].is-opening::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(50% - 78px + 16px);
  z-index: 3;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border: 3px solid var(--color-pale);
  border-top-color: var(--color-teal);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.rc-card.is-opening {
  position: relative;
}

@media (prefers-reduced-motion: reduce) {
  .vivce-nav-progress { transition: none; }
  .vivce-nav-progress.is-on .vivce-nav-progress__bar { animation-duration: 12s; }
  .wpgb-card.is-opening .wpgb-card-wrapper::after,
  .rc-card.is-opening::after,
  .collection-single-activity.is-opening::after,
  [data-nav-card].is-opening::after { animation-duration: 2s; }
}

/* Provider page "Known Faculty" tab: the faculty block inside a content plate. */
.provider-faculty .activity-faculty {
  margin: 0;
}

.activity-faculty__note {
  max-width: 68ch;
  margin: -6px 0 16px;
  color: var(--color-black-20);
  font-size: 14px;
  line-height: 1.5;
}

/* 6u: why an activity in a user's list (bookmarks, completed, collection) left the catalog — expired /
   registration closed / no longer available. Sized like the card's small action button, muted.
   The .wpgb-card selector is needed: the grid's card styles otherwise win on specificity. */
.viv-status-label,
.wp-grid-builder .wpgb-card .viv-status-label {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: var(--radius-btn);
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 16px;
  color: var(--color-grey-50);
  background-color: var(--color-grey-95, #F3F3F5);
  white-space: nowrap;
}

.viv-status-label.viv-status-label--sm,
.wp-grid-builder .wpgb-card .viv-status-label.viv-status-label--sm {
  padding: 2px 6px;
  font-size: 12px;
  line-height: 16px;
}

.wp-grid-builder .wpgb-card .comleted-activity__title-link {
  color: inherit;
  text-decoration: none;
}

.wp-grid-builder .wpgb-card .comleted-activity__title-link:hover,
.wp-grid-builder .wpgb-card .comleted-activity__title-link:focus-visible {
  text-decoration: underline;
}

/* 6v: notice on the page of a course hidden from the catalog (expired, closed, …); sits on the dark hero */
.activity-hero__status-notice {
  margin: 12px 0 0;
  padding: 8px 12px;
  max-width: 60ch;
  border-left: 3px solid var(--color-orange);
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
  font-size: 14px;
  line-height: 20px;
}