/* Shared card-surface component.
   Modern card foundation derived from the public price-preview aesthetic
   (.pricing-highlight, app/static/css/public/shell.css) + the elevated
   surface treatment used by the deploy/server cards. One foundation, several
   semantic variants. Imported by app/templates/public_base.html family_styles;
   inherited by the public, error, and auth tile consumers that extend it. */

/* --- Foundation ------------------------------------------- */
.card-surface {
  position: relative;
  min-width: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045) 0%, rgba(255, 255, 255, 0) 16%),
    linear-gradient(180deg, rgba(17, 31, 53, .94) 0%, rgba(8, 15, 31, .98) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: clamp(1.25rem, 1rem + 2vw, 2rem);
  box-shadow: 0 18px 36px rgba(2, 6, 23, .14);
  transition: border-color var(--base), transform var(--base), box-shadow var(--base);
}
.card-surface:hover,
.card-surface:focus-within {
  border-color: var(--border-m);
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(96, 165, 250, .18), 0 24px 42px rgba(2, 6, 23, .2);
}

/* Shared internal pieces (icon, heading, body) reused across variants. */
.card-surface__icon {
  width: 3rem; height: 3rem;
  border-radius: var(--r);
  display: grid; place-items: center;
  font-size: 1.375rem;
  margin-bottom: 1.25rem;
}
.card-surface__title,
.card-surface--feature h3,
.card-surface--state h3,
.card-surface--auth h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .6rem;
}
.card-surface__body,
.card-surface--feature p,
.card-surface--state p,
.card-surface--auth p {
  font-size: .9375rem;
  color: var(--text-2);
  line-height: 1.65;
}

/* --- Variant: marketing feature surface ------------------- */
/* Used by the landing-page "Everything you need" tiles and the pricing-page
   "Included with every plan" tiles. Marketing emphasis (hover lift). */
.card-surface--feature {
  border-radius: var(--r-lg);
}

/* --- Variant: state tile (errors) ------------------------- */
/* Calmer surface for error/empty/message states. No marketing hover lift. */
.card-surface--state {
  display: grid;
  gap: 1rem;
  align-content: start;
  border-radius: var(--r-lg);
}
.card-surface--state:hover,
.card-surface--state:focus-within {
  transform: none;
  box-shadow: 0 18px 36px rgba(2, 6, 23, .14);
}
.card-surface--state .card-surface__icon {
  margin-bottom: 0;
}

/* --- Variant: auth utility tile --------------------------- */
/* Compact auth-flow surface (resend verification, account utilities). */
.card-surface--auth {
  display: grid;
  gap: 1rem;
  align-content: start;
  background: rgba(12, 24, 41, .56);
  border-radius: var(--r-lg);
  box-shadow: none;
}
.card-surface--auth:hover,
.card-surface--auth:focus-within {
  transform: none;
  box-shadow: none;
}
.card-surface--auth .card-surface__icon {
  margin-bottom: 0;
}
.card-surface--auth strong {
  color: var(--text);
}

/* --- Variant: plan surface (pricing plan cards) ----------- */
/* Whole-surface clickable plan card: the element is an <a> wrapping the price,
   spec, feature list and a non-interactive CTA. Single navigable target,
   no nested interactive elements (web-coder: no nested interactive). */
.card-surface--plan {
  display: block;
  border-radius: var(--r-xl);
  padding: clamp(1.35rem, 1rem + 2.5vw, 2.25rem);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.card-surface--plan:hover,
.card-surface--plan:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgba(96, 165, 250, .22), var(--sh-lg);
}
.card-surface--plan:focus-visible {
  outline: 2px solid rgba(96, 165, 250, .85);
  outline-offset: 3px;
}
.card-surface--plan-featured {
  border-color: rgba(75, 140, 247, .4);
  background:
    linear-gradient(155deg, var(--surface-2) 0%, rgba(75, 140, 247, .07) 100%);
  box-shadow: 0 0 0 1px rgba(75, 140, 247, .25), var(--sh-lg);
}
.card-surface--plan-featured:hover,
.card-surface--plan-featured:focus-within {
  border-color: rgba(75, 140, 247, .6);
}

.card-surface__plan-popular {
  position: absolute; top: -1rem; left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: .3rem .9rem;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brand), var(--purple));
  font-size: .75rem; font-weight: 700; color: #fff;
  letter-spacing: .05em; text-transform: uppercase;
}
.card-surface__plan-name {
  font-size: 1.0625rem; font-weight: 700;
  color: var(--text); margin-bottom: .3rem;
}
.card-surface__plan-tagline {
  font-size: .875rem; color: var(--text-3); margin-bottom: 1.5rem;
}
.card-surface__plan-price { margin-bottom: 1.75rem; }
.card-surface__plan-price .currency {
  font-size: 1.375rem; font-weight: 700; vertical-align: top;
  margin-top: .5rem; display: inline-block; color: var(--text-2);
}
.card-surface__plan-price .amount {
  font-size: clamp(2.25rem, 1.5rem + 4vw, 3rem);
  font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--text);
}
.card-surface__plan-price .period { font-size: .9375rem; color: var(--text-3); }
.card-surface__plan-specs {
  display: grid; gap: .625rem;
  padding: clamp(.85rem, .6rem + 1.5vw, 1.125rem);
  background: rgba(0, 0, 0, .2); border-radius: var(--r); margin-bottom: 1.5rem;
}
.card-surface__plan-spec {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .875rem;
}
.card-surface__plan-spec-key { color: var(--text-3); }
.card-surface__plan-spec-val { font-weight: 600; color: var(--text); }
.card-surface__plan-feats { display: grid; gap: .6rem; margin-bottom: 1.75rem; }
.card-surface__plan-feat {
  display: flex; align-items: center; gap: .625rem;
  font-size: .875rem; color: var(--text-2);
}
.card-surface__plan-feat::before {
  content: '\2713'; color: var(--success); font-weight: 700; flex-shrink: 0;
}
/* Non-interactive CTA: visually primary, but not a nested link/button so the
   whole card stays a single navigable target. */
.card-surface__plan-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}