/* 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);
  /* 0.7x density. NOTE what is NOT touched in this file: `.card-surface--feature` must keep
     `background: transparent` AND a RESTING `var(--sh-lg)` float (invariants 12 and 12b -
     transparent must never collapse into flat), and `.card-surface--plan-featured` carries
     the LOCKED money-screen selection ladder. Both are read-only ground for a restyle. */
  padding: clamp(1.05rem, .85rem + 1.7vw, 1.7rem);
  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: 2.5rem; height: 2.5rem;
  border-radius: var(--r);
  display: grid; place-items: center;
  font-size: 1.25rem;
  margin-bottom: var(--space-7);
}
.card-surface__title,
.card-surface--feature h3,
.card-surface--state h3,
.card-surface--auth h3 {
  font-size: var(--t-h3);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-3);
}
.card-surface__body,
.card-surface--feature p,
.card-surface--state p,
.card-surface--auth p {
  font-size: var(--t-sm);
  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. NON-SEPARATOR SURFACE (motivated-fill rule,
   UI_CONTRACTS.md): these marketing tiles are not separators, so the variant OVERRIDES the
   shared base fill + float and SHARES the parent canvas. Separation is carried by the hairline
   border (inherited from the base), spacing, the lit icon chip, and the type hierarchy - never
   a fill, a drop-shadow float, or a brand edge-highlight. */
.card-surface--feature {
  border-radius: var(--r-lg);
  /* NON-SEPARATOR SURFACE (motivated-fill rule): transparent + SOFT cues ONLY - but removing the
     base fill/float is MOTIVATED only because a perceptible replacement takes their place, so the
     tile still POPS as a distinct RAISED unit (owner 2026-07-23 refinement: transparency must never
     collapse into a flat, undifferentiated block). No fill and no HARD border: the barely-there
     hairline (inherited from the base) defines the edge, a top-edge inner highlight reads as a
     raised bevel, a real --sh-lg float lifts the tile off the ground, and the lit icon chip + type
     hierarchy + grid rhythm complete the separation. A hard opaque edge would re-pop it as "bad
     theming"; a flat, elevation-less surface would blend into the ground - both are the defect. */
  background: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), var(--sh-lg);
}
/* Hover: the lift grows - a brighter bevel over a bigger float - never a hard border or brand fill/glow. */
.card-surface--feature:hover,
.card-surface--feature:focus-within {
  transform: translateY(-4px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 28px 64px rgba(0, 0, 0, .55), 0 6px 16px rgba(0, 0, 0, .32);
}
.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: var(--t-xs); font-weight: 600; color: var(--action-primary-fg);
  letter-spacing: .1em; 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: var(--t-h3); font-weight: 600;
  color: var(--text); margin-bottom: .3rem;
}
.card-surface__plan-tagline {
  font-size: var(--t-sm); color: var(--text-3); margin-bottom: var(--space-7);
}
.card-surface__plan-price { margin-bottom: var(--sp-xl); }
/* THE PRICE IS A DISPLAY NUMBER. The incoming system draws its display type at the display
   WEIGHT with tight tracking - hierarchy from size, never from a heavier stroke - and prices
   gain tabular figures so a row of plan cards aligns digit-for-digit instead of drifting.
   This changes the money surface's TYPE only; the LOCKED selection ladder (border / ring /
   rung on `.selected` and `--plan-featured`) is untouched. */
.card-surface__plan-price .amount {
  font-size: clamp(2.25rem, 1.5rem + 4vw, 3rem);
  font-weight: var(--fw-display); letter-spacing: -.04em; line-height: 1; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.card-surface__plan-price .period { font-size: var(--t-sm); color: var(--text-3); }
.card-surface__plan-price-annual {
  margin-top: .5rem; font-size: var(--t-sm); color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.card-surface__plan-price-vat { margin-top: .25rem; font-size: var(--t-xs); 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: var(--t-sm);
}
.card-surface__plan-spec-key { color: var(--text-3); }
.card-surface__plan-spec-val { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.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: var(--t-sm); 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;
}