/* Company directory, company profiles, carrier records and reviews. */

.company-profile > * + *,
.company-profile > section + section {
    margin-top: var(--space-7);
}

.company-profile > .hero > :is(.badge, .rating, p) {
    justify-self: start;
}

.company-profile > section > h2 + .key-facts > h2 {
    display: none;
}

.company-profile > section > p:not([class]) {
    max-width: var(--measure);
}

.company-filters,
.reviews form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-3);
    margin: 0 0 var(--space-5);
    padding: var(--space-4);
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.company-filters label,
.reviews form label {
    flex: 1 1 9rem;
}

.company-filters label:has(> input[type="checkbox"]),
.reviews form label:has(> input[type="checkbox"]) {
    flex: 0 0 auto;
    align-self: center;
    align-items: center;
    min-height: var(--control-height);
    font-size: 0.9375rem;
}

.company-filters button,
.reviews form button {
    flex: 0 0 auto;
}

.verdict {
    max-width: var(--measure);
    padding: var(--space-4) var(--space-5);
    background: var(--color-canvas);
    border-left: 4px solid var(--color-brand);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.verdict > :last-child {
    margin-bottom: 0;
}

.topic-bars {
    display: grid;
    gap: var(--space-3);
    margin-block: var(--space-4);
}

.topic-bar {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(6rem, 10rem) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    font-size: 0.9375rem;
}

.topic-bar > :first-child {
    color: var(--color-ink);
    font-weight: 600;
}

.topic-bar > :last-child {
    color: var(--color-muted);
    font-size: var(--step--1);
}

.topic-bar__track {
    display: block;
    height: 0.625rem;
    overflow: hidden;
    background: var(--color-border);
    border-radius: var(--radius-pill);
}

.topic-bar__fill {
    display: block;
    height: 100%;
    background: var(--color-brand);
    border-radius: var(--radius-pill);
}

.review {
    display: grid;
    gap: var(--space-2);
    max-width: 52rem;
    margin: 0 0 var(--space-4);
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
}

.review h3,
.review p {
    margin: 0;
}

.review > p:not([class]) {
    color: var(--color-text);
    font-size: 0.9375rem;
}

.review__body,
.review > .rating + p {
    font-size: 1rem;
    line-height: 1.65;
}

.review--highlight {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgb(243 140 34 / 25%);
}

.review blockquote {
    margin: var(--space-2) 0 0;
    padding: var(--space-3) var(--space-4);
    background: var(--color-canvas);
    border-left: 3px solid var(--color-border-strong);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 0.9375rem;
}

.review blockquote p:first-child {
    color: var(--color-ink);
    font-weight: 700;
}

.review-source {
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: var(--step--1);
}

.review-photos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.review-photos img {
    display: block;
    width: 6rem;
    height: 6rem;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.reviews [data-reviews-target="list"] > button {
    background: var(--color-surface);
    border-color: var(--color-control-border);
    color: var(--color-ink);
}

.reviews [data-reviews-target="list"] > button:hover {
    background: var(--color-canvas);
    border-color: var(--color-ink);
}

.review-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.state-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.state-list li {
    margin: 0;
}

.state-list a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-ink);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
}

.state-list a:hover {
    border-color: var(--color-brand);
    background: var(--color-brand-tint);
}

nav[aria-label="Pagination"]:not(.pagination) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
}

nav[aria-label="Pagination"]:not(.pagination) a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 var(--space-4);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius);
    color: var(--color-ink);
    font-weight: 700;
    text-decoration: none;
}

nav[aria-label="Pagination"]:not(.pagination) a:hover {
    background: var(--color-brand-tint);
    border-color: var(--color-brand);
}

@media (max-width: 40rem) {
    .topic-bar {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-1);
    }
}

.write-review-form { max-width: 44rem; margin-block: var(--space-6); }
.write-review-form fieldset { display: grid; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius); }
.write-review-form legend { padding-inline: var(--space-2); font-size: var(--step-1); font-weight: 700; }
.write-review-form textarea { min-height: 10rem; }
.review-rating__options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.review-rating__choice { display: flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-control-border); border-radius: var(--radius-sm); cursor: pointer; }
.review-rating__choice:has(:checked) { background: var(--color-brand-tint); border-color: var(--color-brand-deep); }

/* Fields carry their own one-line message, so rows sit close together. */

.write-review-form fieldset {
    row-gap: var(--space-2);
}

/* A long review shows eight lines until the reader asks for the rest. */

.review__body--long {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
    line-clamp: 8;
    overflow: hidden;
}

.review__toggle:checked + .review__body--long {
    display: block;
    overflow: visible;
}

.review__more {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    min-height: 2.75rem;
    color: var(--color-link);
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
}

.review__more:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

.review__more-close,
.review__toggle:checked ~ .review__more .review__more-open {
    display: none;
}

.review__toggle:checked ~ .review__more .review__more-close {
    display: inline;
}

.review__toggle:focus-visible ~ .review__more {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: 4px;
}

.reviews [data-reviews-target="status"] { min-height: 1.65em; }

/* Licence check: one field, one answer. */

.company-check {
    display: grid;
    gap: var(--space-6);
}

.company-check > * {
    min-width: 0;
}

main > .wrap.company-check > .company-check__note {
    margin: calc(var(--space-3) - var(--space-6)) 0 0;
}

main > .wrap.company-check > .tool-result-title {
    margin-bottom: 0;
}

.company-check-form {
    display: grid;
    gap: var(--space-2) var(--space-3);
    align-items: start;
    max-width: 44rem;
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
}

.company-check-form > button {
    justify-self: start;
}

@media (min-width: 40rem) {
    .company-check-form {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    /* The button lines up with the field, below the label. */
    .company-check-form > button {
        margin-top: calc(0.9375rem * 1.4 + var(--field-gap, 0.375rem));
    }
}

.company-check__note {
    max-width: 44rem;
    color: var(--color-muted);
    font-size: var(--step--1);
}

.company-check > .callout {
    max-width: 44rem;
}

.licence-result {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.licence-result__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
}

.licence-result__head h3 {
    margin: 0;
    font-size: var(--step-2);
}

.licence-result .key-facts,
.licence-result__more {
    margin: 0;
}

.licence-result__more a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2.75rem;
    font-weight: 700;
}

.company-check__meaning {
    max-width: var(--measure);
}

.company-check__meaning h2 {
    margin: 0 0 var(--space-3);
    font-size: var(--step-1);
}

.company-check__meaning ul {
    margin: 0 0 var(--space-3);
    padding-left: 1.25rem;
}

.company-check .tool-result-title {
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
    scroll-margin-top: calc(var(--header-height) + 0.5rem);
}

.company-check .tool-result-title:focus {
    outline: none;
}

/* Review photo links retain their dimensions while images load. */
.review-photos { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: 0; list-style: none; }
.review-photos li { max-width: 100%; }
.review-photos a { display: block; }
.review-photos img { display: block; width: 240px; max-width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-md, 8px); }

.rating-breakdown { max-width: 34rem; margin-block: 1rem; }
.rating-breakdown__row { display: grid; grid-template-columns: 4rem minmax(0, 1fr) 4rem; align-items: center; gap: .75rem; }
.rating-breakdown meter { width: 100%; height: 1.2rem; accent-color: var(--color-primary, #e96517); }
.company-review-trend { padding: 1rem; border-inline-start: 3px solid currentColor; background: #f7f7f7; }