/* StackCapybara design kit, part 2 of 3: filters, toolbar, metrics, review hero,
   tables, timeline, matrix. Follows components.css; see its header (CF-46105). */

/* ---- Filters / chips ---- */
.filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 18px 0 28px; }
.chip {
    /* min-height, not height: the chips must be able to grow for a long
       category label without clipping it. 44px is the WCAG 2.5.5 target. */
    min-height: 44px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    font-size: 14px;
    font-weight: 760;
    color: #34413d;
    cursor: pointer;
}
.chip.active { color: #fff; background: var(--ink); border-color: var(--ink); }

/* ---- Toolbar ---- */
.toolbar {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    margin: 18px 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
}
.search-large {
    height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--muted);
    background: #f8fbf9;
    width: 100%;
    font-size: 14px;
}
.search-large input { border: 0; background: transparent; width: 100%; font: inherit; color: var(--ink); outline: none; }
.select {
    height: 48px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: #34413d;
    background: var(--panel);
    font-weight: 720;
    white-space: nowrap;
}
/* Let toolbar controls shrink to their (stacked) track on narrow screens — a
   long <select> option (e.g. "Business Banking (Malta, Cyprus & EU)") otherwise
   sets a min-content width that overflows the page at 320px. */
.toolbar > * { min-width: 0; }
.toolbar .select { max-width: 100%; }

/* ---- Sidebar ---- */
.sidebar { position: sticky; top: 98px; }
.sidebar.card h3, .card > h3:first-child { margin-bottom: 14px; }

/* ---- Metrics ---- */
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 26px 0; }
.metric {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    padding: 16px;
}
.metric strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 22px;
    line-height: 1.2;
    margin: 2px 0;
    overflow-wrap: anywhere;
}
.metric span { color: var(--muted); font-size: 13px; line-height: 1.35; }

/* ---- Review hero (single tool / stack) ---- */
.review-hero {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 30px;
    align-items: start;
    margin-bottom: 32px;
}
/* Grid items must shrink, or a long review/stack title sets the column min-width
   and overflows the page on narrow screens. */
.review-hero > * { min-width: 0; }
/* Responsive hero title: a long SEO title (e.g. "Claude Code Review (2026):
   Anthropic's Terminal-Native AI Coding Agent") overflowed at 320/375 when the
   size was a fixed 44–46px. Clamp it and allow long words to wrap. */
/* Specificity, measured 2026-08-07: the generic `.sk-page h1` size rules in
   the responsive block below are (0,1,1) and were silently beating this
   (0,1,0) rule. Effect on PROD: a long review title rendered at 38px inside a
   ~232px column on a 390px viewport — 9 lines, 362px tall, 43% of the first
   screen. The clamp was never wrong; it simply never applied. Matching the
   generic rules' specificity restores the intent of ST/1001. Do not lower it
   back to a single class. */
.sk-page h1.review-hero__h1,
.review-hero__h1 {
    font-size: clamp(22px, 6vw, 44px);
    line-height: 1.06;
    overflow-wrap: break-word;
}
/* ST-346: single-comparison.php renders a bare <h1> with no distinguishing class
   (single-stack.php already carries review-hero__h1 above, so it was already
   covered by this fix; comparisons were not), so long comparison titles
   (79-81 chars) fell through to the generic 64/52/38 ladder further down this
   file and ate up to 29% of the first screen. Same defect and same fix as
   review-hero__h1 above -- same clamp values, proven there -- scoped through
   the body class WordPress already emits for every singular template
   (body_class(), single-comparison) instead of a template edit, since
   single-comparison.php is out of this ticket's file scope. Deliberately does
   NOT touch .sk-page h1 generally: the homepage/tools-archive H1s use that same
   bare-h1 selector and must stay at their current size (measured before/after
   with ux-audit.mjs, not just this comment). */
body.single-comparison .sk-page h1 {
    font-size: clamp(22px, 6vw, 44px);
    line-height: 1.06;
    overflow-wrap: break-word;
}
.review-title {
    padding: 34px;
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, rgba(217, 244, 232, .9), rgba(255,255,255,.95)),
        radial-gradient(circle at bottom right, rgba(233,111,74,.20), transparent 40%);
    border: 1px solid #bddbd1;
}
.product-lockup { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.product-lockup > * { min-width: 0; }
.product-logo {
    width: 72px; height: 72px;
    border-radius: var(--radius);
    display: grid; place-items: center;
    background: var(--ink);
    color: #fff;
    font-size: 22px; font-weight: 900;
    flex: none;
}
.score-card { padding: 24px; border-radius: var(--radius); background: var(--ink-dark); color: #fff; }
.score-card .eyebrow { color: #a7e7ce; }
.score-card p { color: #cae5dc; }
.score-big { font-size: 76px; line-height: 1; font-weight: 900; margin: 4px 0 8px; }

/* ---- Bars / rubric ---- */
.bar { height: 9px; border-radius: 999px; background: #dfe8e2; overflow: hidden; }
.bar span { display: block; height: 100%; width: var(--w, 80%); background: linear-gradient(90deg, var(--green), var(--yellow)); }
.score-card .bar { background: rgba(255,255,255,.16); }
.rubric-row {
    display: grid;
    grid-template-columns: 150px 1fr 40px;
    gap: 14px;
    align-items: center;
    margin: 14px 0;
    font-size: 14px;
    font-weight: 740;
}
.rubric-row > span:last-child { text-align: right; }

/* ---- Tables (scoped to redesigned pages) ---- */
.sk-page table {
    width: 100%;
    border-collapse: collapse;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.sk-page th, .sk-page td {
    padding: 16px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    font-size: 14px;
}
.sk-page th {
    background: #f2f8f4;
    color: #34413d;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 800;
}
.sk-page tr:last-child td { border-bottom: 0; }

/* Horizontal-scroll wrapper for wide post_content tables (comparison matrices,
   pricing grids). sc_v2_wrap_prose_tables() wraps each <table> so a wide table
   scrolls inside its column instead of forcing the whole page to overflow on
   mobile. The min-width keeps columns readable while scrolling. */
.sc-table-scroll {
    max-width: 100%;
    margin: 0 0 18px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius);
}
.sc-table-scroll > table { margin-bottom: 0; }
@media (max-width: 720px) {
    .sc-table-scroll > table { min-width: 520px; }
}

/* ---- TOC links ---- */
.toc-link {
    display: block;
    padding: 13px 14px;
    margin-bottom: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    color: #34413d;
    font-size: 14px;
    font-weight: 720;
}
.toc-link:hover { border-color: #bddbd1; background: var(--panel-2); }

/* ---- Article shell ---- */
.article-shell {
    display: grid;
    grid-template-columns: 270px 1fr 310px;
    gap: 28px;
    align-items: start;
}
.article-shell > * { min-width: 0; }
.article-body { max-width: 820px; }
.article-body .card { margin-bottom: 18px; }

/* ---- Article shell: solo (no sidebars) ---- */
.article-shell--solo { grid-template-columns: minmax(0, 1fr); }
.article-shell--solo .article-body { max-width: 820px; margin-left: auto; margin-right: auto; }


/* ---- Timeline ---- */
.timeline { display: grid; gap: 12px; }
.timeline-item {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    align-items: start;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
}
.timeline-item h3 { margin-bottom: 4px; }
.timeline-item p { margin: 0; font-size: 14px; }

/* ---- Matrix ---- */
.matrix {
    display: grid;
    grid-template-columns: 220px repeat(4, 1fr);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--panel);
}
.matrix div {
    padding: 14px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    min-height: 60px;
    font-size: 14px;
}
.matrix div:nth-child(5n) { border-right: 0; }
.matrix .head { background: #f2f8f4; font-weight: 850; color: #34413d; }