/* Page styles for the server-rendered SEO surface (/browse, /chemical/{cas}, /hazard/*, /use/*,
   /hpv), rendered by backend/src/cpd/modules/public/seo.py.

   WHY THIS IS A FILE AND NOT AN INLINE <style>
   These pages were shipping their CSS inline, and the Python app sets
   `Content-Security-Policy: default-src 'none'` on every response (http_setup.py) because it was
   written for a JSON API. With no style-src, CSP falls back to default-src — so the browser
   silently discarded the page's own stylesheet and rendered raw HTML: serif type, no cards, hub
   links running together. The SEO pages are the ones a stranger arriving from Google sees FIRST,
   so this was broken exactly where it was least visible to us and most visible to them.

   Serving the CSS from the same origin lets the policy stay strict — `style-src 'self'` rather
   than 'unsafe-inline' — and, more usefully, lets these pages share snrl.css's design tokens
   instead of carrying a second, drifting palette. Only page-specific classes live here; colours
   and type come from snrl.css. */

/* A narrower reading column than the marketing pages' .wrap (1140px): these are dense reference
   documents, and a 1140px measure is unreadable for body text. */
.seo-wrap { max-width: 820px; margin: 0 auto; padding: 28px 24px 60px }
/* snrl.css sets `a{color:inherit}` for the shell's nav, so content links must ask for the accent
   explicitly or they render as plain black text. */
.seo-wrap a { color: var(--blue) }
.seo-wrap a:hover { text-decoration: underline }
.seo-wrap h1 { font-size: 1.9rem; line-height: 1.15; letter-spacing: -.03em; margin: 0 0 4px }
.seo-wrap h2 { font-size: 1.15rem; letter-spacing: -.02em; margin: 30px 0 4px; font-weight: 700 }
.seo-wrap .item, .seo-wrap .hub a { color: var(--ink) }

.crumb { font-size: .85rem; color: var(--ink-3); margin: 0 0 14px }
.sub { color: var(--ink-3); font-family: var(--mono) }
.lede { color: var(--ink-2); margin: 8px 0 0 }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
        padding: 6px 20px; margin-top: 20px }
.row { display: grid; grid-template-columns: 150px 1fr; gap: 8px; padding: 13px 0;
       border-top: 1px solid var(--line) }
.row:first-child { border-top: 0 }
dt { color: var(--ink-3); font-size: .85rem }
dd { margin: 0 }

.tag { display: inline-block; font-size: .82rem; padding: 2px 10px; border-radius: 999px;
       background: var(--surface-2); border: 1px solid var(--line); margin: 0 5px 5px 0 }
.sig { font-weight: 700 }

.cta { display: inline-block; margin-top: 22px; background: var(--blue); color: #fff;
       font-weight: 600; padding: 10px 18px; border-radius: 9px }
.cta:hover { background: var(--blue-dark) }
.foot { color: var(--ink-3); font-size: .82rem; margin-top: 26px }

/* Provenance badges. Each carries its own WORD as well as its colour, so the distinction survives
   a monochrome printout or a colour-blind reader. */
.prov { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 600;
        padding: 3px 11px; border-radius: 999px }
.prov.harmonised { background: var(--green-soft); color: var(--green); border: 1px solid #bfe6cd }
.prov.aggregated { background: var(--amber-soft); color: var(--amber); border: 1px solid #f3e2b3 }
.prov.identity { background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line) }
.prov.declared { background: var(--amber-soft); color: var(--amber); border: 1px dashed #e6c866 }
.provnote { color: var(--ink-3); font-size: .8rem; margin-top: 6px }

/* Substance link grid, and the category hub tiles. display:block on the anchor is what stops the
   hub list collapsing into one run-on line of text. */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px;
        margin-top: 18px }
.item { display: block; background: var(--surface); border: 1px solid var(--line);
        border-radius: 10px; padding: 11px 14px }
.item:hover { border-color: var(--blue) }
.item .nm { display: block; font-weight: 600; color: var(--ink); letter-spacing: -.01em;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.item .cs { display: block; color: var(--ink-3); font-size: .8rem; font-family: var(--mono) }

.hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px;
       margin-top: 14px }
.hub a { display: block; background: var(--surface); border: 1px solid var(--line);
         border-radius: 10px; padding: 13px 15px; font-weight: 600 }
.hub a:hover { border-color: var(--blue) }
.hub .n { display: block; color: var(--ink-3); font-size: .8rem; font-weight: 400 }

.pager { display: flex; justify-content: space-between; align-items: center; margin-top: 24px;
         font-weight: 600 }
.pager span { color: var(--line-strong) }

/* Was an inline style= attribute, which `style-src 'self'` blocks just as surely as a <style>
   block — moving the <style> out and leaving these behind would have half-fixed the page. */
.legal { margin: 32px 0 8px; padding: 12px 14px; border: 1px solid var(--line);
         border-radius: 10px; background: var(--amber-soft); font-size: .82rem; line-height: 1.55;
         color: var(--ink-2) }
.backlink { margin-top: 14px }