/* ============================================================
   Header and footer for the tool and data pages, matched to the
   landing page and tools hub (built from the approved boards).
   Then the TPO Kit look for the free tools: black, white and
   greys, rounded cards on a grey stage, the key result on a black
   tile. No product color appears on a tool.
   ============================================================ */

/* ---------- header ---------- */
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 16px; top: 12px; z-index: 50; background: #fff; padding: 8px 12px; }
.site-head { background: #fff; border-bottom: 1px solid #D9DDE3; position: relative; z-index: 20; }
.site-head .wrap, .site-foot .wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.site-head .bar { display: flex; align-items: center; gap: 32px; height: 72px; }
.site-head .brand, .site-foot .brand { font-weight: 800; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: #0C0E12; }
.site-nav { display: flex; gap: 28px; margin-left: auto; }
.site-nav a { text-decoration: none; font-size: 15px; font-weight: 500; color: #4A5261; }
.site-nav a:hover, .site-nav a[aria-current] { color: #0C0E12; }
.site-nav a[aria-current] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.hbtn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border-radius: 6px; background: #0C0E12; color: #fff; font-weight: 600; font-size: 14.5px; text-decoration: none; white-space: nowrap; }
.hbtn:hover { background: #000; color: #fff; text-decoration: none; }
.site-head :focus-visible, .site-foot :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (max-width: 640px) {
  .site-head .wrap, .site-foot .wrap { padding: 0 20px; }
  .site-head .bar { display: grid; grid-template-columns: auto auto; justify-content: space-between; height: auto; padding-top: 12px; gap: 0; }
  .site-nav { grid-column: 1 / -1; grid-row: 2; margin: 12px -20px 0; padding: 11px 20px; border-top: 1px solid #D9DDE3; gap: 24px; }
  .site-nav a { font-size: 14.5px; }
  .site-head .brand { font-size: 14px; }
  .hbtn { height: 38px; padding: 0 14px; font-size: 14px; }
}

/* ---------- footer ---------- */
.site-foot { background: #06090F; color: rgba(255,255,255,.7); padding: 72px 0 40px; font-size: 15px; }
.site-foot a { color: inherit; }
.site-foot .brand { color: #fff; }
.site-foot .tag { margin-top: 14px; max-width: 22em; }
.foot-grid { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,4fr) minmax(0,3fr); gap: 48px; }
.foot-h { color: #fff; font-weight: 600; font-size: 14px; margin-bottom: 14px; }
.foot-list li + li { margin-top: 8px; }
.foot-list a { text-decoration: none; }
.foot-list a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.foot-mail { margin-top: 14px; }
.foot-mail a { color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.4); }
.foot-notices { margin-top: 32px; font-size: 14px; }
.foot-base { margin-top: 64px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); font-size: 13.5px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .foot-grid { grid-template-columns: 1fr; gap: 36px; } }

/* ============================================================
   TPO Kit
   ============================================================ */
body.kit { --k0: #0A0A0B; --k1: #2B2C30; --k2: #60636B; --k3: #B9BCC2; --k4: #E4E5E8; --k5: #F3F3F4; --kst: #EAEBEE; }
body.kit .on-paper, body.kit .page-head, body.kit .asks, body.kit .shared-note { background: var(--k5); }
body.kit .page-head { border-bottom-color: var(--k4); }
.kit-mark { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px; letter-spacing: .02em; color: var(--k0, #0A0A0B); margin: 0 0 14px; }
.kit-mark i { width: 12px; height: 12px; background: var(--k0, #0A0A0B); display: inline-block; }
.prod-mark { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; margin: 0 0 14px; }
.prod-mark i { width: 12px; height: 12px; display: inline-block; }
.prod-mark .mark-clay { background: #C9450F; }
.prod-mark .mark-purple { background: #7C4DFF; }

/* buttons and focus: black and white */
body.kit .btn-primary, body.kit .btn-feed { background: var(--k0); border-color: var(--k0); color: #fff; }
body.kit .btn-primary:hover, body.kit .btn-feed:hover { background: #000; }
body.kit .btn-secondary { background: #fff; color: var(--k0); border: 1.5px solid var(--k0); }
body.kit .btn-secondary:hover { background: var(--k0); color: #fff; }
body.kit button[disabled], body.kit .btn[disabled] { opacity: .45; cursor: not-allowed; }
body.kit button[disabled]:hover { background: #fff; color: var(--k0); }
body.kit :focus-visible { outline-color: var(--k0); }
body.kit input:focus, body.kit select:focus, body.kit textarea:focus { border-color: var(--k0); box-shadow: 0 0 0 2px rgba(10,10,11,.15); }

/* inputs panel: white card; options in grey */
body.kit .panel { border-color: var(--k4); border-radius: 14px; }
body.kit .opt { background: var(--k5); border-color: var(--k4); border-radius: 12px; }

/* results: rounded white cards on a grey stage, the key result on black */
body.kit .results > .panel { background: var(--kst); border: 0; padding: 0; overflow: hidden; box-shadow: 0 1px 2px rgba(10,10,11,.06), 0 28px 56px -28px rgba(10,10,11,.35); }
body.kit .results > .panel > * { margin-left: 18px; margin-right: 18px; }
body.kit .results > .panel > .kit-strip { margin: 0; }
body.kit .results > .panel > .kit-foot { margin: 16px 0 0; }
.kit-strip { display: flex; align-items: center; gap: 12px; padding: 11px 18px; background: #0A0A0B; color: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.kit-strip-mark { font-weight: 800; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; }
.kit-strip-mark i { display: inline-block; width: 9px; height: 9px; background: #fff; margin-right: 8px; vertical-align: 1px; }
.kit-strip-tool { font-size: 13px; font-weight: 600; color: #C9CBD0; }
body.kit .results .reg-notice { margin-top: 16px; background: #fff; border: 1px solid var(--k3); border-radius: 10px; }
body.kit .results .prepared.show { background: #fff; border: 0; border-radius: 12px; }
body.kit .results .answer { background: #fff; border-radius: 12px; padding: 16px 18px; margin-bottom: 12px; }
body.kit .stats { gap: 12px; margin-bottom: 12px; }
body.kit .stat { background: #fff; border: 0; border-radius: 12px; }
body.kit .stat.lead { background: var(--k0); color: #fff; border: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body.kit .stat.lead .k { color: #C9CBD0; }
body.kit .results .table-wrap { background: #fff; border-radius: 12px; padding: 6px 14px 8px; }
body.kit table.grid thead th { border-bottom-color: var(--k0); color: var(--k2); }
body.kit table.grid th, body.kit table.grid td { border-bottom-color: var(--k4); }
body.kit table.grid tr.apr th, body.kit table.grid tr.apr td { font-weight: 800; color: var(--k0); }
body.kit table.grid tr.total td, body.kit table.grid tr.total th { border-top-color: var(--k0); }
body.kit .badge { background: var(--k0); color: #fff; border-color: var(--k0); border-radius: 999px; padding: 2px 8px; }
body.kit .results h3 { margin-top: 20px !important; }
body.kit .results .chart { background: #fff; border-radius: 12px; padding: 12px 14px; }
body.kit .flag { background: #fff; border-left-color: var(--k0); border-radius: 0 10px 10px 0; }
body.kit .actions { margin-top: 14px; }
body.kit .status { margin-bottom: 0; }
.gate-note { margin: 14px 0 0; padding: 12px 14px; background: #fff; border: 1.5px solid #0A0A0B; border-radius: 10px; font-weight: 700; font-size: 14.5px; }
.ask-inline { font-weight: 700; }
.kit-note { font-size: 12px; color: var(--k2, #60636B); margin-top: 10px; }
.kit-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 18px; border-top: 1px solid var(--k4, #E4E5E8); background: #fff; font-size: 12px; color: var(--k2, #60636B); }
.kit-foot b { color: var(--k0, #0A0A0B); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

/* charts in greys: the figure that matters in black */
body.kit .chart .s0 { stroke: var(--k0); stroke-width: 3; }
body.kit .chart .s1 { stroke: var(--k2); stroke-width: 2.25; stroke-dasharray: none; }
body.kit .chart .s2 { stroke: var(--k3); stroke-width: 2.25; stroke-dasharray: none; }
body.kit .chart .axis { stroke: var(--k4); stroke-dasharray: 3 3; }
body.kit .legend i { border-top: 3px solid var(--k0); }
body.kit .legend i.l1 { border-top: 3px solid var(--k2); }
body.kit .legend i.l2 { border-top: 3px solid var(--k3); }

/* DTI: the county limit over time */
.limit-hist { background: #fff; border-radius: 12px; padding: 14px 16px; margin-top: 12px; }
.limit-hist h3 { font-size: 13px !important; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--k2, #60636B); margin: 0 0 10px !important; }
.lh-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lh-kpis > div { background: var(--k5, #F3F3F4); border-radius: 10px; padding: 10px 12px; }
.lh-kpis .k { display: block; font-size: 12px; color: var(--k2, #60636B); font-weight: 600; }
.lh-kpis b { display: block; font-size: 19px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }
.lh-kpis b span { display: block; font-size: 12px; font-weight: 600; color: var(--k1, #2B2C30); }
.hbars { display: flex; align-items: flex-end; gap: 10px; height: 150px; margin-top: 14px; }
.hbar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.hbar i { display: block; width: 100%; max-width: 72px; background: var(--k3, #B9BCC2); border-radius: 5px 5px 0 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.hbar.now i { background: var(--k0, #0A0A0B); }
.hbar .hv { font-size: 10.5px; font-weight: 600; margin-bottom: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hbar.now .hv { font-weight: 800; }
.hbar .hy { font-size: 11px; color: var(--k2, #60636B); margin-top: 4px; }
@media (max-width: 560px) { .hbar .hv { font-size: 9px; } .lh-kpis b { font-size: 16px; } .hbars { gap: 6px; } }

/* tool cards and product blocks */
body.kit .tool-card { border-color: var(--k4); border-radius: 14px; }
body.kit .tool-card:hover { border-color: var(--k0); }
body.kit .next-card { border-color: var(--k4); border-radius: 14px; }
body.kit .next-card ul li strong { font-weight: 700; }
body.kit .crumbs a:hover { color: var(--k0); }
body.kit .kpis .stat { background: var(--k5); }

@media print {
  .site-head, .site-foot, .skip, .gate-note { display: none !important; }
  body.kit .results > .panel { box-shadow: none; background: #fff; }
  .kit-strip, .kit-foot { display: flex !important; }
}
body.kit .results .answer { font-family: 'Figtree', sans-serif; font-size: clamp(18px, 1.7vw, 21px); font-weight: 500; line-height: 1.45; }
body.kit .results .answer strong { font-weight: 800; }