/* Tool directory (/tools).
 *
 * Colours come from the shared design tokens (--surface / --border / --ink /
 * --accent) so the page follows whichever frontend theme is active; nothing
 * here hardcodes a palette. Loaded from the `final_styles` stack, i.e. after
 * metadata-system.css, so these rules win where the two overlap.
 */

.tool-section + .tool-section {
    margin-top: 32px;
}

.tool-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 8px 24px;
    margin: 0 0 16px;
}

.tool-section-head h2 {
    margin: 0;
    font-size: 1.25rem;
}

.tool-section-head p {
    max-width: 46ch;
    margin: 0;
    color: var(--ink-muted, var(--text-muted, #6c757d));
    font-size: 0.85rem;
    line-height: 1.55;
}

.tool-group + .tool-group {
    margin-top: 24px;
}

.tool-group-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border, rgba(148, 163, 184, 0.22));
    font-size: 1rem;
}

.tool-group-count {
    color: var(--ink-muted, var(--text-muted, #6c757d));
    font-size: 0.78rem;
    font-weight: 500;
}

.tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.tool-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--border, rgba(148, 163, 184, 0.22));
    border-radius: var(--radius-lg, 12px);
    background: var(--surface, #fff);
}

.tool-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* frontend-polish.css stretches archive rows; the contest archive pins its
   cover tile with the same declaration, so pin this one to match and keep the
   tile square instead of letting the card grow it. */
.tool-tile {
    flex: 0 0 auto;
    align-self: flex-start;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    aspect-ratio: 1;
    border: 1px solid var(--border, rgba(148, 163, 184, 0.35));
    border-radius: 6px;
    background: var(--surface-alt, rgba(127, 127, 127, 0.08));
    color: var(--ink, inherit);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
}

.tool-card-identity {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.tool-card-title {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.35;
    word-break: break-word;
}

.tool-card-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.tool-card-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 35%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent, #2563eb) 10%, transparent);
    color: var(--accent, #2563eb);
    font-size: 0.72rem;
    font-weight: 700;
}

.tool-card-summary {
    margin: 0;
    color: var(--ink-muted, var(--text-muted, #475569));
    font-size: 0.86rem;
    line-height: 1.6;
}

.tool-card-meta {
    display: grid;
    gap: 6px;
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.5;
}

.tool-card-meta div {
    display: grid;
    grid-template-columns: 4.5em minmax(0, 1fr);
    gap: 8px;
}

.tool-card-meta dt {
    color: var(--ink-muted, var(--text-muted, #6c757d));
    font-weight: 500;
}

.tool-card-meta dd {
    margin: 0;
    color: var(--ink, inherit);
}

.tool-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px;
}

.tool-license-link {
    color: var(--ink-muted, var(--text-muted, #6c757d));
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tool-license-link:hover,
.tool-license-link:focus-visible {
    color: var(--accent, #2563eb);
}

.tool-attribution {
    margin-top: 24px;
    padding: 14px 16px;
    border: 1px solid var(--border, rgba(148, 163, 184, 0.22));
    border-radius: var(--radius-lg, 12px);
    background: var(--surface-alt, rgba(127, 127, 127, 0.06));
    font-size: 0.8rem;
    line-height: 1.6;
}

.tool-attribution strong {
    display: block;
    margin-bottom: 4px;
}

.tool-attribution p {
    margin: 0;
    color: var(--ink-muted, var(--text-muted, #6c757d));
}

.tool-empty-state {
    margin-top: 8px;
}

@media (max-width: 575.98px) {
    .tool-grid {
        grid-template-columns: 1fr;
    }

    .tool-card-meta div {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/* ---------------------------------------------------------------------------
 * Detail page (/tools/{slug})
 *
 * Detail routes are deliberately not whitelisted in metadata-system.css — that
 * file owns the flat listing-surface contract for index pages. This page's
 * panels are therefore styled here and not left to inherit a route-scoped rule:
 * `.tool-detail-document` restates background/border/padding rather than
 * depending on `.surface-pad-lg`, which no front-end stylesheet defines.
 * ------------------------------------------------------------------------ */

.tool-detail-head {
    display: grid;
    gap: 16px;
}

.tool-detail-identity {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.tool-tile-lg {
    width: 60px;
    font-size: 1.3rem;
}

.tool-detail-identity .page-title {
    margin: 2px 0 0;
}

.tool-detail-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.tool-detail-tag-link {
    text-decoration: none;
}

.tool-detail-tag-link:hover,
.tool-detail-tag-link:focus-visible {
    color: var(--accent, #2563eb);
}

.tool-detail-head .page-lead {
    margin: 0;
}

.tool-detail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-top: 4px;
}

.tool-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
    margin-top: 8px;
}

.tool-detail-document {
    padding: 24px;
    border: 1px solid var(--border, rgba(148, 163, 184, 0.22));
    border-radius: var(--radius-lg, 12px);
    background: var(--surface, #fff);
}

.tool-detail-document .prose > *:first-child {
    margin-top: 0;
}

.tool-detail-document .prose > *:last-child {
    margin-bottom: 0;
}

.tool-detail-pending {
    margin: 0;
    color: var(--ink-muted, var(--text-muted, #6c757d));
    font-size: 0.9rem;
    line-height: 1.7;
}

.tool-detail-aside {
    display: grid;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--border, rgba(148, 163, 184, 0.22));
    border-radius: var(--radius-lg, 12px);
    background: var(--surface-alt, rgba(127, 127, 127, 0.06));
}

.tool-detail-aside .info-list {
    margin: 0;
}

.tool-detail-note {
    padding-top: 12px;
    border-top: 1px solid var(--border, rgba(148, 163, 184, 0.22));
    font-size: 0.8rem;
    line-height: 1.6;
}

.tool-detail-note strong {
    display: block;
    margin-bottom: 4px;
}

.tool-detail-note p {
    margin: 0;
    color: var(--ink-muted, var(--text-muted, #6c757d));
}

/* ---------------------------------------------------------------------------
 * Index additions: title link, detail link, submission entry
 * ------------------------------------------------------------------------ */

.tool-card {
    transition: border-color 0.18s ease;
}

.tool-card:hover {
    border-color: color-mix(in srgb, var(--accent, #2563eb) 32%, transparent);
}

.tool-card-title-link {
    color: inherit;
    text-decoration: none;
}

.tool-card-title-link:hover,
.tool-card-title-link:focus-visible {
    color: var(--accent, #2563eb);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The in-site destination. Set apart from the outbound buttons on purpose: it
   is the quieter of the two, so the primary action stays "use the tool". */
.tool-card-detail-link {
    color: var(--ink-muted, var(--text-muted, #6c757d));
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tool-card-detail-link:hover,
.tool-card-detail-link:focus-visible {
    color: var(--accent, #2563eb);
}

.tool-index-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tool-submit-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 32px;
    padding: 20px 24px;
    border: 1px solid var(--border, rgba(148, 163, 184, 0.22));
    border-radius: var(--radius-lg, 12px);
    background: var(--surface-alt, rgba(127, 127, 127, 0.06));
}

.tool-submit-cta h2 {
    margin: 2px 0 6px;
    font-size: 1.1rem;
}

.tool-submit-cta p {
    max-width: 62ch;
    margin: 0;
    color: var(--ink-muted, var(--text-muted, #6c757d));
    font-size: 0.85rem;
    line-height: 1.6;
}

@media (max-width: 991.98px) {
    .tool-detail-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .tool-detail-identity {
        gap: 12px;
    }

    .tool-detail-document {
        padding: 18px;
    }

    .tool-submit-cta {
        padding: 18px;
    }
}