/* =============================================================================
   WP Tally — front-end styles
   Design system: "Notion" (mirrors popular-themes-plugin/design.md)
   Warm paper canvas · one structural blue accent · hairline borders +
   barely-there layered shadows · pill chips, tight inputs.

   Tokens are scoped to the tally wrappers (prefixed --tally-) so wp-tally
   stays self-contained even if the sibling plugin is deactivated.
   ========================================================================== */

.tally-search-box,
.tally-search-results {
    /* --- Brand & accent (the only structural colour) --- */
    --tally-primary:        #0075de;
    --tally-primary-active: #005bab;
    --tally-primary-tint:   #eaf3fc;
    --tally-primary-ring:   rgba(0, 117, 222, .25);

    /* --- Surfaces --- */
    --tally-surface:        #ffffff;
    --tally-canvas:         #f6f5f4;
    --tally-canvas-tint:    #efeeec;
    --tally-hairline:       #e6e6e6;
    --tally-hairline-strong:#dcdbd8;

    /* --- Text --- */
    --tally-ink:            #1c1b19;
    --tally-ink-secondary:  #31302e;
    --tally-ink-muted:      #615d59;
    --tally-ink-faint:      #a39e98;
    --tally-on-primary:     #ffffff;

    /* --- Status (freshness dots, rating pills) --- */
    --tally-green:          #1aae39;
    --tally-orange:         #dd5b00;
    --tally-red:            #d63b30;

    /* --- Radius --- */
    --tally-r-xs:   4px;
    --tally-r-md:   8px;
    --tally-r-lg:   12px;
    --tally-r-full: 9999px;

    /* --- Elevation --- */
    --tally-shadow-1:
        0 .175px 1.041px rgba(0, 0, 0, .01),
        0 .8px 2.925px rgba(0, 0, 0, .02),
        0 2.025px 7.847px rgba(0, 0, 0, .027),
        0 4px 18px rgba(0, 0, 0, .04);

    --tally-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

    font-family: var(--tally-font);
    color: var(--tally-ink-secondary);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'lnum' 1;
}

/* Search form
-------------------------------------------------------------- */
.tally-search-box {
    position: relative;
    width: 100%;
    margin: 0 0 24px;
}

.tally-search-form {
    display: flex;
    align-items: stretch;
    height: 48px;
    border: 1px solid var(--tally-hairline-strong);
    border-radius: var(--tally-r-md);
    background-color: var(--tally-surface);
    overflow: hidden;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.tally-search-form:focus-within {
    border-color: var(--tally-primary);
    box-shadow: 0 0 0 3px var(--tally-primary-ring);
}

.tally-search-box input[type="text"].tally-search-field {
    flex: 1 1 auto;
    width: auto;
    margin: 0;
    padding: 0 16px;
    font-family: var(--tally-font);
    font-size: 15px;
    color: var(--tally-ink);
    border: 0;
    border-radius: 0;
    background: transparent;
    outline: none;
    box-shadow: none;
}

.tally-search-form .tally-search-field::placeholder {
    color: var(--tally-ink-faint);
}

.tally-search-form .tally-search-submit {
    position: static;
    height: auto;
    width: auto;
    margin: 0;
    padding: 0 28px;
    font-family: var(--tally-font);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    color: var(--tally-on-primary);
    text-align: center;
    border: 0;
    border-radius: 0;
    background-color: var(--tally-primary);
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.tally-search-form .tally-search-submit:hover,
.tally-search-form .tally-search-submit:focus {
    background-color: var(--tally-primary-active);
}

/* Results container
-------------------------------------------------------------- */
.tally-search-results {
    margin-top: 8px;
}

/* Author profile band
-------------------------------------------------------------- */
.tally-profile {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    margin-bottom: 12px;
    background-color: var(--tally-surface);
    border: 1px solid var(--tally-hairline);
    border-radius: var(--tally-r-lg);
    box-shadow: var(--tally-shadow-1);
}

.tally-profile-avatar {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: var(--tally-r-full);
    border: 1px solid var(--tally-hairline);
}

.tally-profile-info {
    min-width: 0;
}

.tally-profile-name {
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--tally-ink);
    text-decoration: none;
}

.tally-profile-name:hover {
    color: var(--tally-primary);
    text-decoration: underline;
}

.tally-profile-meta {
    display: block;
    font-size: 0.8125rem;
    color: var(--tally-ink-muted);
}

.tally-profile-rank {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 10px;
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    vertical-align: 3px;
    color: var(--tally-primary);
    text-decoration: none;
    background-color: var(--tally-primary-tint);
    border: 1px solid transparent;
    border-radius: var(--tally-r-full);
    transition: background-color 150ms ease, color 150ms ease;
}

.tally-profile-rank:hover,
.tally-profile-rank:focus {
    color: var(--tally-on-primary);
    background-color: var(--tally-primary);
    text-decoration: none;
}

/* Summary cards
-------------------------------------------------------------- */
.tally-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.tally-summary-card {
    box-sizing: border-box;
    padding: 14px 16px;
    background-color: var(--tally-surface);
    border: 1px solid var(--tally-hairline);
    border-radius: var(--tally-r-lg);
    box-shadow: var(--tally-shadow-1);
}

.tally-summary-label {
    margin-bottom: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tally-ink-faint);
}

.tally-summary-value {
    font-size: 1.375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    color: var(--tally-ink);
}

.tally-summary-sub {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--tally-ink-faint);
}

.tally-search-results-wrapper {
    border: 1px solid var(--tally-hairline);
    border-radius: var(--tally-r-lg);
    background-color: var(--tally-surface);
    box-shadow: var(--tally-shadow-1);
    overflow: hidden;
}

/* Sections (Plugins / Themes)
-------------------------------------------------------------- */
.tally-section {
    margin-top: 28px;
}

.tally-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    margin: 0 0 10px;
}

.tally-section-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--tally-ink);
}

.tally-section-count {
    margin-left: 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--tally-ink-faint);
}

/* Sort controls (in the section head)
-------------------------------------------------------------- */
.tally-search-results-sort {
    font-size: 0.8125rem;
    color: var(--tally-ink-muted);
    text-align: right;
}

.tally-search-results-sort-by,
.tally-search-results-order,
.tally-cache-results > div {
    display: inline-block;
    padding: 0 0 0 14px;
}

.tally-search-results-sort a {
    color: var(--tally-primary);
    text-decoration: none;
    cursor: pointer;
}

.tally-search-results-sort a:hover {
    text-decoration: underline;
}

.tally-search-results-sort a.active {
    font-weight: 700;
    text-decoration: underline;
}

.tally-cache-results-title,
.tally-search-results-sort-title {
    font-weight: 600;
    color: var(--tally-ink-secondary);
}

/* Item art & titles
-------------------------------------------------------------- */
.tally-plugin-icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: var(--tally-r-md);
    object-fit: cover;
}

.tally-theme-screenshot {
    flex: 0 0 auto;
    width: 80px;
    height: 60px;
    border: 1px solid var(--tally-hairline);
    border-radius: var(--tally-r-xs);
    object-fit: cover;
}

.tally-plugin-title {
    display: inline-block;
    margin-bottom: 2px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    width: auto;
    color: var(--tally-primary);
    text-decoration: none;
}

.tally-plugin-title:hover {
    color: var(--tally-primary-active);
    text-decoration: underline;
}

/* Result tables (plugins / themes)
-------------------------------------------------------------- */
.tally-row {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 140px 120px 96px;
    gap: 12px;
    align-items: center;
    padding: 12px 20px 12px 16px;
    border-top: 1px solid var(--tally-hairline);
    transition: background-color 120ms ease;
}

.tally-row:first-child {
    border-top: 0;
}

.tally-row:not(.tally-row-head):not(.tally-totals):hover {
    background-color: var(--tally-canvas);
}

.tally-row-head {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tally-ink-muted);
    background-color: var(--tally-canvas);
    border-bottom: 1px solid var(--tally-hairline);
}

.tally-row-head a {
    color: inherit;
    text-decoration: none;
}

.tally-row-head a:hover,
.tally-row-head a.active {
    color: var(--tally-primary);
}

.tally-rank {
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--tally-ink-faint);
}

.tally-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.tally-item-info {
    min-width: 0;
}

.tally-updated {
    display: block;
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--tally-ink-muted);
}

.tally-updated::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: var(--tally-r-full);
    background-color: var(--tally-ink-faint);
}

.tally-updated.is-fresh::before {
    background-color: var(--tally-green);
}

.tally-updated.is-aging::before {
    background-color: var(--tally-orange);
}

.tally-updated.is-stale::before {
    background-color: var(--tally-red);
}

.tally-updated.is-stale {
    color: var(--tally-red);
}

.tally-cell-num {
    font-size: 0.9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--tally-ink);
}

.tally-row-head .tally-cell-num,
.tally-row-head .tally-cell-rating {
    font-size: inherit;
    font-weight: 600;
    color: inherit;
    white-space: nowrap;
}

.tally-cell-rating {
    white-space: nowrap;
}

.tally-rating-pill {
    display: inline-block;
    padding: 2px 9px;
    font-size: 0.8125rem;
    font-weight: 700;
    border-radius: var(--tally-r-full);
}

.tally-rating-pill.is-good {
    color: #14803c;
    background-color: #e9f7ec;
}

.tally-rating-pill.is-ok {
    color: #b45309;
    background-color: #fdf4e0;
}

.tally-rating-pill.is-bad {
    color: #c22c22;
    background-color: #fdecea;
}

.tally-rating-count {
    font-size: 0.75rem;
    color: var(--tally-ink-faint);
}

.tally-rating-none {
    color: var(--tally-ink-faint);
}

/* Totals row
-------------------------------------------------------------- */
.tally-row.tally-totals,
.tally-row.tally-totals:hover {
    background-color: var(--tally-canvas);
    border-top: 1px solid var(--tally-hairline-strong);
}

@media (min-width: 641px) {
    .tally-totals .tally-cell-num[data-label]::after {
        content: attr(data-label);
        display: block;
        font-size: 0.625rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--tally-ink-faint);
    }
}

.tally-totals .tally-info {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--tally-ink-secondary);
}

.tally-count,
.tally-rating {
    font-weight: 700;
    color: var(--tally-ink);
}

/* Cache notice
-------------------------------------------------------------- */
.tally-cache-results {
    padding: 8px 10px;
    font-size: 0.75rem;
    text-align: right;
    color: var(--tally-ink-faint);
    background-color: var(--tally-canvas);
    border-top: 1px solid var(--tally-hairline);
    transition: color 150ms ease-in;
}

.tally-cache-results:hover {
    color: var(--tally-ink-muted);
}

.tally-cache-results .tally-cache-results-title {
    color: inherit;
}

/* Example usernames (empty state)
-------------------------------------------------------------- */
.tally-examples {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

.tally-examples-title {
    margin-right: 4px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--tally-ink-secondary);
}

.tally-example {
    display: inline-block;
    padding: 6px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--tally-ink-secondary);
    text-decoration: none;
    background-color: var(--tally-surface);
    border: 1px solid var(--tally-hairline-strong);
    border-radius: var(--tally-r-full);
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.tally-example:hover,
.tally-example:focus {
    color: var(--tally-primary);
    background-color: var(--tally-primary-tint);
    border-color: var(--tally-primary);
    text-decoration: none;
}

/* Top authors leaderboard (empty state)
-------------------------------------------------------------- */
.tally-authors-title {
    margin: 28px 0 12px;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--tally-ink);
}

.tally-authors-count {
    margin-left: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--tally-ink-faint);
}

.tally-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
}

.tally-pagination-link {
    display: inline-block;
    padding: 6px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--tally-ink-secondary);
    text-decoration: none;
    background-color: var(--tally-surface);
    border: 1px solid var(--tally-hairline-strong);
    border-radius: var(--tally-r-full);
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

a.tally-pagination-link:hover,
a.tally-pagination-link:focus {
    color: var(--tally-primary);
    background-color: var(--tally-primary-tint);
    border-color: var(--tally-primary);
    text-decoration: none;
}

.tally-pagination-link.is-disabled {
    color: var(--tally-ink-faint);
    border-color: var(--tally-hairline);
    cursor: default;
}

.tally-pagination-info {
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--tally-ink-muted);
}

.tally-author-avatar {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--tally-r-full);
    border: 1px solid var(--tally-hairline);
}

.tally-author-nicename {
    display: block;
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--tally-ink-muted);
}

/* Authors table: narrower art column, five numeric columns. */
.tally-authors-table .tally-row {
    grid-template-columns: 40px minmax(0, 1fr) 80px 80px 130px 130px 130px;
}

.tally-authors-table .tally-plugin-title {
    font-size: 0.9375rem;
    margin-bottom: 0;
}

/* Errors
-------------------------------------------------------------- */
.tally-search-error {
    padding: 24px 20px;
    font-size: 0.9375rem;
    color: var(--tally-ink-muted);
}

/* Misc
-------------------------------------------------------------- */
.tally-share iframe {
    float: left;
    margin: 20px 10px 20px 0;
}

/* Small screens
-------------------------------------------------------------- */
@media (max-width: 640px) {
    .tally-row-head,
    .tally-rank {
        display: none;
    }

    .tally-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 24px;
    }

    .tally-item {
        flex: 1 1 100%;
    }

    .tally-cell[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        font-size: 0.625rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--tally-ink-faint);
    }

    .tally-cell-num {
        text-align: left;
    }
}

@media (max-width: 600px) {
    .tally-plugin-icon {
        width: 40px;
        height: 40px;
    }

    .tally-theme-screenshot {
        width: 64px;
        height: 48px;
    }
}