/* ==========================================================================
   pricing-compare — SHARED comparison-matrix kit. Loads on BOTH /pricing and
   /compare, core-first: site.css -> pricing-compare.css -> (pricing.css | compare.css).
   Holds only the primitives both routes render identically: the .pricing-bar
   shared shape and the comparison-table grid + row/feature/cell structure.
   Route-specific surfaces (Pricing tier cards / quota / marks / mobile chips;
   Compare layout + state marks) live in their own route module. Never add a
   hard priority override here — the Compare route's loaded CSS is asserted to
   hold zero of them (see ticket 07 exit gate).
   ========================================================================== */

/* .pricing-bar — shared shape for the inline compare-table header (both routes).
   Pricing-only chrome (labels, targets, sticky/floating bar) stays in pricing.css. */
.pricing-bar {
    display: grid;
    grid-template-columns: minmax(0, 2.5fr) repeat(4, minmax(0, 1fr));
    gap: 4px;
    align-items: center;
    padding: 8px 12px;
}
.pricing-bar-spacer {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px 4px 4px 0;
    font-size: 0.75rem;
    color: var(--ink-3);
}
.pricing-bar-tier {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    color: var(--ink-2);
    padding: 8px 8px;
    border-radius: var(--r-sm);
    transition: background 120ms ease;
    font-size: 0.8125rem;
    text-align: center;
}
.pricing-bar-name {
    font-weight: 600;
    color: var(--ink);
    font-size: 0.8125rem;
}

/* Inline header variant: lives inside .pricing-compare-panel, so its grid
   template is already supplied by .pricing-compare-header/.pricing-bar above.
   Bleeds horizontally to match the tinted rows (see below). */
.pricing-compare-header.pricing-bar {
    margin: 0 -16px;
    padding: 4px 16px 12px;
    border-bottom: 1px solid var(--border);
}

@media (max-width: 1024px) {
    .pricing-bar {
        grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr));
    }
}

/* ==========================================================================
   Comparison table — shared square panel, grid header/rows, feature + cell
   structure. Cell CONTENT (marks / quota pills / chips on Pricing, state marks
   on Compare) is authored per route.
   ========================================================================== */
.pricing-compare-panel {
    margin-top: 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 8px 24px 24px;
}
.pricing-compare-header,
.pricing-compare-row {
    display: grid;
    grid-template-columns: minmax(0, 2.5fr) repeat(4, minmax(0, 1fr));
    align-items: stretch;
}
.pricing-compare-header {
    margin-top: 0;
}
.pricing-compare-group { margin-top: 14px; }
.pricing-compare-group-title {
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding: 18px 0 8px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    gap: 8px;
}
.pricing-group-icon {
    width: 16px;
    height: 16px;
    color: var(--ink-2);
    flex-shrink: 0;
}
/* Rows bleed ~16px past the text on both sides so the zebra tint and hover
   breathe instead of starting flush on the first word. The negative margin
   is cancelled by equal padding, so column widths still line up with the
   header (which bleeds identically above). */
.pricing-compare-row {
    margin: 0 -16px;
    padding: 0 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    border-radius: var(--r-sm);
}
.pricing-compare-row:nth-child(even) { background: rgba(255,255,255,0.02); }
.pricing-compare-row:last-child { border-bottom: 0; }
.pricing-compare-row:hover { background: rgba(255,255,255,0.04); }
.pricing-compare-feature {
    padding: 14px 12px 14px 0;
    color: var(--ink-2);
}
.pricing-compare-feature-name {
    color: var(--ink);
    font-weight: 600;
    font-size: 0.9375rem;
    margin-bottom: 4px;
}
.pricing-compare-feature-desc {
    color: var(--ink-3);
    font-size: 0.8125rem;
    line-height: 1.5;
}
.pricing-compare-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 12px;
}

@media (max-width: 1024px) {
    .pricing-compare-header,
    .pricing-compare-row {
        grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr));
    }
}

/* Shared mobile panel padding — both routes tighten the panel at ≤768px.
   (Compare's cell/row/header mobile treatment is authored per route.) */
@media (max-width: 768px) {
    .pricing-compare-panel {
        padding: 8px 16px 16px;
    }
}