/* Tool rating component - separate file so hosted pages do not depend on stale tool-page.css cache. */
.tool-header-actions .tool-rating-summary {
    grid-column: 1 / -1;
    justify-self: end;
    min-width: 244px;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 13px !important;
    border: 1px solid rgba(245, 158, 11, 0.24) !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, rgba(255, 247, 237, 0.95), rgba(219, 234, 254, 0.9)) !important;
    color: #0b1b2f !important;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08) !important;
}

.tool-rating-summary .tool-rating-stars,
.tool-rating-stars {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    color: #f5a800 !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

.tool-rating-summary .tool-rating-stars i,
.tool-rating-stars i {
    color: #f5a800 !important;
    font-size: 1rem !important;
    line-height: 1 !important;
}

.tool-rating-summary > div:not(.tool-rating-stars) {
    display: grid !important;
    gap: 2px !important;
}

.tool-rating-summary strong {
    display: block !important;
    color: #0b1b2f !important;
    font-size: 0.9rem !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
}

.tool-rating-summary span {
    display: block !important;
    color: #526b86 !important;
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

.tool-rating-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1.1fr) !important;
    gap: 18px !important;
    margin: 18px 0 !important;
    padding: 20px !important;
    border: 1px solid rgba(217, 119, 6, 0.16) !important;
    border-radius: 8px !important;
    background: radial-gradient(circle at 14% 12%, rgba(251, 191, 36, 0.12), transparent 34%), rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08) !important;
}

.tool-rating-kicker {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: fit-content !important;
    padding: 7px 10px !important;
    border: 1px solid rgba(251, 191, 36, 0.2) !important;
    border-radius: 999px !important;
    background: rgba(251, 191, 36, 0.12) !important;
    color: #d99100 !important;
    font-size: 0.84rem !important;
    font-weight: 900 !important;
}

.tool-rating-copy h2 {
    margin: 10px 0 8px !important;
    color: #0b1b2f !important;
    font-size: 1.08rem !important;
    font-weight: 900 !important;
}

.tool-rating-copy p,
.tool-rating-status,
.tool-rating-meta span {
    margin: 0 !important;
    color: #526b86 !important;
    line-height: 1.6 !important;
}

.tool-rating-control {
    display: grid !important;
    align-content: center !important;
    gap: 10px !important;
}

.tool-rating-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.tool-rating-buttons button {
    width: 46px !important;
    height: 46px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 1px solid rgba(217, 119, 6, 0.22) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #f5a800 !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transition: transform .16s ease, border-color .16s ease, background .16s ease !important;
}

.tool-rating-buttons button i {
    color: #f5a800 !important;
    font-size: 1.12rem !important;
    line-height: 1 !important;
}

.tool-rating-buttons button:hover,
.tool-rating-buttons button:focus-visible,
.tool-rating-buttons button.is-active {
    transform: translateY(-1px) !important;
    border-color: rgba(245, 158, 11, 0.58) !important;
    background: rgba(255, 247, 237, 0.96) !important;
    outline: 0 !important;
}

.tool-rating-meta {
    display: flex !important;
    align-items: baseline !important;
    gap: 9px !important;
}

.tool-rating-meta strong {
    color: #0b1b2f !important;
    font-size: 1.12rem !important;
    font-weight: 900 !important;
}

body.theme-dark .tool-header-actions .tool-rating-summary {
    border-color: rgba(245, 158, 11, 0.22) !important;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.14), rgba(37, 99, 235, 0.1)) !important;
    color: #f8fbff !important;
    box-shadow: 0 14px 32px rgba(2, 6, 23, 0.18) !important;
}

body.theme-dark .tool-rating-summary strong,
body.theme-dark .tool-rating-copy h2,
body.theme-dark .tool-rating-meta strong {
    color: #ffffff !important;
}

body.theme-dark .tool-rating-summary span,
body.theme-dark .tool-rating-copy p,
body.theme-dark .tool-rating-status,
body.theme-dark .tool-rating-meta span {
    color: #a7b6ca !important;
}

body.theme-dark .tool-rating-panel {
    border-color: rgba(245, 158, 11, 0.18) !important;
    background: radial-gradient(circle at 14% 12%, rgba(251, 191, 36, 0.12), transparent 34%), linear-gradient(180deg, rgba(18, 28, 48, 0.84), rgba(13, 21, 38, 0.86)) !important;
}

body.theme-dark .tool-rating-buttons button {
    background: rgba(15, 23, 42, 0.58) !important;
}

@media (max-width: 900px) {
    .tool-header-actions .tool-rating-summary {
        justify-self: stretch !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .tool-rating-panel {
        grid-template-columns: 1fr !important;
        padding: 18px !important;
    }

    .tool-rating-buttons {
        justify-content: space-between !important;
    }

    .tool-rating-buttons button {
        width: 44px !important;
        height: 44px !important;
    }
}

/* Header rating compact 50/50 layout */
.tool-header-actions .tool-rating-summary {
    width: 356px !important;
    min-width: 356px !important;
    max-width: 356px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 12px 14px !important;
}

.tool-header-actions .tool-rating-summary .tool-rating-stars {
    width: 100% !important;
    display: flex !important;
    justify-content: space-evenly !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 12px 0 4px !important;
}

.tool-header-actions .tool-rating-summary .tool-rating-stars i {
    font-size: 1.08rem !important;
}

.tool-header-actions .tool-rating-summary > div:not(.tool-rating-stars) {
    width: 100% !important;
    display: grid !important;
    align-content: center !important;
    justify-items: start !important;
    gap: 3px !important;
    padding-left: 14px !important;
    border-left: 1px solid rgba(217, 119, 6, 0.16) !important;
    text-align: left !important;
}

.tool-header-actions .tool-rating-summary strong {
    max-width: 128px !important;
    font-size: 0.94rem !important;
    line-height: 1.05 !important;
    white-space: normal !important;
}

.tool-header-actions .tool-rating-summary span {
    max-width: 128px !important;
    font-size: 0.78rem !important;
    line-height: 1.12 !important;
    white-space: normal !important;
}

body.theme-dark .tool-header-actions .tool-rating-summary > div:not(.tool-rating-stars) {
    border-left-color: rgba(251, 191, 36, 0.18) !important;
}

@media (max-width: 900px) {
    .tool-header-actions .tool-rating-summary {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

/* Keep header rating inside the tool header column, never over the right sidebar. */
.tool-main-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 378px) !important;
    align-items: center !important;
    overflow: hidden !important;
}

.tool-title-group {
    min-width: 0 !important;
}

.tool-main-hero {
    min-width: 0 !important;
}

.tool-main-hero h1,
.tool-main-hero p {
    max-width: 100% !important;
}

.tool-header-actions {
    width: 100% !important;
    max-width: 378px !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-self: end !important;
    overflow: hidden !important;
}

.tool-header-actions .tool-rating-summary,
.tool-header-actions .share-button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-self: stretch !important;
}

.tool-header-actions .tool-rating-summary {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}

.tool-header-actions .tool-rating-summary .tool-rating-stars {
    min-width: 0 !important;
    padding: 0 10px 0 2px !important;
}

.tool-header-actions .tool-rating-summary > div:not(.tool-rating-stars) {
    min-width: 0 !important;
    padding-left: 12px !important;
}

.tool-header-actions .tool-rating-summary strong,
.tool-header-actions .tool-rating-summary span {
    max-width: 100% !important;
}

@media (max-width: 1180px) {
    .tool-main-header {
        grid-template-columns: 1fr !important;
    }

    .tool-header-actions {
        justify-self: stretch !important;
        max-width: none !important;
    }
}