/* ============================================================================
   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);
  }

  /* --- Elevated panel ------------------------------------------------------ */
  /* The recurring "panel" surface, one step up from .tile and matching .card's
     without .card's scroll-shadow background: plan and project cards, the auth
     and help-topic cards, the report config, answers, metrics, trends,
     cited-source and history cards, and each opportunity. Same convention as
     .tile — add this class alongside the component's own layout class. The
     four declarations were spelled out nine times across four stylesheets
     before this existed, so the hairline and the elevation could drift apart
     one card at a time. */
  .panel {
    background: var(--bg-primary);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }

  /* 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); }

  /* --- Billing presentment choices ---------------------------------------- */
  /* Interval and currency share one row above the plan grid (wrapping on a
     phone), each a muted label beside a segmented control — the same hardware
     as the theme switch, so choosing how prices are shown can't be mistaken
     for the checkout action. */
  .billing-choices {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-6);
    margin-bottom: var(--space-4);
  }
  .choice-row {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  /* --- 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;
    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%;
    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;
    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; }
}