/* Shared product components and compatibility mappings. */

/* Buttons */
html[data-pp-ui]:not([data-pp-surface="hosted-site"]) :where(
  .button,
  .pp-button,
  .primary-button,
  .button-primary,
  .secondary-button,
  .button-secondary,
  .inline-button,
  .cancel-button,
  .restore-button,
  .danger-button,
  .record-button,
  .portal-action,
  .family-actions a,
  button
) {
  min-height: var(--pp-control-height);
  max-width: 100%;
  padding: 0.68rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--pp-radius-sm) !important;
  font-family: var(--pp-font-sans);
  font-size: 0.925rem;
  font-weight: 760 !important;
  line-height: 1.15;
  letter-spacing: 0 !important;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  vertical-align: middle;
  transition:
    color var(--pp-duration-fast) var(--pp-ease),
    background-color var(--pp-duration-fast) var(--pp-ease),
    border-color var(--pp-duration-fast) var(--pp-ease),
    box-shadow var(--pp-duration-fast) var(--pp-ease),
    transform var(--pp-duration-fast) var(--pp-ease),
    opacity var(--pp-duration-fast) var(--pp-ease) !important;
}

html[data-pp-ui]:not([data-pp-surface="hosted-site"]) :where(
  .button,
  .pp-button,
  .primary-button,
  .button-primary,
  button[type="submit"]:not(.secondary):not(.button-secondary):not(.danger):not(.danger-button)
) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pp-space-2);
  color: var(--pp-primary-foreground) !important;
  border-color: var(--pp-primary-border) !important;
  background: var(--pp-primary) !important;
  box-shadow: 0 7px 18px rgba(23, 21, 15, 0.22) !important;
}

html[data-pp-ui]:not([data-pp-surface="hosted-site"]) :where(
  .button,
  .pp-button,
  .primary-button,
  .button-primary,
  button[type="submit"]:not(.secondary):not(.button-secondary):not(.danger):not(.danger-button)
):hover {
  color: var(--pp-primary-foreground) !important;
  border-color: var(--pp-primary-hover) !important;
  background: var(--pp-primary-hover) !important;
  box-shadow: 0 11px 24px rgba(23, 21, 15, 0.28) !important;
  transform: translateY(-1px);
}

html[data-pp-ui]:not([data-pp-surface="hosted-site"]) :where(
  .secondary,
  .button-secondary,
  .secondary-button,
  .inline-button,
  .cancel-button,
  .record-button,
  .button-muted,
  .month-nav a,
  .pager a,
  .pager span,
  .records-tab:not(.active),
  .preview-tab:not(.active),
  .timeframe-option:not(.active)
) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pp-space-2);
  color: var(--pp-text-soft) !important;
  border-color: var(--pp-border-strong) !important;
  background: var(--pp-surface) !important;
  box-shadow: var(--pp-shadow-xs) !important;
}

html[data-pp-ui]:not([data-pp-surface="hosted-site"]) :where(
  .secondary,
  .button-secondary,
  .secondary-button,
  .inline-button,
  .cancel-button,
  .record-button,
  .button-muted,
  .month-nav a,
  .pager a
):hover {
  color: var(--pp-heading) !important;
  border-color: var(--pp-primary-border) !important;
  background: var(--pp-primary-soft) !important;
  box-shadow: var(--pp-shadow-sm) !important;
  transform: translateY(-1px);
}

html[data-pp-ui] :where(.danger, .danger-button, .button-danger, .record-button-danger, button.text-danger) {
  color: #fff !important;
  border-color: var(--pp-danger) !important;
  background: var(--pp-danger) !important;
  box-shadow: 0 7px 18px rgba(185, 63, 57, 0.16) !important;
}

html[data-pp-ui] :where(.danger, .danger-button, .button-danger, .record-button-danger):hover {
  border-color: var(--pp-danger-hover) !important;
  background: var(--pp-danger-hover) !important;
}

html[data-pp-ui] button.text-danger {
  color: var(--pp-danger) !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-pp-ui] :where(.restore-button, .record-button-restore, button.text-restore) {
  color: #fff !important;
  border-color: var(--pp-success) !important;
  background: var(--pp-success) !important;
}

html[data-pp-ui] button.text-restore {
  color: var(--pp-success) !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-pp-ui] :where(.button-small, .record-button, .inline-button, .sensitive-toggle, .sortable-head) {
  min-height: var(--pp-control-height-sm) !important;
  padding: 0.46rem 0.72rem !important;
  font-size: 0.82rem !important;
}

html[data-pp-ui] :where(button, .button, .pp-button):active:not(:disabled) {
  transform: translateY(0) scale(0.985) !important;
}

html[data-pp-ui] :where(button, .button, .pp-button):disabled,
html[data-pp-ui] :where(button, .button, .pp-button)[aria-disabled="true"] {
  color: var(--pp-text-faint) !important;
  border-color: var(--pp-border) !important;
  background: var(--pp-surface-muted) !important;
  box-shadow: none !important;
  opacity: 0.72;
  transform: none !important;
}

html[data-pp-ui] [data-pp-submitting="true"] :where(button[type="submit"], input[type="submit"]) {
  position: relative;
  cursor: progress !important;
  opacity: 0.82;
}

html[data-pp-ui] [data-pp-submitting="true"] button[type="submit"]::before {
  content: "";
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: pp-spin 0.75s linear infinite;
}

/* Form controls */
html[data-pp-ui]:not([data-pp-surface="hosted-site"]) :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
  select,
  textarea
) {
  width: 100%;
  min-width: 0;
  min-height: var(--pp-control-height);
  padding: 0.68rem 0.78rem;
  border: 1px solid var(--pp-border-strong) !important;
  border-radius: var(--pp-radius-sm) !important;
  color: var(--pp-text) !important;
  background-color: var(--pp-surface) !important;
  box-shadow: var(--pp-shadow-xs) !important;
  font-family: var(--pp-font-sans);
  font-size: 1rem;
  line-height: 1.3;
  transition:
    border-color var(--pp-duration-fast) var(--pp-ease),
    box-shadow var(--pp-duration-fast) var(--pp-ease),
    background-color var(--pp-duration-fast) var(--pp-ease) !important;
}

html[data-pp-ui]:not([data-pp-surface="hosted-site"]) textarea {
  min-height: 7rem;
  resize: vertical;
}

/* Preserve document-builder coordinates and compact canvas controls. */
html[data-pp-ui] .form-preview .overlay-field :where(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea
) {
  min-height: 0 !important;
  height: 100% !important;
  padding: 5px 7px !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

html[data-pp-ui] .form-preview .overlay-field :where(input[type="checkbox"], input[type="radio"]) {
  width: 20px !important;
  min-height: 0 !important;
  height: 20px !important;
  padding: 0 !important;
}

html[data-pp-ui]:not([data-pp-surface="hosted-site"]) select {
  padding-right: 2.35rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--pp-text-muted) 50%),
    linear-gradient(135deg, var(--pp-text-muted) 50%, transparent 50%) !important;
  background-position:
    calc(100% - 1rem) 50%,
    calc(100% - 0.7rem) 50% !important;
  background-repeat: no-repeat !important;
  background-size: 0.32rem 0.32rem, 0.32rem 0.32rem !important;
  appearance: none;
}

html[data-pp-ui]:not([data-pp-surface="hosted-site"]) :where(input, select, textarea):hover:not(:disabled) {
  border-color: var(--pp-primary-border) !important;
}

html[data-pp-ui]:not([data-pp-surface="hosted-site"]) :where(input, select, textarea):focus {
  border-color: var(--pp-primary) !important;
  outline: 0 !important;
  box-shadow: var(--pp-focus) !important;
}

html[data-pp-ui]:not([data-pp-surface="hosted-site"]) :where(input, select, textarea):disabled,
html[data-pp-ui]:not([data-pp-surface="hosted-site"]) :where(input, select, textarea)[readonly] {
  color: var(--pp-text-muted) !important;
  border-color: var(--pp-border) !important;
  background: var(--pp-surface-muted) !important;
  box-shadow: none !important;
  opacity: 0.86;
}

html[data-pp-ui] :where(input, select, textarea)[aria-invalid="true"],
html[data-pp-ui] :where(input, select, textarea).is-invalid,
html[data-pp-ui] :where(input, select, textarea):user-invalid {
  border-color: var(--pp-danger) !important;
  box-shadow: var(--pp-focus-danger) !important;
}

html[data-pp-ui] :where(label, .field, .check-field) {
  color: var(--pp-text-soft);
}

html[data-pp-ui] :where(label.field, .field) {
  gap: 0.42rem;
  font-size: 0.86rem;
  font-weight: 700;
}

html[data-pp-ui] :where(label.field, .field) > :first-child:not(input):not(select):not(textarea) {
  color: var(--pp-heading);
}

html[data-pp-ui] :where(input[type="checkbox"], input[type="radio"]) {
  width: 1.15rem !important;
  min-width: 1.15rem !important;
  height: 1.15rem !important;
  min-height: 1.15rem !important;
  margin: 0.12rem 0 0;
  padding: 0 !important;
  accent-color: var(--pp-primary) !important;
  box-shadow: none !important;
}

html[data-pp-ui] :where(.checkbox-row, .check-row, .check-field, .choice-inline, .consent-row, .agreement-check, .toggle-row) {
  display: flex;
  align-items: flex-start;
  gap: var(--pp-space-2);
  min-width: 0;
  line-height: 1.4;
}

html[data-pp-ui] input[type="range"] {
  width: 100%;
  accent-color: var(--pp-primary);
}

html[data-pp-ui] input[type="color"] {
  width: 3rem;
  height: 2.5rem;
  padding: 0.2rem;
  border: 1px solid var(--pp-border-strong);
  border-radius: var(--pp-radius-sm);
  background: var(--pp-surface);
}

html[data-pp-ui] input[type="file"]::file-selector-button {
  min-height: 2.25rem;
  margin: -0.45rem 0.7rem -0.45rem -0.55rem;
  padding: 0.45rem 0.7rem;
  border: 0;
  border-right: 1px solid var(--pp-border);
  color: var(--pp-text-soft);
  background: var(--pp-surface-soft);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 720;
  cursor: pointer;
}

html[data-pp-ui] .choice-card,
html[data-pp-ui] .package-option,
html[data-pp-ui] .tribute-choice {
  position: relative;
  border: 1px solid var(--pp-border) !important;
  border-radius: var(--pp-radius-md) !important;
  color: var(--pp-text);
  background: var(--pp-surface) !important;
  box-shadow: var(--pp-shadow-xs) !important;
  transition:
    transform var(--pp-duration) var(--pp-ease),
    border-color var(--pp-duration) var(--pp-ease),
    box-shadow var(--pp-duration) var(--pp-ease),
    background-color var(--pp-duration) var(--pp-ease) !important;
}

html[data-pp-ui] .choice-card:hover,
html[data-pp-ui] .package-option:hover,
html[data-pp-ui] .tribute-choice:hover {
  border-color: var(--pp-primary-border) !important;
  box-shadow: var(--pp-shadow-sm) !important;
  transform: translateY(-1px);
}

html[data-pp-ui] :where(.choice-card, .package-option, .tribute-choice):has(input:checked) {
  border-color: var(--pp-primary) !important;
  background: linear-gradient(180deg, var(--pp-surface), var(--pp-primary-soft)) !important;
  box-shadow: var(--pp-focus), var(--pp-shadow-sm) !important;
}

html[data-pp-ui] :where(.choice-card, .package-option, .tribute-choice):has(input:focus-visible) {
  border-color: var(--pp-primary) !important;
  box-shadow: var(--pp-focus) !important;
}

/* Surfaces and cards */
html[data-pp-ui]:not([data-pp-surface="hosted-site"]) :where(
  .panel,
  .portal-panel,
  .case-panel,
  .account-card,
  .access-card,
  .billing-account,
  .billing-section,
  .builder-panel,
  .builder-card,
  .calendar-shell,
  .metrics-panel,
  .preview-section,
  .soft-panel,
  .family-card,
  .completion-card,
  .payment-pane,
  .statement-section,
  .form-section,
  .wizard-panel,
  .dashboard-overview-card
) {
  border: 1px solid var(--pp-border) !important;
  border-radius: var(--pp-radius-lg) !important;
  color: var(--pp-text) !important;
  background: var(--pp-surface-glass-strong) !important;
  box-shadow: var(--pp-shadow-sm) !important;
  backdrop-filter: blur(12px) saturate(1.05);
}

html[data-pp-ui]:not([data-pp-surface="hosted-site"]) :where(
  .card,
  .metric,
  .metric-card,
  .kpi,
  .billing-mini-stat,
  .automation-card,
  .field-card,
  .feature-card,
  .task-card,
  .step-card,
  .directory-item,
  .location-item,
  .summary-item,
  .detail-item,
  .note-item,
  .history-note,
  .follow-up-item,
  .ongoing-call,
  .call-follow-up-card,
  .call-note-item,
  .family-request,
  .family-doc,
  .family-link-card,
  .vital-status-card,
  .catalog-row,
  .invoice-card,
  .ledger-card,
  .document-card,
  .contract-card
) {
  border: 1px solid var(--pp-border) !important;
  border-radius: var(--pp-radius-md) !important;
  color: var(--pp-text) !important;
  background: var(--pp-surface) !important;
  box-shadow: var(--pp-shadow-xs) !important;
}

html[data-pp-ui] :where(
  .metric,
  .metric-card,
  .kpi,
  .field-card,
  .directory-item,
  .location-item,
  .follow-up-item,
  .ongoing-call,
  .feature-card,
  .task-card
) {
  transition:
    border-color var(--pp-duration) var(--pp-ease),
    box-shadow var(--pp-duration) var(--pp-ease),
    transform var(--pp-duration) var(--pp-ease) !important;
}

html[data-pp-ui] :where(
  .metric,
  .metric-card,
  .kpi,
  .field-card,
  .directory-item,
  .location-item,
  .follow-up-item,
  .ongoing-call,
  .feature-card,
  .task-card
):hover {
  border-color: var(--pp-primary-border) !important;
  box-shadow: var(--pp-shadow-sm) !important;
  transform: translateY(-1px);
}

html[data-pp-ui] :where(.metric, .metric-card, .kpi) strong {
  color: var(--pp-heading);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
}

html[data-pp-ui] :where(.metric, .metric-card, .kpi) > span:first-child {
  color: var(--pp-text-muted) !important;
  font-size: 0.72rem;
  font-weight: 780;
  letter-spacing: 0.055em !important;
  text-transform: uppercase;
}

html[data-pp-ui] :where(.section-head, .section-heading, .card-head, .family-card-head, .billing-section-header) {
  min-width: 0;
}

html[data-pp-ui] :where(.section-head, .section-heading, .card-head, .family-card-head, .billing-section-header) h2,
html[data-pp-ui] :where(.section-head, .section-heading, .card-head, .family-card-head, .billing-section-header) h3 {
  margin-bottom: 0.28rem;
}

html[data-pp-ui] :where(.section-head, .section-heading, .card-head, .family-card-head, .billing-section-header) p {
  margin: 0;
  color: var(--pp-text-muted) !important;
}

/* Tables and dense data */
html[data-pp-ui] :where(.pp-table-scroll, .table-scroll, .table-shell, .table-wrap, .records-table-wrap) {
  position: relative;
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--pp-border) !important;
  border-radius: var(--pp-radius-md) !important;
  background: var(--pp-surface) !important;
  box-shadow: var(--pp-shadow-xs);
  scrollbar-gutter: stable;
  overscroll-behavior-inline: contain;
}

html[data-pp-ui] :where(.pp-table-scroll, .table-scroll, .table-shell, .table-wrap, .records-table-wrap)[data-scrollable="true"]::after {
  content: "Scroll for more";
  position: sticky;
  right: 0.55rem;
  bottom: 0.45rem;
  float: right;
  padding: 0.22rem 0.5rem;
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-pill);
  color: var(--pp-text-muted);
  background: var(--pp-surface-glass-strong);
  box-shadow: var(--pp-shadow-xs);
  font-size: 0.68rem;
  font-weight: 720;
  pointer-events: none;
  backdrop-filter: blur(8px);
}

html[data-pp-ui]:not([data-pp-surface="hosted-site"]) table:not(.form-preview table):not(.service-folder-page table):not(.folder-page table):not([data-no-responsive-table] table):not([data-field-editor] table) {
  width: 100%;
  max-width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  color: var(--pp-text) !important;
  background: var(--pp-surface) !important;
  font-variant-numeric: tabular-nums;
}

html[data-pp-ui]:not([data-pp-surface="hosted-site"]) table:not(.form-preview table):not(.service-folder-page table):not(.folder-page table):not([data-no-responsive-table] table):not([data-field-editor] table) :where(th, td) {
  padding: 0.78rem 0.85rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--pp-divider) !important;
  text-align: left;
  vertical-align: middle;
}

html[data-pp-ui]:not([data-pp-surface="hosted-site"]) table:not(.form-preview table):not(.service-folder-page table):not(.folder-page table):not([data-no-responsive-table] table):not([data-field-editor] table) th {
  position: relative;
  color: var(--pp-text-muted) !important;
  background: var(--pp-surface-soft) !important;
  font-size: 0.7rem !important;
  font-weight: 790 !important;
  line-height: 1.25;
  letter-spacing: 0.055em !important;
  text-transform: uppercase;
  white-space: nowrap;
}

html[data-pp-ui]:not([data-pp-surface="hosted-site"]) table:not(.form-preview table):not(.service-folder-page table):not(.folder-page table):not([data-no-responsive-table] table):not([data-field-editor] table) td {
  color: var(--pp-text-soft) !important;
  background: var(--pp-surface) !important;
  font-size: 0.9rem;
}

html[data-pp-ui]:not([data-pp-surface="hosted-site"]) table:not(.form-preview table):not(.service-folder-page table):not(.folder-page table):not([data-no-responsive-table] table):not([data-field-editor] table) tbody tr:last-child > :where(th, td) {
  border-bottom: 0 !important;
}

html[data-pp-ui]:not([data-pp-surface="hosted-site"]) table:not(.form-preview table):not(.service-folder-page table):not(.folder-page table):not([data-no-responsive-table] table):not([data-field-editor] table) tbody tr:hover > td {
  background: color-mix(in srgb, var(--pp-primary-soft) 52%, var(--pp-surface)) !important;
}

html[data-pp-ui] .folder-page-photo-actions button {
  min-height: 30px !important;
  padding: 5px 8px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
}

html[data-pp-ui][data-pp-surface="workspace"][data-color-profile="dark"] :where(.button, .pp-button, .primary-button, .button-primary, button[type="submit"]:not(.secondary):not(.button-secondary):not(.danger):not(.danger-button)) {
  color: var(--pp-primary-foreground) !important;
}

html[data-pp-ui][data-pp-surface="workspace"][data-color-profile="dark"] :where(.danger, .danger-button, .button-danger, .record-button-danger) {
  color: #351311 !important;
}

html[data-pp-ui][data-pp-surface="workspace"][data-color-profile="dark"] :where(.restore-button, .record-button-restore) {
  color: #10271e !important;
}

html[data-pp-ui] th[aria-sort]::after {
  content: "↕";
  margin-left: 0.35rem;
  color: var(--pp-text-faint);
}

html[data-pp-ui] th[aria-sort="ascending"]::after {
  content: "↑";
  color: var(--pp-accent);
}

html[data-pp-ui] th[aria-sort="descending"]::after {
  content: "↓";
  color: var(--pp-accent);
}

html[data-pp-ui] :where(.filters, .table-tools, .toolbar, .option-bar) {
  display: flex;
  align-items: end;
  gap: var(--pp-space-3);
  flex-wrap: wrap;
  padding: var(--pp-space-4) !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: var(--pp-radius-md) !important;
  background: var(--pp-surface) !important;
}

html[data-pp-ui] :where(.pager, .pagination) {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--pp-space-2);
  flex-wrap: wrap;
}

html[data-pp-ui] :where(.pager a, .pager span, .pagination a, .pagination span) {
  min-width: 2.4rem;
  min-height: 2.4rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-sm);
  text-decoration: none;
}

/* Tabs, segmented controls, breadcrumbs */
html[data-pp-ui] :where(.records-tabs, .preview-tabs, .case-tabs, .payment-tabs, .marketing-section-nav, [role="tablist"]) {
  display: flex;
  max-width: 100%;
  gap: var(--pp-space-1);
  overflow-x: auto;
  padding: 0.25rem;
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-md);
  background: var(--pp-surface-soft);
  scrollbar-width: thin;
}

html[data-pp-ui] :where(.records-tab, .preview-tab, .payment-tab, [role="tab"], .segmented, .timeframe-option) {
  min-height: 2.4rem;
  padding: 0.52rem 0.8rem;
  border: 1px solid transparent !important;
  border-radius: var(--pp-radius-sm) !important;
  color: var(--pp-text-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0.86rem;
  font-weight: 740 !important;
  text-decoration: none;
  white-space: nowrap;
}

html[data-pp-ui] :where(.records-tab.active, .preview-tab.active, .payment-tab.active, [role="tab"][aria-selected="true"], .segmented.active, .timeframe-option.active) {
  color: var(--pp-heading) !important;
  border-color: var(--pp-border) !important;
  background: var(--pp-surface) !important;
  box-shadow: var(--pp-shadow-xs) !important;
}

html[data-pp-ui] :where(.breadcrumbs, .breadcrumb) {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  color: var(--pp-text-muted);
  font-size: 0.82rem;
}

html[data-pp-ui] :where(.breadcrumbs, .breadcrumb) a {
  color: var(--pp-text-soft);
  font-weight: 680;
  text-decoration: none;
}

/* Alerts, status, progress */
html[data-pp-ui] :where(.notice, .error, .alert, .family-alert, .portal-flash, .form-status, .info-callout, .live-sync-banner) {
  position: relative;
  margin-inline: 0;
  padding: 0.78rem 0.9rem !important;
  border: 1px solid var(--pp-primary-border) !important;
  border-radius: var(--pp-radius-md) !important;
  color: var(--pp-info) !important;
  background: var(--pp-info-soft) !important;
  box-shadow: none !important;
  font-size: 0.9rem;
  font-weight: 650 !important;
  line-height: 1.45;
}

html[data-pp-ui] :where(.notice-success, .notice.good, .alert-success, .form-status:not(.error)) {
  color: var(--pp-success) !important;
  border-color: color-mix(in srgb, var(--pp-success) 28%, transparent) !important;
  background: var(--pp-success-soft) !important;
}

html[data-pp-ui] :where(.notice-error, .error, .alert-error, .family-alert.error, .portal-flash.error, .group-error) {
  color: var(--pp-danger) !important;
  border-color: color-mix(in srgb, var(--pp-danger) 28%, transparent) !important;
  background: var(--pp-danger-soft) !important;
}

html[data-pp-ui] :where(.notice-warning, .alert-warning, .portal-flash.warning) {
  color: var(--pp-warning) !important;
  border-color: color-mix(in srgb, var(--pp-warning) 30%, transparent) !important;
  background: var(--pp-warning-soft) !important;
}

html[data-pp-ui] :where(.badge, .pill, .status-pill, .status-badge, .records-status-pill, .priority-pill, .billing-pill, .family-status, .tribute-pill, .staff-status-pill, .online-pill) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  width: fit-content;
  max-width: 100%;
  min-height: 1.55rem;
  padding: 0.24rem 0.52rem;
  border: 1px solid var(--pp-border) !important;
  border-radius: var(--pp-radius-xs) !important;
  color: var(--pp-text-soft) !important;
  background: color-mix(in srgb, var(--pp-surface) 78%, var(--pp-surface-soft)) !important;
  box-shadow: none !important;
  font-size: 0.7rem !important;
  font-weight: 720 !important;
  line-height: 1.18;
  letter-spacing: 0 !important;
  white-space: normal;
}

html[data-pp-ui] :where(.pill.good, .status-active, .status-pill.paid, .billing-pill.good, .family-status.complete, .records-status-pill.success) {
  color: var(--pp-success) !important;
  border-color: color-mix(in srgb, var(--pp-success) 30%, transparent) !important;
  background: var(--pp-success-soft) !important;
}

html[data-pp-ui] :where(.pill.warn, .status-pill.pending, .billing-pill.warn, .priority-high, .records-status-pill.warning) {
  color: var(--pp-warning) !important;
  border-color: color-mix(in srgb, var(--pp-warning) 30%, transparent) !important;
  background: var(--pp-warning-soft) !important;
}

html[data-pp-ui] :where(.pill.danger, .status-urgent, .records-status-pill.danger) {
  color: var(--pp-danger) !important;
  border-color: color-mix(in srgb, var(--pp-danger) 30%, transparent) !important;
  background: var(--pp-danger-soft) !important;
}

html[data-pp-ui] :where(progress, .progress, .readiness-meter, [data-upload-progress-wrap] > div) {
  width: 100%;
  height: 0.55rem;
  overflow: hidden;
  border: 0;
  border-radius: var(--pp-radius-pill) !important;
  color: var(--pp-accent);
  background: var(--pp-surface-muted) !important;
}

html[data-pp-ui] progress::-webkit-progress-bar {
  border-radius: inherit;
  background: var(--pp-surface-muted);
}

html[data-pp-ui] progress::-webkit-progress-value,
html[data-pp-ui] progress::-moz-progress-bar,
html[data-pp-ui] :where(.progress span, .readiness-meter span, [data-upload-progress-bar]) {
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pp-primary), var(--pp-accent)) !important;
}

/* Empty states and loading */
html[data-pp-ui] :where(.empty, .empty-state, .table-empty, .family-empty, .ongoing-empty, .follow-up-empty, .billing-empty, .media-empty) {
  padding: clamp(1.4rem, 4vw, 2.4rem) !important;
  border: 1px dashed var(--pp-border-strong) !important;
  border-radius: var(--pp-radius-lg) !important;
  color: var(--pp-text-muted) !important;
  background: color-mix(in srgb, var(--pp-surface) 88%, transparent) !important;
  box-shadow: none !important;
  text-align: center;
}

html[data-pp-ui] td.table-empty {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--pp-surface) !important;
}

html[data-pp-ui] .pp-skeleton,
html[data-pp-ui] [data-loading="true"] .skeleton {
  position: relative;
  overflow: hidden;
  color: transparent !important;
  border-radius: var(--pp-radius-xs);
  background: var(--pp-surface-muted) !important;
}

html[data-pp-ui] .pp-skeleton::after,
html[data-pp-ui] [data-loading="true"] .skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.62), transparent);
  transform: translateX(-100%);
  animation: pp-shimmer 1.5s infinite;
}

/* Dialogs, menus, popovers */
html[data-pp-ui] :where(dialog, .modal, .delete-modal, .email-modal, .document-modal, .payment-modal, .reminder-modal, .variable-modal, .profile-modal, .gvg-help-modal) {
  width: min(38rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  max-height: min(52rem, calc(100dvh - 2rem));
  margin: auto;
  padding: 0 !important;
  overflow: auto;
  border: 1px solid var(--pp-border) !important;
  border-radius: var(--pp-radius-xl) !important;
  color: var(--pp-text) !important;
  background: var(--pp-surface-glass-strong) !important;
  box-shadow: var(--pp-shadow-lg) !important;
  backdrop-filter: blur(20px) saturate(1.08);
}

html[data-pp-ui] :where(dialog, .modal, .delete-modal, .email-modal, .document-modal, .payment-modal, .reminder-modal, .variable-modal, .profile-modal, .gvg-help-modal)::backdrop {
  background: rgba(8, 18, 27, 0.58) !important;
  backdrop-filter: blur(6px) saturate(0.9);
}

html[data-pp-ui] :where(.modal-inner, .delete-modal-inner, .variable-modal-inner, .profile-modal-inner, .gvg-help-form) {
  padding: clamp(1rem, 3vw, 1.5rem) !important;
  color: var(--pp-text) !important;
  background: transparent !important;
}

html[data-pp-ui] :where(.modal-head, .email-modal-head, .document-modal-head, .payment-modal-head, .reminder-modal-head, .gvg-help-head) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pp-space-4);
  padding-bottom: var(--pp-space-4);
  border-bottom: 1px solid var(--pp-divider);
}

html[data-pp-ui] :where(.modal-actions, .email-modal-actions, .document-modal-actions, .payment-modal-actions, .reminder-modal-actions, .gvg-help-actions) {
  display: flex;
  justify-content: flex-end;
  gap: var(--pp-space-2);
  flex-wrap: wrap;
  padding-top: var(--pp-space-4);
  border-top: 1px solid var(--pp-divider);
}

html[data-pp-ui] :where(.close-button, .gvg-help-close, [data-dialog-close]) {
  display: inline-grid !important;
  place-items: center;
  width: 2.35rem;
  min-width: 2.35rem;
  height: 2.35rem;
  min-height: 2.35rem !important;
  padding: 0 !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: 50% !important;
  color: var(--pp-text-muted) !important;
  background: var(--pp-surface-soft) !important;
  box-shadow: none !important;
  font-size: 1.25rem !important;
}

html[data-pp-ui] :where(.account-menu, .location-switcher, details[data-menu]) {
  position: relative;
}

html[data-pp-ui] :where(.account-menu summary, .location-switcher summary, details[data-menu] > summary) {
  list-style: none;
}

html[data-pp-ui] :where(.account-menu summary, .location-switcher summary, details[data-menu] > summary)::-webkit-details-marker {
  display: none;
}

html[data-pp-ui] :where(.account-panel, .location-switcher-menu, .marketing-menu-panel, [data-popover]) {
  z-index: 100;
  padding: var(--pp-space-3);
  border: 1px solid var(--pp-border) !important;
  border-radius: var(--pp-radius-md) !important;
  color: var(--pp-text) !important;
  background: var(--pp-surface-glass-strong) !important;
  box-shadow: var(--pp-shadow-float) !important;
  backdrop-filter: blur(18px) saturate(1.08);
}

html[data-pp-ui]:not([data-pp-surface="hosted-site"]) [data-tooltip] {
  position: relative;
}

html[data-pp-ui]:not([data-pp-surface="hosted-site"]) [data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 300;
  left: 50%;
  bottom: calc(100% + 0.45rem);
  max-width: 15rem;
  padding: 0.42rem 0.6rem;
  border-radius: var(--pp-radius-xs);
  color: #fff;
  background: #17150f;
  box-shadow: var(--pp-shadow-sm);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 0.2rem);
  transition: opacity var(--pp-duration-fast), transform var(--pp-duration-fast);
}

html[data-pp-ui]:not([data-pp-surface="hosted-site"]) [data-tooltip]:hover::after,
html[data-pp-ui]:not([data-pp-surface="hosted-site"]) [data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Compact information trigger. Explicit dimensions isolate it from generic buttons. */
html[data-pp-ui]:not([data-pp-surface="hosted-site"]) button.pp-info-trigger {
  appearance: none;
  inline-size: 1.75rem !important;
  min-inline-size: 1.75rem !important;
  max-inline-size: 1.75rem !important;
  block-size: 1.75rem !important;
  min-block-size: 1.75rem !important;
  max-block-size: 1.75rem !important;
  flex: 0 0 1.75rem !important;
  display: inline-grid !important;
  place-items: center;
  gap: 0 !important;
  margin: 0;
  padding: 0 !important;
  border: 1px solid var(--pp-accent-border) !important;
  border-radius: 50% !important;
  color: var(--pp-accent) !important;
  background: var(--pp-info-soft) !important;
  box-shadow: none !important;
  line-height: 1 !important;
  vertical-align: middle;
  transform: none !important;
}

html[data-pp-ui]:not([data-pp-surface="hosted-site"]) button.pp-info-trigger:hover,
html[data-pp-ui]:not([data-pp-surface="hosted-site"]) button.pp-info-trigger[aria-expanded="true"] {
  color: var(--pp-primary-foreground) !important;
  border-color: var(--pp-primary) !important;
  background: var(--pp-primary) !important;
  box-shadow: 0 0 0 3px rgba(181, 138, 43, 0.22) !important;
  transform: none !important;
}

html[data-pp-ui]:not([data-pp-surface="hosted-site"]) button.pp-info-trigger:focus-visible {
  box-shadow: var(--pp-focus) !important;
}

html[data-pp-ui]:not([data-pp-surface="hosted-site"]) button.pp-info-trigger svg {
  display: block;
  inline-size: 1rem !important;
  min-inline-size: 1rem !important;
  max-inline-size: 1rem !important;
  block-size: 1rem !important;
  min-block-size: 1rem !important;
  max-block-size: 1rem !important;
  flex: 0 0 1rem !important;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Shared help footer/dialog compatibility */
html[data-pp-ui] .gvg-site-footer {
  padding: 1.15rem clamp(1rem, 3vw, 2rem) !important;
  border-top: 1px solid var(--pp-border) !important;
  color: var(--pp-text-soft) !important;
  background: var(--pp-surface-glass-strong) !important;
  box-shadow: 0 -12px 36px rgba(15, 30, 43, 0.05) !important;
  backdrop-filter: blur(16px) saturate(1.06);
}

html[data-pp-ui] .gvg-footer-brand strong {
  color: var(--pp-heading) !important;
}

html[data-pp-ui] :where(.gvg-footer-brand span, .gvg-footer-links span) {
  color: var(--pp-text-muted) !important;
}

html[data-pp-ui] .gvg-footer-links button {
  color: var(--pp-text-soft) !important;
  border-color: var(--pp-border) !important;
  background: var(--pp-surface-soft) !important;
  box-shadow: none !important;
}

html[data-pp-ui] .gvg-help-grid label {
  color: var(--pp-text-soft) !important;
}

/* Utility layout mappings */
html[data-pp-ui] :where(.grid, .field-grid, .settings-grid, .builder-grid, .summary-grid, .create-grid, .automation-grid) {
  min-width: 0;
}

html[data-pp-ui] :where(.actions, .form-actions, .row-actions, .portal-actions, .family-actions, .button-row, .receipt-actions, .billing-action-row) {
  display: flex;
  align-items: center;
  gap: var(--pp-space-2);
  flex-wrap: wrap;
}

html[data-pp-ui] :where(.portal-toolbar, .section-heading, .billing-section-header, .family-card-head, .card-head) > * {
  min-width: 0;
}

html[data-pp-ui] .sortable-head {
  color: var(--pp-text-muted) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

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

@keyframes pp-shimmer {
  to { transform: translateX(100%); }
}

@media (max-width: 47.99rem) {
  html[data-pp-ui] :where(.filters, .table-tools, .toolbar, .option-bar) {
    align-items: stretch;
    padding: var(--pp-space-3) !important;
  }

  html[data-pp-ui] :where(.filters, .table-tools, .toolbar, .option-bar) > * {
    min-width: min(100%, 13rem);
    flex: 1 1 auto;
  }

  html[data-pp-ui] :where(.modal-actions, .email-modal-actions, .document-modal-actions, .payment-modal-actions, .reminder-modal-actions, .gvg-help-actions) > * {
    flex: 1 1 9rem;
  }

  html[data-pp-ui] :where(.actions, .form-actions, .portal-actions, .family-actions) > :where(button, .button, a.button) {
    flex: 1 1 9rem;
  }
}

@media (prefers-reduced-transparency: reduce) {
  html[data-pp-ui] :where(
    .panel,
    .portal-panel,
    .case-panel,
    .account-card,
    .access-card,
    dialog,
    .modal,
    .account-panel,
    .location-switcher-menu,
    .gvg-site-footer
  ) {
    background: var(--pp-surface) !important;
    backdrop-filter: none !important;
  }
}

/* Local query-feedback toasts (replaces the former CDN alert dependency). */
html[data-pp-ui] .pp-toast-region {
  position: fixed;
  z-index: 1000;
  top: 1rem;
  right: 1rem;
  display: grid;
  gap: 0.65rem;
  width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}

html[data-pp-ui] .pp-toast {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.7rem;
  padding: 0.8rem;
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-md);
  color: var(--pp-text-soft);
  background: var(--pp-surface-glass-strong);
  box-shadow: var(--pp-shadow-float);
  pointer-events: auto;
  backdrop-filter: blur(18px) saturate(1.08);
  animation: pp-toast-in var(--pp-duration-slow) var(--pp-ease) both;
}

html[data-pp-ui] .pp-toast::before {
  content: "i";
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  color: var(--pp-info);
  background: var(--pp-info-soft);
  font-family: var(--pp-font-serif);
  font-weight: 800;
}

html[data-pp-ui] .pp-toast[data-tone="success"]::before {
  content: "✓";
  color: var(--pp-success);
  background: var(--pp-success-soft);
  font-family: var(--pp-font-sans);
}

html[data-pp-ui] .pp-toast[data-tone="error"]::before {
  content: "!";
  color: var(--pp-danger);
  background: var(--pp-danger-soft);
  font-family: var(--pp-font-sans);
}

html[data-pp-ui] .pp-toast p {
  margin: 0.18rem 0 0;
  color: inherit;
  font-size: 0.86rem;
  line-height: 1.45;
}

html[data-pp-ui] .pp-toast-close {
  display: grid !important;
  place-items: center;
  width: 1.8rem;
  min-width: 1.8rem;
  height: 1.8rem;
  min-height: 1.8rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: var(--pp-text-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 1rem !important;
}

html[data-pp-ui] .pp-toast.is-leaving {
  opacity: 0;
  transform: translateX(1rem);
  transition: opacity var(--pp-duration), transform var(--pp-duration);
}

@keyframes pp-toast-in {
  from { opacity: 0; transform: translateY(-0.6rem) scale(0.98); }
}

@media (max-width: 40rem) {
  html[data-pp-ui] .pp-toast-region {
    top: 0.6rem;
    right: 0.6rem;
    width: calc(100vw - 1.2rem);
  }
}