/* =====================================================================
   BROWSE / LISTING PAGES  (browse.css)

   Shared by every corpus listing and its state pages: templates, AG
   opinions, ethics opinions, tax rulings, IRS determinations, agency
   decisions, labor guidance, and the state / bar variants. The markup
   vocabulary is the one those templates already share (opinions-hero,
   search-filters-card, filters-row, results-strip, opinion-row, pgn-*).

   Structure, top to bottom, all on the theme.css grid (1200 content,
   margins var(--margin), 8px baseline):
     title row      h1 left, one-line lead + live counts right  (paper)
     filter bar     one hairline row: search, selects, Search    (white)
     results strip  count, active filters, sort / page size
     rows           hairline-separated links: badge | title + preview | meta
     pagination     status + numbered steps
     appendix       explainer + state / topic link grids on the 4 + 8 row

   Colour roles from theme.css only: navy for the current page and the
   primary button, accent for links and badges, paper / line for chrome.
   ===================================================================== */

/* ---------- Title row ---------- */
.opinions-hero, .templates-hero, .state-hero, .bar-hero, .surveys-hero, .ann-hero, .anst-hero, .ctb-hero, .sc-hero, .st-hero, .jb-header, .jl-header {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    /* the 1200px content box, centred: side padding grows past the page
       margin on wide screens so h1, lead and stats all start on the same
       edge as the filter bar and the rows below */
    padding: var(--space-5) max(var(--margin), calc((100% - var(--content)) / 2)) var(--space-4);
    text-align: left;
    color: var(--text);
}
.opinions-hero h1, .templates-hero h1, .state-hero h1, .bar-hero h1, .surveys-hero h1, .ann-hero h1, .anst-hero h1, .ctb-hero h1, .sc-hero h1, .st-hero h1, .jb-header h1, .jl-header h1, .jb-h1 {
    font-family: var(--font-logo);
    font-size: var(--t-h2);
    line-height: 1.2;
    letter-spacing: -0.015em;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 var(--space-2);
}
.opinions-hero p, .templates-hero p, .state-hero p, .bar-hero p, .surveys-hero p, .ann-hero p, .anst-hero p, .ctb-hero p, .sc-hero p, .st-hero p, .jb-header p, .jl-header p, .jb-lede {
    font-size: var(--t-body);
    line-height: 24px;
    color: var(--muted);
    margin: 0;
    max-width: 44em;
}
.hero-stats, .state-hero-stats, .bar-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    margin: var(--space-2) 0 0;
    font-size: var(--t-small);
    line-height: 20px;
    color: var(--muted);
}
.hero-stats strong, .state-hero-stats strong, .bar-hero-stats strong { color: var(--navy); font-weight: 600; }
.hero-stats-sep, .state-hero-stats-sep, .bar-hero-stats-sep { color: var(--line-strong); }
.hero-stats-meta, .state-hero-stats-meta, .bar-hero-stats-meta { color: var(--muted); }

/* ---------- Filter bar ---------- */
.search-filters-container {
    background: var(--white);
    border-bottom: 1px solid var(--line);
    padding: var(--space-3) var(--margin);
    margin: 0;
    position: relative;
    z-index: 5;
}
.search-filters-card {
    max-width: var(--content);
    margin: 0 auto;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}
.filters-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: flex-end; }
.filter-group { flex: 1 1 160px; min-width: 160px; }
.filter-group--search { flex: 2 1 280px; min-width: 240px; }
.filter-group--submit { flex: 0 0 auto; min-width: 0; }
.filter-label {
    display: block;
    font-size: var(--t-label);
    line-height: 16px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--muted);
    margin: 0 0 var(--space-1);
}
.filter-label i { display: none; }
.search-input, .filter-select {
    width: 100%;
    height: 40px;
    padding: 0 var(--space-3);
    font: inherit;
    font-size: var(--t-small);
    color: var(--text);
    background: var(--white);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-s);
    transition: none;
    box-shadow: none;
}
.search-input::placeholder { color: var(--muted); }
.search-input:focus, .filter-select:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); box-shadow: none; }
.filter-select { cursor: pointer; }
.filter-submit {
    height: 40px;
    padding: 0 var(--space-4);
    background: var(--navy);
    color: var(--on-dark);
    border: 1px solid var(--navy);
    border-radius: var(--radius-pill);
    font: inherit;
    font-size: var(--t-small);
    font-weight: 600;
    cursor: pointer;
    transition: none;
    box-shadow: none;
    white-space: nowrap;
}
.filter-submit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Results strip ---------- */
.results-strip {
    max-width: var(--content);
    margin: 0 auto;
    padding: var(--space-3) 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    font-size: var(--t-small);
    line-height: 20px;
    background: linear-gradient(var(--line), var(--line)) no-repeat;
    background-size: calc(100% - 2 * var(--margin)) 1px;
    background-position: var(--margin) 100%;
}
.results-strip-count { font-weight: 600; color: var(--navy); }
.results-strip-context { color: var(--muted); }
.results-strip-context:not(:empty)::before { content: '·'; margin-right: var(--space-2); color: var(--line-strong); }
.results-strip-clear {
    display: none;
    height: 32px;
    padding: 0 var(--space-3);
    background: transparent;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    cursor: pointer;
    transition: none;
    white-space: nowrap;
}
.results-strip.is-active .results-strip-clear { display: inline-flex; align-items: center; gap: 6px; }
.results-strip .pgn-toolbar { margin-left: auto; }
.pgn-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.pgn-field { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; color: var(--muted); }
.pgn-field-label { white-space: nowrap; }
.pgn-select, .pgn-jump-input {
    height: 32px;
    padding: 0 var(--space-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-s);
    font: inherit;
    font-size: 13px;
    color: var(--text);
    background: var(--white);
}
.pgn-select:focus, .pgn-jump-input:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.pgn-apply { display: none; }
.js-off .pgn-apply { display: inline-block; }

/* ---------- Containers ---------- */
/* Same edge as the title row: outer padding is the page margin, the inner
   1200px is centred inside it. */
.results-strip, .opinions-container, .templates-container, .state-container {
    box-sizing: border-box;
    max-width: calc(var(--content) + 2 * var(--margin));
    margin: 0 auto;
    padding-left: var(--margin);
    padding-right: var(--margin);
}
.opinions-container, .templates-container, .state-container { padding-bottom: var(--space-8); }

/* ---------- Rows ---------- */
.opinions-list, .templates-list { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; margin: 0; }
.opinion-row, .template-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    column-gap: var(--space-3);
    align-items: start;
    padding: var(--space-3) 0;
    border-top: 0;
    border-bottom: 1px solid var(--line);
    color: inherit;
    text-decoration: none;
    background: transparent;
    transition: none;
}
.opinion-row:first-child, .template-row:first-child { border-top: 0; }
.opinion-row:focus-visible, .template-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.opinion-row-state, .opinion-row-bar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    min-width: 40px;
    padding: 0 6px;
    font-size: 11px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--navy);
    background: var(--paper-2);
    border-radius: var(--radius-pill);
    margin-top: 2px;
}
.opinion-row-body { min-width: 0; }
.opinion-row-title, .template-row-title {
    font-size: var(--t-body);
    line-height: 24px;
    font-weight: 600;
    color: var(--navy);
    margin: 0 0 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.opinion-row-preview, .opinion-row-gist {
    font-size: var(--t-small);
    line-height: 20px;
    color: var(--muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 72ch;
}
.opinion-row-preview mark { background: var(--paper-2); color: var(--navy); padding: 0 2px; border-radius: 2px; font-style: normal; }
.opinion-row-meta {
    font-size: 13px;
    line-height: 20px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
    padding-top: 2px;
}
.opinion-row-meta .meta-id { color: var(--text); font-weight: 500; }
.opinion-row-meta .meta-sep { margin: 0 6px; color: var(--line-strong); }

/* Rows with no badge (state pages, bar pages): title column first */
.state-container .opinion-row, .opinion-row:not(:has(.opinion-row-state, .opinion-row-bar)) { grid-template-columns: minmax(0, 1fr) auto; }

/* Templates listing: rows without a badge column, grouped by category */
.template-row { grid-template-columns: minmax(0, 1fr) auto 16px; }
.template-row-title { -webkit-line-clamp: 1; margin: 0; }
.template-row-meta { display: flex; gap: var(--space-2); align-items: center; }
.template-meta-badge { font-size: 12px; line-height: 20px; color: var(--muted); white-space: nowrap; }
.template-meta-badge i { display: none; }
.template-row-arrow { color: var(--line-strong); font-size: 12px; line-height: 24px; text-align: right; }
.category-section { padding-top: var(--space-5); }
.category-section:first-child { padding-top: var(--space-4); }
.category-header { display: flex; align-items: baseline; gap: var(--space-2); margin: 0 0 var(--space-2); }
.category-icon { display: none; }
.category-title { font-family: var(--font-logo); font-size: var(--t-h3); line-height: 32px; letter-spacing: -0.01em; color: var(--navy); margin: 0; }
.category-count { font-size: var(--t-small); line-height: 20px; color: var(--muted); margin-left: auto; white-space: nowrap; }
.category-viewall { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-2); color: var(--accent); font-size: var(--t-small); font-weight: 600; text-decoration: none; }
.load-more-container { text-align: center; padding: var(--space-5) 0 0; }
.load-more-btn {
    height: 44px; padding: 0 var(--space-4);
    background: var(--white); color: var(--navy); border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
    font: inherit; font-size: var(--t-small); font-weight: 600; cursor: pointer; transition: none;
}
.load-more-info { margin-top: var(--space-2); font-size: 13px; color: var(--muted); }

/* ---------- Empty state ---------- */
.no-results { display: none; text-align: center; padding: var(--space-8) var(--space-4); color: var(--muted); }
.no-results.active { display: block; }
.no-results i { display: none; }
.no-results h3 { font-family: var(--font-logo); font-size: var(--t-h3); color: var(--navy); margin: 0 0 var(--space-2); }
.no-results p { margin: 0; font-size: var(--t-body); line-height: 24px; }

/* ---------- Pagination ---------- */
.pgn { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) 0 0; text-align: left; }
.pgn-status { margin: 0; font-size: var(--t-small); color: var(--muted); }
.pgn-status strong { color: var(--navy); font-weight: 600; }
.pgn-pages { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.pgn-nums { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pgn-num, .pgn-step {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: 36px; height: 36px; padding: 0 10px;
    border: 1px solid transparent; border-radius: var(--radius-pill);
    background: transparent; color: var(--text); font-size: var(--t-small); font-weight: 500; text-decoration: none; cursor: pointer; transition: none;
}
.pgn-step { border-color: var(--line-strong); color: var(--navy); font-weight: 600; }
.pgn-num.is-current { background: var(--navy); border-color: var(--navy); color: var(--on-dark); cursor: default; }
.pgn-step.is-disabled { opacity: 0.4; cursor: not-allowed; }
.pgn-gap { min-width: 20px; color: var(--muted); text-align: center; }
.pgn-jump { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; color: var(--muted); }
.pgn-jump-input { width: 64px; }

/* ---------- Appendix: explainer, state / topic grids ---------- */
.opinions-explainer, .state-link-section, .bar-link-section, .topics-section, .other-states, .state-intro {
    margin: var(--space-7) 0 0;
    padding: var(--space-5) 0 0;
    border-top: 1px solid var(--line);
    background: transparent;
    border-radius: 0;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
}
.opinions-explainer > h3, .state-link-section > h3, .bar-link-section > h3, .topics-section > h2, .other-states > h2 {
    grid-column: 1 / span 4;
    font-family: var(--font-logo);
    font-size: var(--t-h3);
    line-height: 32px;
    letter-spacing: -0.01em;
    font-weight: 700;
    color: var(--navy);
    margin: 0;
}
.opinions-explainer > *:not(h3), .state-link-section > *:not(h3), .bar-link-section > *:not(h3), .topics-section > *:not(h2), .other-states > *:not(h2), .state-intro > * {
    grid-column: 5 / span 8;
    min-width: 0;
}
.state-intro > * { grid-column: 5 / span 8; }
.opinions-explainer ul { margin: 0; padding-left: 20px; color: var(--text); font-size: var(--t-body); line-height: 24px; }
.opinions-explainer li + li { margin-top: var(--space-1); }
.state-link-grid, .bar-link-grid, .other-states-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-1) var(--space-3);
}
.state-link-grid a, .bar-link-grid a, .other-states-grid a { color: var(--accent); text-decoration: none; font-size: var(--t-small); line-height: 20px; padding: 2px 0; }
.state-link-count, .bar-link-count, .other-states-count, .topic-chip-count { color: var(--muted); font-size: 13px; }
.state-gap-note { grid-column: 5 / span 8; margin: var(--space-3) 0 0; font-size: var(--t-small); line-height: 20px; color: var(--muted); max-width: 72ch; }
.state-gap-note strong { color: var(--text); font-weight: 600; }
.topic-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.topic-chip {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 36px; padding: 0 var(--space-3);
    background: var(--paper-2); border-radius: var(--radius-pill);
    color: var(--text); font-size: var(--t-small); font-weight: 500; text-decoration: none;
}
.state-intro p { font-size: var(--t-body); line-height: 24px; color: var(--text); margin: 0; max-width: 40em; }
.state-intro p + p { margin-top: var(--space-3); }

/* ---------- Breadcrumbs (state pages) ---------- */
.breadcrumbs { margin: var(--space-3) 0 0; }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--t-small); line-height: 20px; color: var(--muted); }
.breadcrumbs li + li::before { content: '/'; margin-right: var(--space-2); color: var(--line-strong); }
.breadcrumbs a { color: var(--accent); text-decoration: none; }
.breadcrumbs [aria-current] { color: var(--text); }

/* Slim search bar that slides in once the filter bar scrolls past the nav
   (tax, IRS, agency, labor). Mirrors the main input; JS toggles .on */
.tr-sticky, .lg-sticky {
    position: fixed; left: 0; right: 0; top: 72px; z-index: 900;
    background: var(--white); border-bottom: 1px solid var(--line); box-shadow: 0 8px 24px rgba(11, 31, 58, 0.06);
    transform: translateY(-110%); transition: transform 0.2s ease;
}
.tr-sticky.on, .lg-sticky.on { transform: none; }
.tr-sticky-inner, .lg-sticky-inner {
    max-width: calc(var(--content) + 2 * var(--margin)); margin: 0 auto; padding: var(--space-2) var(--margin);
    display: flex; align-items: center; gap: var(--space-2); box-sizing: border-box;
}
.tr-sticky .sic, .lg-sticky .sic { color: var(--muted); flex-shrink: 0; }
.tr-sticky input, .lg-sticky input {
    flex: 1; min-width: 0; height: 36px; padding: 0 var(--space-3);
    border: 1px solid var(--line-strong); border-radius: var(--radius-s); font: inherit; font-size: var(--t-small); outline: none;
}
.tr-sticky input:focus, .lg-sticky input:focus { outline: 2px solid var(--accent); outline-offset: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
    .opinions-explainer, .state-link-section, .bar-link-section, .topics-section, .other-states, .state-intro { display: block; }
    .opinions-explainer > h3, .state-link-section > h3, .bar-link-section > h3, .topics-section > h2, .other-states > h2 { margin-bottom: var(--space-3); }
}
@media (max-width: 768px) {
    .opinions-hero, .templates-hero, .state-hero, .bar-hero, .surveys-hero, .ann-hero, .anst-hero, .ctb-hero, .sc-hero, .st-hero, .jb-header, .jl-header { padding: var(--space-4) var(--margin) var(--space-3); }
    .search-filters-container { padding: var(--space-3) var(--margin); }
    .filter-group, .filter-group--search { flex-basis: 100%; min-width: 0; }
    .filter-group--submit { flex-basis: auto; }
    .opinion-row { grid-template-columns: 40px minmax(0, 1fr); }
    .state-container .opinion-row, .opinion-row:not(:has(.opinion-row-state, .opinion-row-bar)) { grid-template-columns: minmax(0, 1fr); }
    .state-container .opinion-row-meta, .opinion-row:not(:has(.opinion-row-state, .opinion-row-bar)) .opinion-row-meta { grid-column: 1; }
    .opinion-row-meta { grid-column: 2 / -1; text-align: left; padding-top: 0; white-space: normal; }
    .template-row { grid-template-columns: minmax(0, 1fr) 16px; }
    .template-row-meta { grid-column: 1; }
    .results-strip .pgn-toolbar { margin-left: 0; }
    .pgn { justify-content: center; text-align: center; }
    .no-results { padding: var(--space-7) var(--space-3); }
}

/* ---------- Citator and annotations listings ---------- */
.ctb-hint { margin: var(--space-3) 0 var(--space-2); font-size: var(--t-small); line-height: 20px; color: var(--muted); max-width: 72ch; }
.ctb-row { grid-template-columns: minmax(0, 1fr) auto; }
.ctb-row .opinion-row-title em { font-style: italic; }
.ctb-cite { font-weight: 400; color: var(--muted); font-size: var(--t-small); margin-left: 6px; white-space: nowrap; }
.ctb-holding { margin: var(--space-1) 0 0; font-size: var(--t-small); line-height: 20px; color: var(--text); max-width: 72ch; }
.ctb-nopage { margin: var(--space-1) 0 0; font-size: 13px; line-height: 18px; color: var(--muted); }
.ctb-row-nolink { color: inherit; }
.ctb-row-nolink .opinion-row-title { color: var(--muted); }
.ctb-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; line-height: 20px; color: var(--muted); }
.ctb-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); flex: none; }
.ctb-status-ok { color: #3f7d5a; }
.ctb-status-ok::before { background: #3f7d5a; }
.ctb-status-warn { color: #a8781f; }
.ctb-status-warn::before { background: #a8781f; }
.ctb-status-bad { color: #b0442f; }
.ctb-status-bad::before { background: #b0442f; }
.ctb-empty, .ann-empty { padding: var(--space-5) 0; font-size: var(--t-body); line-height: 24px; color: var(--muted); max-width: 60ch; }
.ann-search-hint { margin: var(--space-2) 0 0; font-size: 13px; line-height: 18px; color: var(--muted); }
.ann-notice { display: none; margin: var(--space-3) 0 0; font-size: var(--t-small); color: var(--text); padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-left: 3px solid #a8781f; background: var(--white); }
.ann-result-count { margin: var(--space-3) 0 0; padding: 0 0 var(--space-2); font-size: var(--t-small); font-weight: 600; color: var(--navy); }
.ann-result-title { font-weight: 400; color: var(--muted); }
.ann-best { color: var(--muted); }
.ann-section { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: var(--space-5) 0 0; }
.ann-section + .ann-section { margin-top: var(--space-6); border-top: 1px solid var(--line); }
.ann-section-head { grid-column: 1 / span 4; }
.ann-section-head h2 { font-family: var(--font-logo); font-size: var(--t-h3); line-height: 32px; letter-spacing: -0.01em; color: var(--navy); margin: 0 0 var(--space-2); }
.ann-section-head p { margin: 0; font-size: var(--t-small); line-height: 20px; color: var(--muted); max-width: 32em; }
.ann-section > .ann-jur-list, .ann-section > .opinions-list { grid-column: 5 / span 8; min-width: 0; }
.ann-jur-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
.ann-jur-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.ann-jur-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.ann-jur-name { font-size: var(--t-small); line-height: 20px; font-weight: 600; color: var(--navy); }
.ann-jur-row:hover .ann-jur-name { color: var(--accent); }
.ann-jur-meta { font-size: 13px; line-height: 20px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ann-top-row { grid-template-columns: minmax(0, 1fr) auto; }
.ann-container .opinions-explainer { margin-top: var(--space-6); }
@media (max-width: 1023px) {
    .ann-section { display: block; }
    .ann-section-head { margin-bottom: var(--space-3); }
}
@media (max-width: 640px) {
    .ann-jur-list { grid-template-columns: minmax(0, 1fr); }
    .ann-jur-meta { white-space: normal; text-align: right; }
    .ctb-row { grid-template-columns: minmax(0, 1fr); }
    .ctb-row .opinion-row-meta { grid-column: 1; text-align: left; }
}

/* ---------- Court forms catalog (/forms) ---------- */
.fi-hero {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: var(--space-5) max(var(--margin), calc((100% - var(--content)) / 2)) var(--space-4);
    text-align: left;
    color: var(--text);
}
.fi-hero h1 { font-family: var(--font-logo); font-size: var(--t-h2); line-height: 1.2; letter-spacing: -0.015em; font-weight: 700; color: var(--navy); margin: 0 0 var(--space-2); }
.fi-hero p { font-size: var(--t-body); line-height: 24px; color: var(--muted); margin: 0; max-width: 44em; }
.fi-hero .hero-stats a { color: var(--accent); font-weight: 600; text-decoration: none; }
.fi-demo-link { background: none; border: 0; padding: 0; font: inherit; font-size: var(--t-small); line-height: 20px; font-weight: 600; color: var(--accent); cursor: pointer; }
.fi-demo-link:hover { text-decoration: underline; }
.fi-container .category-section:first-of-type { padding-top: var(--space-4); }
.opinions-list .opinion-row.fi-row { grid-template-columns: 88px minmax(0, 1fr) auto; }
.fi-code { min-width: 72px; }
.fi-row .opinion-row-title { -webkit-line-clamp: 2; }
.fi-row .opinion-row-preview { -webkit-line-clamp: 1; }
.fi-row .opinion-row-meta { text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; font-weight: 600; padding-top: 4px; }
.fi-container .no-results { padding: var(--space-6) 0; }
@media (max-width: 640px) {
    .opinions-list .opinion-row.fi-row { grid-template-columns: 72px minmax(0, 1fr); }
    .fi-row .opinion-row-meta { grid-column: 2; text-align: left; padding-top: 0; }
}
.fi-container .category-section { background: transparent; border-radius: 0; padding: var(--space-6) 0 0; box-shadow: none; }
.state-hero .breadcrumbs, .bar-hero .breadcrumbs, .templates-hero .breadcrumbs { margin: 0 0 var(--space-2); }
.state-counts a { color: var(--accent); font-weight: 600; text-decoration: none; }