/* color.css: "more color" layer over Direction B (plat & survey). Loaded LAST on every page.
   Keeps the plat identity (square corners, ruled lines, Archivo/Newsreader) and adds a full palette.
   Text/background pairs meet WCAG AA (4.5:1) for body text. */
:root {
  --c-teal-900: #0B4A5F; --c-teal-700: #0F5E78; --c-teal-500: #1B8FB3; --c-teal-100: #DDF0F6; --c-teal-50: #EEF8FB;
  --c-coral-700: #B83A17; --c-coral-600: #C8431F; --c-coral-100: #FBE3DA;
  --c-amber-500: #F2B33D; --c-amber-100: #FDF1D6; --c-amber-900: #6B4A00;
  --c-leaf-700: #1F6E43; --c-leaf-100: #DDF1E4;
  --c-plum-700: #5B3391; --c-plum-100: #ECE3F7;
  --c-ink: #14202A; --c-paper: #F6FAFB;
  --bg: var(--c-paper); --hl: var(--c-teal-50); --accent: var(--c-teal-700); --line: #BFD3DA;
  --warn: var(--c-amber-900); --ok: var(--c-leaf-700); --cta: var(--c-coral-600); --cta-hover: var(--c-coral-700);
}
@media (prefers-color-scheme: dark) {
  :root { --bg: var(--c-paper); --hl: var(--c-teal-50); --accent: var(--c-teal-700); --line: #BFD3DA; }
}
body { background: var(--bg); }

/* Header: teal band with a coral survey line underneath */
.site-header { background: linear-gradient(90deg, var(--c-teal-900), var(--c-teal-700) 60%, #12708E); border-bottom: 4px solid var(--c-coral-600); }
.site-header .wordmark, .site-header nav a { color: #fff; }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { border-bottom-color: var(--c-amber-500); color: #fff; }
.site-header .tagline, .site-header small { color: #CFE9F2; }
.site-header :focus-visible { outline-color: var(--c-amber-500); }

/* Footer: deep teal instead of graphite, amber top rule */
.site-footer { background: var(--c-teal-900); color: #D3E7EE; border-top: 4px solid var(--c-amber-500); }
.site-footer a:hover { color: var(--c-amber-500); }

/* Headings get a tri-color rule; links teal */
h1 { color: var(--c-ink); }
h1::after { content: ""; display: block; width: 72px; height: 5px; margin-top: 12px; background: linear-gradient(90deg, var(--c-coral-600) 0 33%, var(--c-amber-500) 33% 66%, var(--c-teal-500) 66%); }
h2 { border-top-color: var(--c-teal-700); }
a { color: var(--c-teal-700); }
a:hover { color: var(--c-coral-700); }

/* Buttons: coral primary CTA, teal secondary */
.btn, button.btn, a.btn, .cta, button.primary, .btn-primary { background: var(--cta); border-color: var(--cta); color: #fff; }
.btn:hover, .cta:hover, button.primary:hover, .btn-primary:hover { background: var(--cta-hover); border-color: var(--cta-hover); color: #fff; }
.btn.ghost, .btn-ghost, .btn.secondary { background: #fff; color: var(--c-teal-700); border-color: var(--c-teal-700); }
.btn.ghost:hover, .btn-ghost:hover, .btn.secondary:hover { background: var(--c-teal-700); color: #fff; }
.btn:disabled { background: #7C8C93; border-color: #7C8C93; }

/* Cards: white with a colored top edge, rotating through the palette */
.card { border-color: var(--c-teal-700); border-top: 6px solid var(--c-teal-700); }
.card:nth-of-type(4n+2) { border-top-color: var(--c-coral-600); }
.card:nth-of-type(4n+3) { border-top-color: var(--c-amber-500); }
.card:nth-of-type(4n+4) { border-top-color: var(--c-leaf-700); }
.box { background: var(--c-teal-50); border-color: var(--c-teal-700); }

/* Notices by tone */
.notice { background: var(--c-amber-100); border-color: var(--c-amber-900); color: var(--c-ink); }
.notice.info { background: var(--c-teal-100); border-color: var(--c-teal-700); }
.notice.ok, .notice.success { background: var(--c-leaf-100); border-color: var(--c-leaf-700); }
.notice.err, .notice.error { background: var(--c-coral-100); border-color: var(--c-coral-700); }
.ok { color: var(--c-leaf-700); }
.err { color: var(--c-coral-700); }

/* Tables: teal header row, zebra rows */
table { border-color: var(--c-teal-700); }
th { background: var(--c-teal-700); color: #fff; border-bottom-color: var(--c-teal-900); }
tbody tr:nth-child(even) td { background: var(--c-teal-50); }

/* Tags: filled pills by meaning */
.tag { border-width: 0; color: #fff; background: var(--c-teal-700); }
.tag.auto { background: var(--c-leaf-700); color: #fff; }
.tag.link { background: var(--c-amber-100); color: var(--c-amber-900); }
.tag.premium { background: var(--c-plum-700); color: #fff; }
.tag.risk, .tag.high { background: var(--c-coral-600); color: #fff; }

/* Inputs */
input[type="email"], input[type="text"], input[type="tel"], input[type="search"], select { border-color: var(--c-teal-700); background: #fff; }
input:focus, select:focus { outline: 3px solid var(--c-teal-500); outline-offset: 1px; }

/* Premium / pricing accents */
.premium, .plan.premium { border-color: var(--c-plum-700); }
.plan.premium .btn { background: var(--c-plum-700); border-color: var(--c-plum-700); }

/* Human-assisted research page layout */
main.assisted { max-width: 980px; margin: 0 auto; padding: 28px 24px 56px; box-sizing: border-box; }
main.assisted .lede { font-size: 19px; max-width: 46em; }
main.assisted .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
main.assisted .card { background: #fff; border: 1.5px solid var(--c-teal-700); border-top-width: 6px; padding: 22px; }
main.assisted .card.premium { border-color: var(--c-plum-700); }
main.assisted .card h3 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 0; }
main.assisted ul { padding-left: 1.2em; }
main.assisted form label { font-size: 16px; }
main.assisted form input[type="text"], main.assisted form input[type="email"] { min-height: 46px; padding: 0 12px; font-size: 17px; box-sizing: border-box; }
main.assisted fieldset label { display: inline-flex; gap: 8px; align-items: center; min-height: 36px; }
@media (max-width: 560px) { main.assisted { padding: 20px 16px 40px; } }