/* Shared resource unlock and membership dialog contract.
   Home and detail pages must load this file instead of defining local variants. */
.resource-unlock-overlay {
  position:fixed;
  inset:0;
  z-index:var(--layer-dialog);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-dialog-pad);
  background:var(--visual-overlay-modal);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-family:var(--font-family-ui);
  font-size:var(--type-dialog-copy);
  font-weight:var(--font-weight-body);
  line-height:var(--leading-meta);
  -webkit-font-smoothing:var(--font-smoothing-ui);
  text-rendering:var(--text-rendering-ui);
  font-variant-numeric:var(--font-variant-numeric-ui);
  color:var(--text-primary);
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* The dialog is a shared component boundary. Page-level resets must not alter
   its box model or transient tap feedback on either home or detail pages. */
.resource-unlock-overlay,
.resource-unlock-overlay *,
.resource-unlock-overlay *::before,
.resource-unlock-overlay *::after {
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}

.resource-unlock-overlay button {
  margin:0;
  font:inherit;
  cursor:pointer;
  touch-action:manipulation;
  appearance:none;
  -webkit-appearance:none;
}

.resource-unlock-panel {
  width:min(var(--size-scale-px-432), calc(100vw - var(--space-dialog-pad) - var(--space-dialog-pad)));
  max-height:calc(100vh - var(--space-dialog-pad) - var(--space-dialog-pad));
  max-height:calc(100dvh - var(--space-dialog-pad) - var(--space-dialog-pad));
  overflow-x:hidden;
  overflow-y:auto;
  border:1px solid var(--border);
  border-radius:var(--radius-ui-lg);
  background:var(--visual-dialog-surface);
  box-shadow:var(--shadow-dialog);
  /* Pinned: the two pages set different body typography (home 16px/1.5,
     detail a clamped mobile density), which leaked into this dialog and made
     the same component render differently per page. Every child declares its
     own size, so this only cuts the inheritance channel. Radii come from the
     shared --radius-ui-* primitives rather than the --radius-* alias, which
     home overrides on mobile and detail does not. */
  font-family:var(--font-family-ui);
  font-size:var(--type-dialog-copy);
  font-weight:var(--font-weight-body);
  line-height:var(--leading-meta);
  -webkit-font-smoothing:var(--font-smoothing-ui);
  text-rendering:var(--text-rendering-ui);
  font-variant-numeric:var(--font-variant-numeric-ui);
}

.resource-unlock-overlay .support-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-dialog-gap);
  padding:var(--space-dialog-pad);
}

.resource-unlock-overlay .support-heading {
  min-width:0;
  display:flex;
  align-items:center;
  gap:var(--space-dialog-gap);
}

.resource-unlock-overlay .support-logo {
  width:var(--size-dialog-logo);
  height:var(--size-dialog-logo);
  border-radius:var(--radius-ui-md);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  background:var(--bg-card);
  border:1px solid var(--accent-border-soft);
  box-shadow:var(--shadow-surface-hairline);
  color:var(--accent);
  font-size:var(--type-section);
  font-weight:900;
  letter-spacing:-0.02em;
}

.resource-unlock-overlay .support-title {
  color:var(--text-primary);
  font-size:var(--type-dialog-title);
  font-weight:850;
  line-height:var(--leading-title);
}

.resource-unlock-overlay .support-close {
  width:var(--size-dialog-control);
  height:var(--size-dialog-control);
  border-radius:var(--radius-ui-sm);
  color:var(--text-muted);
  background:var(--bg-surface);
  border:1px solid var(--border);
  font-size:var(--type-dialog-title);
  line-height:1;
}

.resource-unlock-overlay .support-primary,
.resource-unlock-overlay .support-secondary {
  /* width/white-space are pinned here so the homepage's global .support-*
     button rules cannot make this dialog differ from the detail page. */
  width:auto;
  min-height:var(--size-dialog-control);
  border-radius:var(--radius-ui-sm);
  padding:0 var(--space-dialog-pad);
  font-size:var(--type-control);
  font-weight:800;
  white-space:nowrap;
  transition:background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.resource-unlock-overlay .support-primary:active:not(:disabled),
.resource-unlock-overlay .support-secondary:active:not(:disabled) {
  transform:translateY(1px);
}

.resource-unlock-overlay .support-primary {
  border:1px solid var(--accent);
  background:var(--accent);
  color:var(--text-on-accent);
}

.resource-unlock-overlay .support-secondary {
  border:1px solid var(--border);
  background:var(--bg-surface);
  color:var(--text-primary);
}

.resource-unlock-overlay .support-primary:disabled,
.resource-unlock-overlay .support-secondary:disabled {
  opacity:var(--opacity-disabled);
  cursor:not-allowed;
}

/* Unlock hierarchy: membership is the gold primary action, credits the secondary.
   Lives here so home and detail cannot drift apart again. */
.resource-unlock-overlay .resource-unlock-actions .support-primary {
  border:1px solid transparent;
  background:var(--accent);
  color:var(--text-on-accent);
  font-weight:900;
  box-shadow:var(--shadow-accent-control);
}

.resource-unlock-overlay .resource-unlock-actions .support-secondary {
  border:1px solid var(--border);
  background:var(--bg-surface);
  color:var(--text-secondary);
  font-weight:800;
}

.resource-unlock-overlay .resource-unlock-actions .support-primary:hover:not(:disabled) {
  background:var(--visual-accent-bright);
}

.resource-unlock-overlay .resource-unlock-actions .support-secondary:hover:not(:disabled) {
  border-color:var(--accent-dim);
  color:var(--text-primary);
}

.resource-unlock-body {
  padding:0 var(--space-dialog-pad) var(--space-dialog-pad);
  display:grid;
  gap:var(--space-dialog-gap);
}

.resource-unlock-card {
  display:grid;
  gap:var(--space-dialog-gap);
  padding:var(--space-dialog-card-pad);
  border:1px solid var(--accent-border-soft);
  border-radius:var(--radius-ui-md);
  background:var(--visual-highlight-panel);
}

.resource-unlock-kicker {
  color:var(--accent);
  font-size:var(--type-kicker);
  line-height:var(--leading-section);
  font-weight:850;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.resource-unlock-title {
  color:var(--text-primary);
  font-size:var(--type-card-title);
  line-height:var(--leading-meta);
  font-weight:850;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.resource-unlock-copy,
.resource-unlock-meta {
  margin:0;
  color:var(--text-muted);
  font-size:var(--type-dialog-copy);
  line-height:var(--leading-copy);
}

.resource-unlock-meta { color:var(--text-secondary); }
.resource-unlock-actions { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-dialog-gap); }
.resource-membership-list { display:grid; gap:var(--space-dialog-gap); }

.resource-membership-card {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--space-dialog-gap);
  align-items:center;
  border:1px solid var(--border);
  border-radius:var(--radius-ui-md);
  padding:var(--space-dialog-card-pad);
  background:var(--bg-surface);
  transition:border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.resource-membership-card.is-selected,
.resource-membership-card:has(:focus-visible) {
  border-color:var(--accent);
  background:var(--visual-selected-surface);
  box-shadow:var(--shadow-selected-inset);
}

@media (hover:hover) and (pointer:fine) {
  .resource-membership-card:hover {
    border-color:var(--accent);
    background:var(--visual-selected-surface);
    box-shadow:var(--shadow-selected-inset);
  }

  .resource-membership-list:has(.resource-membership-card:hover) .resource-membership-card.is-selected:not(:hover) {
    border-color:var(--border);
    background:var(--bg-surface);
    box-shadow:none;
  }
}

.resource-membership-name {
  color:var(--text-primary);
  font-size:var(--type-card-title);
  font-weight:850;
  line-height:var(--leading-section);
  overflow-wrap:anywhere;
}

.resource-membership-meta {
  margin-top:var(--space-dialog-gap);
  color:var(--text-muted);
  font-size:var(--type-dialog-meta);
  line-height:var(--leading-meta);
}

.resource-membership-benefits {
  margin:var(--space-dialog-gap) 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:var(--space-dialog-gap);
  color:var(--text-muted);
  font-size:var(--type-dialog-meta);
  line-height:var(--leading-meta);
}

.resource-membership-benefits li:before {
  content:"•";
  color:var(--accent);
  margin-right:var(--space-scale-px-5);
}

.resource-membership-benefits li.is-standout { color:var(--text-primary); font-weight:900; }
.resource-membership-price-block { display:grid; gap:var(--space-scale-px-1); margin-top:var(--space-dialog-gap); align-content:end; }
.resource-membership-original-price { color:var(--text-muted); font-size:var(--type-dialog-meta); line-height:var(--leading-meta); text-decoration:line-through; text-decoration-thickness:1px; white-space:nowrap; }
.resource-membership-price { color:var(--accent); font-size:var(--type-dialog-price); font-weight:920; line-height:1.05; white-space:nowrap; font-variant-numeric:tabular-nums; }
.resource-membership-card .support-primary { min-width:var(--size-dialog-action-min); }
.resource-membership-alt-payment { justify-self:end; border:0; background:transparent; color:var(--text-muted); padding:var(--space-scale-px-2) 0; font-size:var(--type-dialog-meta); line-height:var(--leading-meta); text-decoration:underline; text-underline-offset:3px; }
.resource-membership-alt-payment:hover { color:var(--text-primary); }

@media (max-width:480px) {
  .resource-unlock-overlay { align-items:center; padding:var(--space-dialog-pad); }
  .resource-unlock-panel {
    width:min(var(--size-scale-px-432), calc(100vw - var(--space-dialog-pad) - var(--space-dialog-pad)));
    max-height:calc(100vh - var(--space-dialog-pad) - var(--space-dialog-pad));
    max-height:calc(100dvh - var(--space-dialog-pad) - var(--space-dialog-pad));
  }
  .resource-unlock-panel.is-membership .resource-membership-card,
  .resource-unlock-panel.is-credits .resource-membership-card { grid-template-columns:minmax(0,1fr) auto; }
  .resource-unlock-panel.is-membership .support-primary,
  .resource-unlock-panel.is-credits .support-primary { width:auto; min-width:var(--size-scale-px-88); }
}