/**
 * Styles for the agency directory and the report form.
 *
 * Kept minimal on purpose. The theme already provides a notice style, so these
 * only add what it does not have, and every rule is scoped under a skg- or skg
 * class so nothing can leak into the theme or the tool pages.
 */

.skg-agency-intro,
.skg-factcheck,
.skg-report {
    max-width: 46rem;
}

.skg-lead {
    font-size: 1.075em;
    line-height: 1.6;
}

.skg-notice {
    border-left: 4px solid #c9c9c9;
    background: rgba(0, 0, 0, 0.03);
    padding: 0.9rem 1.1rem;
    margin: 1.25rem 0;
}
.skg-notice p:first-child { margin-top: 0; }
.skg-notice p:last-child  { margin-bottom: 0; }

.skg-notice--important { border-left-color: #b8860b; }
.skg-notice--warning   { border-left-color: #d97706; }
.skg-notice--positive  { border-left-color: #16a34a; }
.skg-notice--negative  { border-left-color: #dc2626; }

.skg-breadcrumb {
    font-size: 0.9em;
    opacity: 0.8;
    margin-bottom: 1rem;
}

.skg-empty {
    padding: 1.5rem 0;
    opacity: 0.8;
}

/* Status badges. Colour is never the only signal: each state also has a word,
   so it survives a monochrome screen and a colourblind reader. */
.skg-status {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
    font-size: 0.95em;
    margin: 0.5rem 0;
}
.skg-status strong {
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid currentColor;
}
.skg-status--large { font-size: 1.05em; }
.skg-status-date   { opacity: 0.75; }

.skg-status--verified   strong { color: #16a34a; }
.skg-status--unverified strong { color: #6b7280; }
.skg-status--reported   strong { color: #d97706; }

.skg-agency-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.skg-agency-card {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    padding: 1rem 1.1rem;
}
.skg-agency-name { margin: 0 0 0.4rem; font-size: 1.05em; }
.skg-agency-summary { margin: 0 0 0.6rem; opacity: 0.85; }
.skg-agency-card--reported { border-color: #d97706; }

.skg-fineprint {
    font-size: 0.9em;
    opacity: 0.8;
}

.skg-facts h2 { margin-top: 2rem; }
.skg-facts ul { padding-left: 1.2rem; }

.skg-report {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 2px solid rgba(0, 0, 0, 0.12);
}

.skg-report-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.skg-report-form input[type="text"],
.skg-report-form input[type="email"],
.skg-report-form select,
.skg-report-form textarea {
    width: 100%;
    max-width: 34rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    font: inherit;
    background: transparent;
    color: inherit;
}
.skg-report-form textarea { resize: vertical; }
.skg-report-form p { margin: 1rem 0; }

.skg-optional {
    font-weight: 400;
    opacity: 0.7;
}

/* The honeypot must be invisible to people and visible to nothing else. It is
   not display:none, because a bot that checks visibility would skip it, and
   off-screen is enough to fool a human without fooling a naive checker. */
.skg-hp {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skg-button {
    font: inherit;
    padding: 0.6rem 1.2rem;
    border: 0;
    border-radius: 5px;
    background: #1a1a1a;
    color: #fff;
    cursor: pointer;
}

@media (prefers-color-scheme: dark) {
    .skg-button { background: #f2f2f2; color: #1a1a1a; }
    .skg-status--verified   strong { color: #4ade80; }
    .skg-status--unverified strong { color: #9ca3af; }
    .skg-status--reported   strong { color: #fbbf24; }
}

@media (prefers-reduced-motion: reduce) {
    .skg-report * { scroll-behavior: auto !important; }
}