.catalog-v4-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 20px;
}

.catalog-v4-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  color: var(--text-primary, var(--text, #252a2c));
  background: var(--bg-surface, var(--surface, #fff));
  border: 1px solid var(--border-light, var(--border, #dfe4e3));
  border-radius: 8px;
}

.catalog-v4-card__content {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  padding: 18px 18px 0;
}

.catalog-v4-card__main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.catalog-v4-card__main:disabled {
  cursor: default;
}

.catalog-v4-card__top {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding-right: 98px;
}

.catalog-v4-card__icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary, var(--text2, #505a5e));
  background: var(--surface-muted, var(--surface2, #f1f3f3));
  border-radius: 8px;
}

.catalog-v4-card__kind {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  color: var(--text-secondary, var(--text2, #505a5e));
  font-size: 14px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-v4-card__chip,
.catalog-v4-card__tag {
  display: inline-block;
  min-width: 0;
  max-width: 15ch;
  flex: 0 1 auto;
  align-items: center;
  overflow: hidden;
  padding: 0 8px;
  color: var(--text-secondary, var(--text2, #505a5e));
  font-size: 13px;
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid var(--border-light, var(--border, #dfe4e3));
  border-radius: 999px;
}

/* V4: the category chip next to the type label is a quiet grey fill; product and format tags stay outlined. */
.catalog-v4-card__chip {
  background: var(--sidebarItem, #f1f3f3);
  border-color: transparent;
}

.catalog-v4-card__title {
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-primary, var(--text, #252a2c));
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.catalog-v4-card__description {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-secondary, var(--text2, #505a5e));
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.catalog-v4-card__title.is-expanded,
.catalog-v4-card__description.is-expanded {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}

/* Show more / Show less on cards without a details view. */
.catalog-v4-card__more {
  align-self: flex-start;
  min-height: 24px;
  margin: -4px 0 4px;
  padding: 0;
  color: var(--link, var(--brand-primary, #245647));
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.catalog-v4-card__more:hover {
  text-decoration: underline;
}
.catalog-v4-card__more:focus-visible {
  outline: 3px solid var(--brand-primary, #315d4a);
  outline-offset: 2px;
}

.catalog-v4-card__tags {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}

.catalog-v4-card__tag {
  flex: 0 0 auto;
  height: 24px;
  box-sizing: border-box;
}

.catalog-v4-card__tag--more {
  max-width: none;
}

/* A skill's bottom row: owner on the left, format and downloads on the right. The right side keeps its place without an
   owner, and the owner's name gives way (ellipsis) before it. */
.catalog-v4-card__bottom--meta {
  flex-wrap: nowrap;
}

.catalog-v4-card__bottom--meta .catalog-v4-card__owner {
  flex: 1 1 0;
}

.catalog-v4-card__bottom--meta .catalog-v4-card__owner-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-v4-card__bottom-end {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.catalog-v4-card__format {
  box-sizing: border-box;
  height: 22px;
  padding: 0 7px;
  color: var(--text-secondary, var(--text2, #505a5e));
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  border: 1px solid var(--border-light, #dfe4e3);
  border-radius: 4px;
}

.catalog-v4-card__bottom {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding: 4px 0 10px;
}

.catalog-v4-card__owner {
  display: flex;
  min-width: 0;
  flex: 1 1 140px;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary, var(--text2, #505a5e));
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
}

.catalog-v4-card__owner:hover {
  color: var(--link, var(--brand-primary, #245647));
  text-decoration: underline;
}

.catalog-v4-card__avatar {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--text-primary, var(--text, #252a2c));
  background: var(--border-light, var(--border, #dfe4e3));
  border-radius: 50%;
  font-size: 10px;
  font-weight: 600;
}

.catalog-v4-card__owner-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.catalog-v4-card__downloads {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary, var(--text2, #505a5e));
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  line-height: 20px;
  white-space: nowrap;
}

.catalog-v4-card__downloads-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-v4-card__favorite-group {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding-left: 4px;
  background: var(--bg-surface, var(--surface, #fff));
  border-radius: 8px;
}

.catalog-v4-card__saved-count {
  max-width: 6ch;
  overflow: hidden;
  padding-left: 4px;
  color: var(--text-secondary, var(--text2, #505a5e));
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-v4-card__favorite {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--text-secondary, var(--text2, #505a5e));
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.catalog-v4-card__favorite[aria-pressed="true"] {
  color: var(--link, var(--brand-primary, #245647));
}

.catalog-v4-card__favorite:disabled {
  cursor: default;
}

.catalog-v4-card__footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 14px 14px 18px;
}

.catalog-v4-card__details {
  display: inline-flex;
  min-height: 40px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  color: var(--link, var(--brand-primary, #245647));
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.catalog-v4-card__action {
  display: inline-flex;
  min-width: 0;
  min-height: 40px;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  box-sizing: border-box;
  color: var(--text-on-primary, #fff);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  background: var(--brand-primary, #315d4a);
  border: 2px solid var(--brand-primary, #315d4a);
  border-radius: 8px;
  cursor: pointer;
}

/* Link actions (Open app, Learn more, Find in Copilot) are <a> elements: keep the white label on hover and
   focus, where the global a:hover colour would otherwise paint it the same green as the button. */
/* Every card action carries a Lucide icon (V4 card fixes, 28 Sept). It is a mask in the button's text
   colour, so it follows hover, disabled and dark mode, and survives pages relabelling the button. */
.catalog-v4-card__action[data-card-action-icon] {
  gap: 8px;
}
.catalog-v4-card__action[data-card-action-icon]::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background-color: currentColor;
  -webkit-mask: var(--catalog-action-icon) center / 18px 18px no-repeat;
  mask: var(--catalog-action-icon) center / 18px 18px no-repeat;
}
.catalog-v4-card__action[data-card-action-icon="external"] { --catalog-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E"); }
.catalog-v4-card__action[data-card-action-icon="download"] { --catalog-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' x2='12' y1='15' y2='3'/%3E%3C/svg%3E"); }
.catalog-v4-card__action[data-card-action-icon="copy"] { --catalog-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E"); }
.catalog-v4-card__action[data-card-action-icon="arrow"] { --catalog-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E"); }

.catalog-v4-card__action.catalog-v4-card__action--secondary {
  color: var(--text-primary, var(--text, #212224));
  background: var(--bg-surface, var(--surface, #fff));
  border-color: var(--border-medium, #c9cfd1);
}
.catalog-v4-card__action.catalog-v4-card__action--secondary:hover:not(:disabled):not(.is-disabled),
.catalog-v4-card__action.catalog-v4-card__action--secondary:focus-visible {
  color: var(--text-primary, var(--text, #212224));
  background: var(--bg-surface, var(--surface, #fff));
  border-color: var(--brand-primary, #315d4a);
}

.catalog-v4-card__action:hover:not(:disabled):not(.is-disabled),
.catalog-v4-card__action:focus-visible {
  color: var(--text-on-primary, #fff);
}
.catalog-v4-card__action:hover:not(:disabled):not(.is-disabled) {
  background: var(--brand-primary-hover, var(--brand-primary, #315d4a));
}

.catalog-v4-card__action:disabled,
.catalog-v4-card__action.is-disabled {
  color: var(--text-secondary, var(--text2, #505a5e));
  background: var(--surface-muted, var(--surface2, #f1f3f3));
  border-color: var(--border-medium, var(--border2, #cbd1cf));
  cursor: not-allowed;
}

.catalog-v4-card__unavailable {
  display: block;
  margin: 0;
  padding: 16px 56px 16px 0;
  color: var(--text-secondary, var(--text2, #505a5e));
  font-size: 15px;
  line-height: 22px;
}

.catalog-v4-card__status {
  margin: 0;
  padding: 0 18px 8px;
  color: var(--text-secondary, var(--text2, #505a5e));
  font-size: 13px;
  line-height: 18px;
}

.catalog-v4-card button:focus-visible,
.catalog-v4-card a:focus-visible,
.catalog-v4-card [role="link"]:focus-visible {
  outline: 3px solid var(--link, var(--brand-primary, #245647));
  outline-offset: 3px;
}

.catalog-v4-card__main:hover .catalog-v4-card__title,
.catalog-v4-card__details:hover {
  text-decoration: underline;
}

.catalog-v4-card__main[aria-disabled="true"] {
  cursor: default;
}

/* An item without a details view (details: false): the card text is not a control. */
.catalog-v4-card__main:not([href]):not([role]) {
  cursor: default;
}
.catalog-v4-card__main:not([href]):not([role]):hover .catalog-v4-card__title {
  text-decoration: none;
}

@media (max-width: 900px) {
  .catalog-v4-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(272px, 100%), 1fr));
  }

  .catalog-v4-card__favorite,
  .catalog-v4-card__details,
  .catalog-v4-card__action {
    min-height: 44px;
  }

  .catalog-v4-card__favorite {
    width: 44px;
  }
}

.catalog-v4-card__cover {
  position: relative;
  display: flex;
  aspect-ratio: 16 / 9;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 16px;
  color: var(--text-primary, var(--text, #212224));
  background: var(--surface-muted, var(--surface2, #f1f3f3));
  border-radius: 7px 7px 0 0;
}
.catalog-v4-card--cover .catalog-v4-card__content { padding-top: 0; }
.catalog-v4-card--cover .catalog-v4-card__cover { margin: 0 -18px; }
.catalog-v4-card__cover-icon { display: inline-flex; width: 40px; height: 40px; align-items: center; }
.catalog-v4-card__cover-icon svg { width: 28px; height: 28px; }
.catalog-v4-card__cover-caption { position: relative; z-index: 1; padding-right: 12px; }
.catalog-v4-card__cover-label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 500; }
.catalog-v4-card__cover .catalog-v4-card__title { margin: 0; }
.catalog-v4-card__cover-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.catalog-v4-card__cover.has-thumbnail { color: #fff; }
.catalog-v4-card__cover.has-thumbnail::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent, rgb(0 0 0 / 92%)); }
.catalog-v4-card__cover.has-thumbnail .catalog-v4-card__cover-icon { visibility: hidden; }
.catalog-v4-card__cover-play { position: absolute; top: 20%; left: calc(50% - 20px); z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; background: rgb(0 0 0 / 70%); }
.catalog-v4-card__cover-play[hidden] { display: none; }
.catalog-v4-card--cover .catalog-v4-card__favorite-group { padding: 3px; border-radius: 24px; background: var(--bg-surface, var(--surface, #fff)); }

html[data-shell="refined"] body:not(.admin-page) .catalog-v4-card.prompt-card,
html[data-shell="refined"] body:not(.admin-page) .catalog-v4-card.agent-hotel-card {
  padding: 0;
  gap: 0;
}

.catalog-v4-card > .usecase-v4-details:not([open]) > summary { display: none; }

/* Legacy Agent cards use a stretched-link pseudo-element across the card.
   Shared cards have independent details and favorite controls, so disable the
   overlay only on the refined shared-card surface. */
html[data-shell="refined"] body:not(.admin-page) .catalog-v4-card.agent-hotel-card .agent-hotel-card__launch[href]::after {
  content: none;
  pointer-events: none;
}
html[data-shell="refined"] body:not(.admin-page) .catalog-v4-card.agent-hotel-card .agent-hotel-card__launch[href]:hover {
  color: var(--text-on-primary, #fff);
}

/* The favorite control is positioned over the card's upper-right corner.
   Icon, kind label and category share one row (V4 card fixes, 28 Sept); the category
   shrinks with an ellipsis and the row keeps clear of the heart and its count. */
html[data-shell="refined"] body:not(.admin-page) .catalog-v4-card .catalog-v4-card__top {
  display: grid;
  grid-template-columns: 40px auto minmax(0, 1fr);
  grid-template-rows: 40px;
  column-gap: 8px;
  padding-right: 84px;
}
html[data-shell="refined"] body:not(.admin-page) .catalog-v4-card .catalog-v4-card__top > .catalog-v4-card__icon {
  grid-column: 1;
  grid-row: 1;
}
html[data-shell="refined"] body:not(.admin-page) .catalog-v4-card .catalog-v4-card__top > .catalog-v4-card__kind {
  grid-column: 2;
  grid-row: 1;
}
html[data-shell="refined"] body:not(.admin-page) .catalog-v4-card .catalog-v4-card__top > .catalog-v4-card__chip {
  grid-column: 3;
  grid-row: 1;
  justify-self: start;
  min-width: 0;
  max-width: 100%;
}

/* Agent sections injected at card level share the card gutter and sit above the footer. */
.catalog-v4-card > :is(.agent-hotel-card__governance, .agent-access-card) {
  margin: 12px 18px 0;
}
/* V4: an agent's related prompts open under the card from View details (like app product details). */
.catalog-v4-card > .agent-hotel-card__details { padding: 0 18px 16px; }
/* Closed, the details stay out of sight on every agent card, also the legacy card when CplCatalogCard is missing:
   the footer's View details opens them. */
.agent-hotel-card > .agent-hotel-card__details:not([open]) { display: none; }
.agent-hotel-card > .agent-hotel-card__details > summary { cursor: pointer; color: var(--link, var(--brand-primary)); }
/* The legacy card stretches its launch link over the card (z-index 1, catalog-surfaces.css): View details and the open
   details (summary and prompt links) sit above it, like the info button, so the mouse reaches them. */
.agent-hotel-card:not(.catalog-v4-card) .agent-hotel-card__footer [data-card-details],
.agent-hotel-card:not(.catalog-v4-card) > .agent-hotel-card__details { position: relative; z-index: 2; }
/* License note on license-managed Microsoft agents (and Installed for everyone on the night list): the full text wraps
   instead of the 15ch tag ellipsis. */
.catalog-v4-card .agent-hotel-card__license,
.catalog-v4-card .agent-hotel-card__installed {
  align-self: flex-start;
  max-width: 100%;
  margin: 10px 0 12px;
  padding: 2px 10px;
  color: var(--text-primary, var(--text, #212224));
  white-space: normal;
  background: var(--bg-input, #f7f8f8);
  border: 1px solid var(--border-medium, #c9cfd1);
  border-radius: 999px;
}

/* "Shared with you" (backend #225): an agent its creator shared with this person. A green-tinted pill in the place of
   the license note, so it reads apart from agents assigned to everyone. */
.catalog-v4-card .agent-hotel-card__shared {
  align-self: flex-start;
  max-width: 100%;
  margin: 10px 0 12px;
  padding: 2px 10px;
  color: var(--text-primary, var(--text, #212224));
  white-space: normal;
  background: var(--accentSoft, #e6f4ea);
  border-radius: 999px;
}

/* Shared agents whose access for this viewer is unknown: a quieter card, a status note and an
   outlined launch link, grouped after the agents the viewer is known to be able to use. */
html[data-shell="refined"] body:not(.admin-page) .catalog-v4-card.agent-hotel-card--access-unknown,
.catalog-v4-card.agent-hotel-card--access-unknown {
  background: var(--bg-page, #f7f7f7);
  border: 1px dashed var(--border-medium, #c9cfd1);
}
.catalog-v4-card.agent-hotel-card--access-unknown .catalog-v4-card__icon {
  opacity: 0.6;
}
.catalog-v4-card.agent-hotel-card--access-unknown .catalog-v4-card__favorite-group {
  background: transparent;
}
.catalog-v4-card .agent-hotel-card__access-unknown {
  align-self: flex-start;
  max-width: 100%;
  padding: 2px 10px;
  color: var(--text-primary, var(--text, #212224));
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  background: var(--bg-input, #f7f8f8);
  border: 1px solid var(--border-medium, #c9cfd1);
  border-radius: 999px;
}
/* The last-check note for unconfirmed access is longer and may wrap, so it is a rounded box, not a pill. */
.catalog-v4-card .agent-hotel-card__access-unknown[data-agent-access-unconfirmed] {
  padding: 4px 10px;
  font-weight: 500;
  border-radius: 8px;
}
html[data-shell="refined"] body:not(.admin-page) .catalog-v4-card.agent-hotel-card--access-unknown .agent-hotel-card__launch[href] {
  color: var(--link, var(--brand-primary, #315d4a));
  background: var(--bg-surface, var(--surface, #fff));
  border: 1px solid var(--brand-primary, #315d4a);
}
html[data-shell="refined"] body:not(.admin-page) .catalog-v4-card.agent-hotel-card--access-unknown .agent-hotel-card__launch[href]:hover {
  color: var(--text-on-primary, #fff);
  background: var(--brand-primary, #315d4a);
}

/* The agent footer draws a divider; keep the last line of the card off it when there is no owner row.
   The card content already grows to fill the card, so the footer still sits at the bottom. */
html[data-shell="refined"] .catalog-v4-card.agent-hotel-card > .catalog-v4-card__footer {
  margin-top: 12px;
}
/* The last access check (and the publisher on the night list) sits quietly under the card text. */
.catalog-v4-card .agent-hotel-card__checked,
.catalog-v4-card .agent-hotel-card__publisher {
  margin: 0;
  color: var(--text-secondary, var(--text2, #4d575d));
  font-size: 12px;
  line-height: 16px;
}
html[data-shell="refined"] body:not(.admin-page) .catalog-v4-card.agent-hotel-card .catalog-v4-card__action {
  text-align: center;
  white-space: nowrap;
}
.catalog-v4-card > .agent-hotel-card__governance {
  color: var(--text-secondary, var(--text2, #4d575d));
  font-size: 13px;
  line-height: 18px;
}

/* A "No longer available" favorite keeps its heart in the usual top-right spot
   and stays compact instead of stretching to the height of its row. */
.catalog-v4-card:has(.catalog-v4-card__unavailable) {
  align-self: start;
}
.catalog-v4-card:has(.catalog-v4-card__unavailable) > .catalog-v4-card__footer {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 0;
}
.catalog-v4-card:has(.catalog-v4-card__unavailable) > .catalog-v4-card__content {
  padding-bottom: 18px;
}

/* Shared V4 filter menu (filter-menu.js): button with a selected-count badge, checkbox panel with counts. */
.filter-bar {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
}
.filter-bar__menus {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.filter-menu {
  position: relative;
}
.filter-menu__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  color: var(--text-primary, var(--text, #212224));
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  background: var(--bg-surface, var(--surface, #fff));
  border: 1px solid var(--border-medium, #c9cfd1);
  border-radius: 8px;
  cursor: pointer;
}
.filter-menu__button:hover,
.filter-menu.is-open .filter-menu__button {
  border-color: var(--text-secondary, var(--text2, #4d575d));
}
.filter-menu__button:focus-visible {
  outline: 3px solid var(--brand-primary, #315d4a);
  outline-offset: 3px;
}
.filter-menu__button svg {
  flex: none;
  color: var(--text-secondary, var(--text2, #4d575d));
}
.filter-menu__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  box-sizing: border-box;
  color: var(--text-on-primary, #fff);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--brand-primary, #315d4a);
  border-radius: 100px;
}
.filter-menu__badge[hidden] {
  display: none;
}
.filter-menu__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: max-content;
  min-width: 240px;
  max-width: min(360px, calc(100vw - 32px));
  max-height: min(360px, 60vh);
  overflow-y: auto;
  padding: 8px;
  box-sizing: border-box;
  background: var(--bg-surface, var(--surface, #fff));
  border: 1px solid var(--border-light, var(--border, #e5e7e8));
  border-radius: 8px;
  box-shadow: 0 16px 40px rgb(33 34 36 / 10%);
}
.filter-menu__panel[hidden] {
  display: none;
}
.filter-menu__panel--end {
  right: 0;
  left: auto;
}
/* Two classes, so page rules for plain labels (e.g. the Agents controls) never restyle the options. */
.filter-menu .filter-menu__option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 8px;
  color: var(--text-primary, var(--text, #212224));
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  border-radius: 4px;
  cursor: pointer;
}
.filter-menu .filter-menu__option:hover {
  background: var(--surface-muted, var(--surface2, #f7f8f8));
}
.filter-menu__option input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--brand-primary, #315d4a);
}
.filter-menu__option-label {
  flex: 1 1 auto;
  min-width: 0;
}
.filter-menu__count {
  color: var(--text-secondary, var(--text2, #4d575d));
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.filter-bar .filter-bar__search {
  flex: 0 1 360px;
  width: 360px;
  max-width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
  box-sizing: border-box;
  color: var(--text-primary, var(--text, #212224));
  font-family: inherit;
  font-size: 15px;
  background: var(--bg-surface, var(--surface, #fff));
  border: 1px solid var(--border-medium, #c9cfd1);
  border-radius: 8px;
}
.filter-bar__search::placeholder {
  color: var(--text-secondary, var(--text2, #4d575d));
}
.filter-bar__search:focus-visible {
  outline: 3px solid var(--brand-primary, #315d4a);
  outline-offset: 3px;
}
@media (max-width: 600px) {
  .filter-bar .filter-bar__search {
    flex-basis: 100%;
    width: 100%;
  }
}
.filter-bar .filter-bar__search[hidden],
.filter-menu[hidden] {
  display: none;
}

/* Night list: Open in Copilot has a quiet second line under it saying that the link grants no access. */
.catalog-v4-card .agent-hotel-card__footer:has(.agent-hotel-card__link-note) {
  flex-wrap: wrap;
}
.catalog-v4-card .agent-hotel-card__link-note {
  flex-basis: 100%;
  margin: 0;
  color: var(--text-secondary, var(--text2, #4d575d));
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}

/* Night list: the empty or error field spans the whole grid, in the shared empty-state style (h3 under the grid's h2). */
[data-agent-hotel-grid] > .agent-night-field {
  grid-column: 1 / -1;
}
.agent-night-field h3 {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}
.agent-night-field__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.agent-night-field[hidden],
.agent-night-field__actions [hidden] {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  [data-agent-hotel-grid] > [data-agent-id] { transition: opacity 150ms ease; }
}