/* Apps use the shared catalog card and the common responsive catalog grid. */
.apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 272px), 1fr));
  gap: 20px;
  align-items: stretch;
}
.apps-grid > .catalog-v4-card { min-width: 0; height: 100%; }
.apps-grid .catalog-v4-card__main { min-width: 0; }
/* Lab cards: "Lab app" type label with the short "Lab" chip on the same row,
   clear of the heart/count group in the top-right corner. */
html[data-shell="refined"] body:not(.admin-page) .apps-grid .catalog-v4-card[data-lab-app-id] .catalog-v4-card__top {
  grid-template-columns: 40px minmax(0, max-content) max-content;
  padding-right: 88px;
}
html[data-shell="refined"] body:not(.admin-page) .apps-grid .catalog-v4-card[data-lab-app-id] .catalog-v4-card__top > .catalog-v4-card__chip {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
}
/* Sentence-case, neutral Lab chips (section header and app details). */
.apps-lab-section .lab-section-badge,
.app-detail .app-card__badge--lab {
  padding: 0 8px;
  color: var(--text2, var(--text-secondary));
  font-size: 13px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: normal;
  text-transform: none;
  background: transparent;
  border: 1px solid var(--border, var(--border-light));
  border-radius: 999px;
}
.apps-lab-section .lab-section-badge { top: 0; }
/* Separate the Official and Lab sections without adding a divider or banner. */
.apps-grid-section + .apps-lab-section { margin-top: 32px; }
.apps-grid [data-card-action].app-card__launch { min-width: 0; }
.apps-grid [data-card-details].app-card__details-label { color: var(--link, var(--brand-primary)); }
.apps-grid [data-card-action]:focus-visible,
.apps-grid [data-card-details]:focus-visible,
.apps-grid [data-card-favorite]:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 3px;
}
.app-detail__dialog [data-app-detail-description] { margin: 8px 0 0; color: var(--text-secondary); overflow-wrap: anywhere; }
.app-detail__dialog [data-app-detail-name], .app-detail__section p { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .apps-grid { grid-template-columns: repeat(auto-fill, minmax(min(272px, 100%), 1fr)); }
  .apps-grid .catalog-v4-card__action,
  .apps-grid .catalog-v4-card__details,
  .apps-grid .catalog-v4-card__favorite { min-height: 44px; }
}

.apps-product-details { padding: 0 18px 16px; }
/* A closed product details panel takes no space, so the card footer stays level with the rest of its row. */
.apps-product-details:not([open]) { display: none; }
.apps-product-details > summary { cursor: pointer; color: var(--link, var(--brand-primary)); }

/* Edit app (owner revision) uses the Share wizard's frame: fixed header and footer, a scrolling body,
   titled sections and 44 px controls. Behaviour and data hooks are unchanged (app-management.js). */
.app-edit-v4 .app-edit-v4__dialog {
  display: flex;
  flex-direction: column;
  width: min(760px, calc(100vw - 32px));
  max-height: min(820px, calc(100vh - 32px));
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgb(33 34 36 / 16%);
}
.app-edit-v4__header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border-light, #e5e7e8);
}
.app-edit-v4__title { margin: 0; font-size: 20px; font-weight: 600; line-height: 28px; }
.app-edit-v4__close {
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  color: var(--text-primary, #212224);
  font: inherit;
  font-size: 24px;
  line-height: 1;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-medium, #c9cfd1);
  border-radius: 8px;
  cursor: pointer;
}
.app-edit-v4__form { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; margin: 0; }
.app-edit-v4__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.app-edit-v4__info {
  padding: 16px;
  color: var(--text-secondary, #4d575d);
  font-size: 14px;
  line-height: 20px;
  background: var(--bg-input, #f7f8f8);
  border: 1px solid var(--border-light, #e5e7e8);
  border-radius: 8px;
}
.app-edit-v4__info p { margin: 0; }
.app-edit-v4__info p + p { margin-top: 8px; }
.app-edit-v4__info [data-app-management-summary] { color: var(--text-primary, #212224); font-weight: 600; }
.app-edit-v4__section { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.app-edit-v4__section[hidden] { display: none; }
.app-edit-v4__section-title { margin: 0; color: var(--text-primary, #212224); font-size: 20px; font-weight: 600; line-height: 28px; }
.app-edit-v4__section .modal-field { margin: 0; }
.app-edit-v4__section p { margin: 0; color: var(--text-secondary, #4d575d); font-size: 14px; line-height: 20px; }
.app-edit-v4__panel { padding: 20px; border: 1px solid var(--border-light, #e5e7e8); border-radius: 8px; }
.app-edit-v4__footer {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: 12px;
  min-height: 76px;
  padding: 12px 24px;
  box-sizing: border-box;
  border-top: 1px solid var(--border-light, #e5e7e8);
}
.app-edit-v4 :is(.share-wizard-v4__primary, .share-wizard-v4__secondary) { min-height: 44px; }
/* Read-only fields (App URL, verified country) keep readable contrast in both themes. */
.app-edit-v4 .modal-field [readonly] { color: var(--text-secondary, #4d575d); background: var(--bg-input, #f7f8f8); }
.app-edit-v4 :focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 3px; box-shadow: none; }
@media (max-width: 600px) {
  .app-edit-v4 .app-edit-v4__dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); border-radius: 12px; }
  .app-edit-v4__header { padding: 8px 12px; }
  .app-edit-v4__footer { padding: 8px 12px; }
  .app-edit-v4__footer > button { flex: 1 1 40%; min-width: 0; padding: 0 10px; }
}

/* Edit app, second pass: app name and type in the header, a live card preview beside the form
   (as in the Share wizard), paired short fields and an edited-field count in the footer. */
.app-edit-v4 .app-edit-v4__dialog { width: min(980px, calc(100vw - 32px)); }
.app-edit-v4__heading { min-width: 0; }
.app-edit-v4__title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.app-edit-v4__kind {
  padding: 2px 10px;
  color: var(--text-secondary, #4d575d);
  font-size: 13px;
  line-height: 20px;
  border: 1px solid var(--border-medium, #c9cfd1);
  border-radius: 999px;
}
.app-edit-v4__subtitle { margin: 2px 0 0; overflow: hidden; color: var(--text-secondary, #4d575d); font-size: 14px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.app-edit-v4__subtitle:empty { display: none; }
.app-edit-v4__body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
.app-edit-v4__main { display: flex; flex-direction: column; gap: 24px; min-width: 0; padding: 24px; }
.app-edit-v4__preview {
  position: sticky;
  top: 0;
  align-self: stretch;
  box-sizing: border-box;
  padding: 24px;
  background: var(--bg-input, #f7f8f8);
  border-left: 1px solid var(--border-light, #e5e7e8);
}
.app-edit-v4__preview-title { margin: 0; color: var(--text-primary, #212224); font-size: 16px; font-weight: 600; line-height: 24px; }
.app-edit-v4__preview-hint { margin: 4px 0 16px; color: var(--text-secondary, #4d575d); font-size: 14px; line-height: 20px; }
.app-edit-v4__preview-card .catalog-v4-card { width: 100%; pointer-events: none; }
.app-edit-v4__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* One Edited mark per field; for the sign-in question it sits on the question, not on each answer. */
.app-edit-v4 .modal-field[data-edited]:not(.modal-field--requires-login) > label::after,
.app-edit-v4 .modal-field--requires-login[data-edited] > legend::after {
  content: "Edited";
  margin-left: 8px;
  padding: 1px 8px;
  color: var(--brand-primary-strong, #007300);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  background: var(--brand-primary-light, #e9f4e9);
  border-radius: 999px;
}
html[data-theme="dark"] .app-edit-v4 .modal-field[data-edited]:not(.modal-field--requires-login) > label::after,
html[data-theme="dark"] .app-edit-v4 .modal-field--requires-login[data-edited] > legend::after { color: var(--text-primary, #fff); background: var(--accentSoft, rgb(79 194 79 / 14%)); }
.app-edit-v4__footer { align-items: center; }
.app-edit-v4__changes { margin: 0 auto 0 0; color: var(--text-secondary, #4d575d); font-size: 14px; line-height: 20px; }
@media (max-width: 860px) {
  .app-edit-v4__body { display: flex; flex-direction: column; }
  .app-edit-v4__preview { position: static; border-left: 0; border-top: 1px solid var(--border-light, #e5e7e8); }
}
@media (max-width: 600px) {
  .app-edit-v4__main, .app-edit-v4__preview { padding: 16px 12px; }
  .app-edit-v4__pair { grid-template-columns: minmax(0, 1fr); }
  .app-edit-v4__footer { flex-wrap: wrap; }
  .app-edit-v4__changes { flex: 0 0 100%; text-align: center; }
}

/* App details share the Edit app / Share wizard frame: about 880 px wide and up to 90% of the screen high,
   a fixed header, a scrolling body and a sticky action bar. Admin facts use the same two-column grid. */
.app-detail-v4 .app-detail__dialog {
  display: flex;
  flex-direction: column;
  width: min(880px, calc(100vw - 32px));
  max-height: min(90vh, calc(100vh - 32px));
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgb(33 34 36 / 16%);
}
.app-detail-v4__header {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-light, #e5e7e8);
}
.app-detail-v4 .app-detail__dialog .app-detail-v4__header [data-app-detail-description] { max-width: 72ch; margin: 6px 0 0; font-size: 15px; line-height: 22px; }
.app-detail-v4 .app-detail__body { flex: 1 1 auto; gap: 24px; min-height: 0; padding: 24px 24px 0; overflow: auto; }
.app-detail-v4 .app-detail__facts { gap: 16px 24px; }
.app-detail-v4 .app-detail__facts dt { margin: 0 0 4px; color: var(--text-secondary, #4d575d); font-size: 13px; font-weight: 600; line-height: 18px; }
.app-detail-v4 .app-detail__facts dd { color: var(--text-primary, #212224); font-size: 15px; line-height: 22px; }
.app-detail-v4 :is(.app-detail__section h3, .app-detail__caution h3, .app-detail-v4__subheading) { margin: 0 0 8px; color: var(--text-primary, #212224); font-size: 16px; font-weight: 600; line-height: 24px; }
.app-detail-v4 [data-app-routing-readiness] { display: grid; gap: 12px; margin-top: 16px; }
.app-detail-v4 [data-app-routing-readiness] > p { margin: 0; color: var(--text-secondary, #4d575d); font-size: 14px; line-height: 20px; }
.app-detail-v4__reference { grid-column: 1 / -1; }
.app-detail-v4__reference dd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.app-detail-v4__reference input {
  flex: 1 1 340px;
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 12px;
  color: var(--text-primary, #212224);
  font: inherit;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  background: var(--bg-input, #f7f8f8);
  border: 1px solid var(--border-medium, #c9cfd1);
  border-radius: 8px;
}
.app-detail-v4__reference .share-wizard-v4__secondary { min-height: 44px; }
.app-detail-v4__copy-status { color: var(--text-secondary, #4d575d); font-size: 13px; line-height: 18px; }
.app-detail-v4__copy-status:empty { display: none; }
.app-detail-v4 .app-detail__actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  margin: 0 -24px;
  padding: 12px 24px;
  background: var(--bg-card, #fff);
  border-top: 1px solid var(--border-light, #e5e7e8);
}
.app-detail-v4 .app-detail__actions .action-button { min-height: 44px; }
.app-detail-v4 :focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 3px; box-shadow: none; }
@media (max-width: 640px) {
  .app-detail-v4 .app-detail__dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); border-radius: 12px; }
  .app-detail-v4__header { padding: 12px; }
  .app-detail-v4 .app-detail__body { padding: 16px 12px 0; }
  .app-detail-v4 .app-detail__actions { flex-direction: row; gap: 8px; margin: 0 -12px; padding: 8px 12px; }
  .app-detail-v4 .app-detail__actions > * { flex: 1 1 calc(50% - 4px); width: auto; min-width: 0; }
}

/* Country list picker (share and Edit app): search, removable chips and a scrolling checkbox list. */
.country-picker { display: grid; gap: 8px; min-width: 0; }
.country-picker__label { color: var(--text-primary, #212224); font-size: 14px; font-weight: 600; line-height: 20px; }
.country-picker__search {
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 12px;
  color: var(--text-primary, #212224);
  font: inherit;
  background: var(--bg-input, #f7f8f8);
  border: 1px solid var(--border-medium, #c9cfd1);
  border-radius: 8px;
}
.country-picker__count, .country-picker__empty { margin: 0; color: var(--text-secondary, #4d575d); font-size: 13px; line-height: 18px; }
.country-picker__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.country-picker__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 10px 0 12px;
  color: var(--text-primary, #212224);
  font: inherit;
  font-size: 14px;
  background: var(--brand-primary-light, #e9f4e9);
  border: 1px solid var(--border-medium, #c9cfd1);
  border-radius: 999px;
  cursor: pointer;
}
.country-picker__chip-x { font-size: 18px; line-height: 1; }
.country-picker__list { max-height: 240px; margin: 0; padding: 4px 0; overflow: auto; border: 1px solid var(--border-light, #e5e7e8); border-radius: 8px; }
.country-picker__options { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.country-picker__option { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; color: var(--text-primary, #212224); font-size: 14px; cursor: pointer; }
.country-picker__option:has(input:disabled) { color: var(--text-secondary, #4d575d); cursor: not-allowed; }
.country-picker__option input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand-primary); }
.country-picker :focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 2px; box-shadow: none; }
html[data-theme="dark"] .country-picker__chip { color: var(--text-primary, #fff); background: var(--accentSoft, rgb(79 194 79 / 14%)); }

/* The publisher's "Requires sign-in" tag (#281) shows in full, in both languages. */
.catalog-v4-card__tag.catalog-v4-card__tag--requires-login {
  max-width: none;
}

/* The publisher's sign-in question (#281): a plain group, as the other fields, with real round radio buttons. */
.modal-field.modal-field--requires-login {
  min-width: 0;
  margin: 16px 0 0;
  padding: 0;
  border: 0;
}
.modal-field--requires-login + .modal-field {
  margin-top: 12px;
}
.modal-field--requires-login legend {
  margin: 0 0 8px;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.modal-field--requires-login .ack-label + .ack-label {
  margin-top: 8px;
}
.modal-field.modal-field--requires-login input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  padding: 0;
  /* The ring is a control boundary: the secondary text colour keeps it at 3:1 or more in both themes. */
  border: 2px solid var(--text-secondary);
  border-radius: 50%;
  background: var(--bg-input);
  cursor: pointer;
}
.modal-field.modal-field--requires-login input[type="radio"]:checked {
  border-color: var(--brand-primary);
  background: radial-gradient(circle, var(--brand-primary) 0 4px, var(--bg-input) 5px);
}
.modal-field.modal-field--requires-login input[type="radio"]:focus {
  box-shadow: none;
}
.modal-field.modal-field--requires-login input[type="radio"]:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}