/* ============================================================================
   Cards
   ----------------------------------------------------------------------------
   The core surface primitive: a hairline-bordered panel on the primary
   background. Used to group settings, data and report sections.
   ============================================================================ */

@layer components {
  .card {
    /* The primary surface, with a scrolled-edge hint layered on top: when a
       too-wide table clips, a soft haze marks the edge hiding more columns.
       The shadow gradients pin to the box while the surface-colored covers
       scroll with the content (`local`), so each hint shows only while there
       is more that way; a card that fits shows none. */
    background:
      linear-gradient(to right, var(--bg-primary) 40%, transparent) left center,
      linear-gradient(to left, var(--bg-primary) 40%, transparent) right center,
      radial-gradient(farthest-side at 0 50%, var(--scroll-shadow), transparent) left center,
      radial-gradient(farthest-side at 100% 50%, var(--scroll-shadow), transparent) right center,
      var(--bg-primary);
    background-repeat: no-repeat;
    background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
    border: 0.5px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    /* Clip children to the rounded corners, but let a too-wide table (e.g. the
       members table on a phone) scroll sideways rather than be cut off. */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    /* Keep the card clear of a trailing footer/form/section that follows with
       no top margin of its own. Collapses harmlessly into the larger top margin
       of a following <h2>. */
    margin-bottom: var(--space-5);
  }

  /* A phone-width column would crush a card's table into tall slivers of
     wrapped text; a floor on the table keeps its columns readable and lets
     the card scroll sideways instead (which the edge haze above signposts). */
  @media (max-width: 640px) {
    .card > table { min-width: 560px; }
  }

  .card-body {
    padding: var(--space-5);
    /* Bodies carry user text; a long unbroken run (a pasted URL) wraps
       rather than putting the whole card into horizontal scroll. */
    overflow-wrap: break-word;
  }
  /* The body's padding is the bottom spacing; a trailing paragraph or form
     row shouldn't stack its own margin on top of it. */
  .card-body > :last-child { margin-bottom: 0; }

  /* When a table is the whole body of a card, let it run edge to edge with
     padded cells instead of doubling up the inset. */
  .card > table th,
  .card > table td { padding-left: var(--space-5); padding-right: var(--space-5); }

  /* --- Stat tile ----------------------------------------------------------- */
  /* The recurring "stat tile" surface: a hairline panel on the secondary
     background, one step down from .card. Shared by usage meters, report
     metrics/trends/share charts, and the AI summary disclosure — add this
     class alongside a component's own layout class rather than redeclaring
     the surface. */
  .tile {
    background: var(--bg-secondary);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
  }

  /* Quiet label + big tabular-nums figure — the stat-tile shape shared by the
     usage meters and the report metrics/trends grid. Each context sets its
     own figure font-size (headline stat vs. compact grid). */
  .metrics-grid dt, .usage-label { font-size: 11px; color: var(--text-secondary); }
  .metrics-grid dd, .usage-value {
    margin: var(--space-1) 0 0;
    font-weight: 500;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }

  /* --- Usage meters ------------------------------------------------------ */
  /* Plan usage as a row of stat tiles: caption, headline count over its
     limit, and a progress bar that warms to amber and then red as the limit
     approaches. Unlimited (Pro) tiles drop the bar; because a plan's limits
     are all finite or all infinite, every tile in a given card stays
     visually consistent. */
  .usage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
  }
  .usage-item {
    display: flex;
    flex-direction: column;
  }

  .usage-note { color: var(--text-tertiary); }
  /* Flexes to fill the tile so the track below lands on the bottom edge, and
     an unlimited tile (no track) ends flush with the padding. */
  .usage-value {
    flex: 1;
    font-size: 22px;
  }
  .usage-limit {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--text-tertiary);
  }
  /* Approaching or at the cap, the tile's own border warms with the bar so
     the warning reads at tile size, not only in the 6px track; at the cap the
     surface washes red and the headline count follows, so the tile reads as
     blocked even at a glance. */
  .usage-item.is-high { border-color: color-mix(in srgb, var(--chart-3) 45%, var(--border)); }
  .usage-item.is-full {
    border-color: color-mix(in srgb, var(--down) 45%, var(--border));
    background: color-mix(in srgb, var(--down) 5%, var(--bg-secondary));
  }
  .usage-item.is-full .usage-value { color: var(--down); }

  /* The track tints with the border token rather than a surface tier: on the
     tile's secondary background, bg-tertiary all but disappears in the light
     theme. */
  .usage-track {
    height: 6px;
    margin-top: var(--space-3);
    border-radius: var(--radius-full);
    background: var(--border);
    overflow: hidden;
  }
  .usage-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
    transition: width var(--speed) var(--ease-out);
  }
  .usage-fill.is-high { background: var(--chart-3); }
  .usage-fill.is-full { background: var(--down); }

  /* --- Plan cards --------------------------------------------------------- */
  /* The billing page's plans, side by side (stacking on a phone): name and
     the Current badge, the price, the limits as a checklist, and the upgrade
     button pinned to the bottom edge so the cards' footers stay aligned. */
  .plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
  }
  .plan-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
  }
  /* Side-by-side cards share their internal rows (head, tagline, price,
     features, CTA), so a tagline that wraps on one card can't push its price
     out of line with the neighbor's. Spacing stays with the children's own
     margins — the inherited grid gap is zeroed out — and browsers without
     subgrid keep the flex-column layout above. */
  @supports (grid-template-rows: subgrid) {
    .plan-card {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 5;
      row-gap: 0;
    }
    .plan-cta { align-self: end; }
  }
  /* The org's own plan carries an accent ring; the primary upgrade button
     spotlights Starter, so "where am I" is the card-level signal. */
  .plan-card.is-current {
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), var(--shadow-sm);
  }

  .plan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
  }
  .plan-name { font-size: 13.5px; font-weight: 500; }
  .plan-tagline {
    margin: var(--space-1) 0 0;
    font-size: 12.5px;
    color: var(--text-secondary);
  }

  .plan-price {
    margin: var(--space-3) 0 var(--space-4);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .plan-period {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--text-tertiary);
  }

  /* A hairline sets the checklist apart from the name/price block, mirroring
     the card's own border so both plans share the same internal structure
     whether or not a CTA follows. */
  .plan-features {
    list-style: none;
    margin: 0;
    padding: var(--space-2) 0 0;
    border-top: 0.5px solid var(--border);
    font-size: 13px;
    color: var(--text-secondary);
  }
  .plan-features li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: var(--space-2) 0;
  }
  /* Pinned to the first line so a wrapped feature and its period note don't
     float the check between lines; the 3px nudge centers the 14px icon in the
     13px text's ~20px line box. */
  .plan-features .tabler-icon {
    flex: none;
    margin-top: 3px;
    color: var(--up);
  }
  .plan-note { color: var(--text-tertiary); }

  .plan-cta { margin-top: auto; padding-top: var(--space-4); }
  .plan-cta form.button_to { display: block; }
  .plan-cta .btn { width: 100%; }
  /* A non-owner gets an explanation in the button's slot instead of a bare
     gap; centered so it mirrors the full-width button it stands in for. */
  .plan-cta-note {
    margin: 0;
    font-size: 12px;
    color: var(--text-tertiary);
    text-align: center;
  }

  /* --- Project dashboard cards --------------------------------------------- */
  /* The projects index as a portfolio: one outcome card per project (latest
     mention rate and movement, report health, open opportunities), replacing
     the old configuration-count table. */
  .project-cards {
    list-style: none;
    margin: 0 0 var(--space-5);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
  }
  .project-cards > li { margin: 0; }
  .project-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg-primary);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4) var(--space-5);
  }
  .project-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
  }
  .project-card-head .pill { flex: none; }
  .project-card-name { margin: 0; font-size: 14px; }
  /* The single mention-rate tile reuses the pulse's stat-tile anatomy; the
     grid collapses to one column so the tile fills the card's width. */
  .project-card-pulse { grid-template-columns: minmax(0, 1fr); }
  .project-card-pulse dd {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .project-card-pulse dt[title] { cursor: help; }
  .project-card-meta {
    margin: var(--space-2) 0 0;
    font-size: 12.5px;
  }
  .project-card-setup-cta { margin: var(--space-3) 0 0; }
  /* Health and opportunity chips pin to the card's bottom edge so a row of
     cards keeps its footers aligned whether or not a card has a metric. */
  .project-card-flags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-3);
  }

  /* --- Project setup guide -------------------------------------------------- */
  /* The guided path to a project's first report, in the overview slot the
     visibility pulse takes over once the project is measured. Steps stack in
     one hairline-divided card; the first unfinished step carries an accent. */
  .setup-guide { margin: var(--space-5) 0 var(--space-6); }
  .setup-guide-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    margin-bottom: var(--space-3);
  }
  .setup-guide-header h2,
  .setup-guide-header p { margin: 0; }
  .setup-guide-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--bg-primary);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }
  .setup-guide-step {
    display: flex;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-4) var(--space-5);
  }
  .setup-guide-step + .setup-guide-step { border-top: 0.5px solid var(--border); }
  .setup-guide-step.is-current {
    background: color-mix(in srgb, var(--accent) 4%, var(--bg-primary));
  }
  /* The step marker: its number while pending, a check once done, an accent
     ring on the current step. */
  .setup-guide-marker {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
  }
  .setup-guide-step.is-done .setup-guide-marker {
    background: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success-text);
  }
  .setup-guide-step.is-current .setup-guide-marker {
    border-color: var(--accent);
    color: var(--accent);
  }
  .setup-guide-copy { min-width: 0; }
  .setup-guide-title { margin: 0; font-weight: 500; }
  .setup-guide-step.is-done .setup-guide-title { color: var(--text-secondary); }
  .setup-guide-description {
    margin: var(--space-1) 0 0;
    font-size: 12.5px;
    max-width: 68ch;
  }
  .setup-guide-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin-top: var(--space-3);
  }

  /* --- Billing portal row -------------------------------------------------- */
  /* The Stripe-portal handoff on the billing page: explanatory copy beside the
     button, wrapping to stacked rows on a narrow screen. */
  .billing-portal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
    padding: var(--space-4) var(--space-5);
  }
  .billing-portal-hint {
    flex: 1 1 320px;
    margin: 0;
    font-size: 12.5px;
    color: var(--text-secondary);
  }
  .billing-portal form.button_to { flex: none; }
}