/* Site chrome for the pro tools.
 *
 * The tools are self-contained pages with their own layout, so they cannot
 * simply load /static/style.css: that stylesheet claims `*`, `body`, `a` and
 * `.lede`, all of which the tools already style themselves. This carries only
 * the header and footer, with every rule scoped under `header.site` or
 * `footer.site` so nothing can reach into a tool's own markup.
 *
 * The variables are duplicated rather than imported for the same reason —
 * pulling in style.css to get :root would drag the rest with it. If the site
 * palette changes, change it in both places.
 */

header.site,
footer.site {
    --chrome-surface: #ffffff;
    --chrome-border: #e3e2df;
    --chrome-text: #1d1c1a;
    --chrome-muted: #6b6a66;
    --chrome-accent: #b34700;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Helvetica, Arial, sans-serif;
}

header.site {
    border-bottom: 1px solid var(--chrome-border);
    background: var(--chrome-surface);
}

footer.site {
    border-top: 1px solid var(--chrome-border);
    background: var(--chrome-surface);
    color: var(--chrome-muted);
    font-size: 0.85rem;
}

header.site .wrap,
footer.site .wrap {
    max-width: 62rem;
    margin: 0 auto;
    box-sizing: border-box;
}

header.site .wrap {
    padding: 1.25rem;
    display: flex;
    align-items: baseline;
    gap: 1.5rem;
    flex-wrap: wrap;
}

footer.site .wrap {
    padding: 1.5rem 1.25rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

footer.site .wrap .spacer { flex: 1; }

header.site .brand {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--chrome-text);
    text-decoration: none;
}

header.site .brand span { color: var(--chrome-accent); }

header.site nav.site {
    display: flex;
    gap: 1.25rem;
    margin-left: auto;
}

header.site nav.site a,
footer.site a {
    color: var(--chrome-muted);
    text-decoration: none;
    font-size: 0.9rem;
}

header.site nav.site a:hover,
footer.site a:hover { color: var(--chrome-accent); }

/* Marks the page as a paid tool, next to the brand. */
header.site .tag {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--chrome-accent);
    background: #fdf3ec;
    border: 1px solid #f0d9c6;
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
}