/* 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;
  /* SURFACE OWNER (Single-Owner Surface Rule). Opaque RAISED rung + a separate top-sheen
     highlight layer - the sheen is a HIGHLIGHT, not a surface. Previously this
     re-declared the exact literal that --surface-card already owns, which
     UI_CONTRACTS.md forbids ("family stylesheets CONSUME these tokens; they must never
     re-declare the underlying literals").
     The two --rung-* declarations are what discharge the nested-surface class: EVERY
     input and button inside EVERY card now steps to the correct rung automatically,
     with no per-component override. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045) 0%, rgba(255, 255, 255, 0) 16%),
    var(--surface-1);
  --rung-field:   var(--surface-0);   /* a field inside a card RECESSES */
  --rung-control: var(--surface-2);   /* a button inside a card RAISES  */
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-xl);
  padding: clamp(1.25rem, 1rem + 2vw, 2rem);
  box-shadow: 0 18px 36px rgba(0, 0, 0, .14);
  transition: border-color var(--base), transform var(--base), box-shadow var(--base);
}
.card-surface:hover,
.card-surface:focus-within {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(var(--brand-light-rgb), .18), 0 24px 42px rgba(0, 0, 0, .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 (designed top-edge
   highlight line + a richer hover lift than the calmer base). */
.card-surface--feature {
  border-radius: var(--r-lg);
}
.card-surface--feature::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--edge-highlight);
  opacity: .5;
  pointer-events: none;
  transition: opacity var(--base);
}
.card-surface--feature:hover,
.card-surface--feature:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgba(var(--brand-rgb),.22), 0 28px 50px rgba(0, 0, 0, .26);
}
.card-surface--feature:hover::before,
.card-surface--feature:focus-within::before {
  opacity: 1;
}
.card-surface--feature h3 {
  letter-spacing: -.01em;
}

/* --- 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(0, 0, 0, .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: var(--surface-1);
  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(var(--brand-light-rgb), .22), var(--sh-lg);
}
/* The plan card IS the <a> (whole-surface clickable), so `.card-surface--plan:focus-within`
   above (0,2,0) OUTRANKS the global `a:focus-visible` (0,1,1) and its box-shadow REPLACED
   the dual ring. Re-establish the dual ring here; the brand-light outline stays. */
.card-surface--plan:focus-visible {
  outline: 2px solid rgba(var(--brand-light-rgb), .85);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--focus-ring-inner), 0 0 0 4px var(--focus-ring), var(--sh-lg);
}
.card-surface--plan-featured {
  border-color: rgba(var(--brand-rgb), .45);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 16%),
    linear-gradient(155deg, var(--surface-2) 0%, rgba(var(--brand-rgb), .09) 100%);
  box-shadow: 0 0 0 1px rgba(var(--brand-rgb), .32), 0 24px 50px rgba(var(--brand-rgb), .10), var(--sh-lg);
}
.card-surface--plan-featured:hover,
.card-surface--plan-featured:focus-within {
  border-color: rgba(var(--brand-rgb), .6);
}
/* WCAG AA RESTORE (SC 1.4.3). This variant paints the CONTROL rung (--surface-2), and
   UI_CONTRACTS.md is explicit: "tertiary ink must NEVER be hosted on --surface-2" - it
   measures 4.1366:1 there, BELOW the 4.5 floor. The shared child rules below stay
   --text-3 (correct on the RAISED rung the non-featured cards paint); only the featured
   host steps its helper ink ONE rung up. --text-2 on --surface-2 = 5.1670:1. PASS.
   (.card-surface__plan-spec-key is deliberately NOT included: it sits on the spec well,
   which paints --rung-field / --surface-0, where --text-3 measures 6.51:1 - already AA.) */
.card-surface--plan-featured .card-surface__plan-tagline,
.card-surface--plan-featured .card-surface__plan-price .period,
.card-surface--plan-featured .card-surface__plan-price-annual,
.card-surface--plan-featured .card-surface__plan-price-vat {
  color: var(--text-2);
}

.card-surface__plan-popular {
  position: absolute; top: -1rem; left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: .35rem .95rem;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brand), var(--purple));
  font-size: .75rem; font-weight: 700; color: var(--action-primary-fg);
  letter-spacing: .05em; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 18px rgba(var(--brand-rgb), .40);
}
.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 .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-price-annual {
  margin-top: .5rem; font-size: .9375rem; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.card-surface__plan-price-vat { margin-top: .25rem; font-size: .8125rem; color: var(--text-3); }
.card-surface__plan-specs {
  display: grid; gap: .625rem;
  padding: clamp(.85rem, .6rem + 1.5vw, 1.125rem);
  /* A spec well inside a card RECESSES - the rung, not a raw literal. */
  background: var(--rung-field); 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;
}