/* 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-note { color:var(--text-muted); font-size:var(--type-dialog-meta); line-height:var(--leading-copy); margin:0; }
.resource-unlock-overlay .support-note-error { color:var(--accent-mid); }
.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-gap-cards);
}

.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 {
  margin:0;
  color:var(--text-muted);
  font-size:var(--type-dialog-copy);
  line-height:var(--leading-copy);
}

.resource-unlock-swarm { display:grid; gap:var(--space-gap-tight); }
.resource-unlock-swarm p { margin:0; color:var(--text-secondary); font-size:var(--type-dialog-copy); line-height:var(--leading-copy); }
.resource-unlock-swarm.is-low p { color:var(--swarm-low-text); }
.resource-unlock-swarm.is-none p { color:var(--swarm-none-text); }
.resource-unlock-swarm a { color:var(--accent); font-size:var(--type-dialog-copy); line-height:var(--leading-copy); }
.resource-unlock-note { margin:0; color:var(--text-muted); font-size:var(--type-dialog-meta); line-height:var(--leading-copy); }
.resource-unlock-actions { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-gap-controls); }
.resource-membership-list { display:grid; gap:var(--space-gap-cards); }

.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);
}

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

  .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); }
}