:root { --ink: #132b29; --muted: #6b7d79; --line: #dce6e1; --paper: #f6f8f3; --panel: #fff; --mint: #dcebe1; --green: #2d6152; --green-dark: #1d4840; --orange: #e56f36; --orange-soft: #fff0e8; --amber: #bd7b26; --purple: #7652a7; --shadow: 0 16px 40px rgba(24, 58, 51, .08); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: 'DM Sans', system-ui, sans-serif; line-height: 1.5; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.topbar { height: 72px; padding: 0 clamp(20px, 5vw, 76px); display: flex; justify-content: space-between; align-items: center; background: var(--green-dark); color: white; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: white; text-decoration: none; font-size: 12px; letter-spacing: .13em; font-weight: 700; }
.brand em, .footer em { color: #a9cdbb; font-style: normal; font-weight: 500; }
.brand-mark { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid #9fc2b1; border-radius: 50%; font-size: 17px; color: #b4dcc8; transform: rotate(-8deg); }
.topbar-meta { color: #b8cec5; font: 11px 'DM Mono', monospace; letter-spacing: .02em; }.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #94d6b1; box-shadow: 0 0 0 4px rgba(148,214,177,.12); }.slash { padding: 0 10px; color: #5e8779; }
.page-shell { max-width: 1380px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 76px) 76px; }
.hero { min-height: 385px; display: flex; justify-content: space-between; gap: 40px; align-items: flex-end; padding: 76px 0 66px; border-bottom: 1px solid var(--line); }.hero-copy { max-width: 790px; }.eyebrow { margin: 0 0 16px; color: var(--green); font: 500 10px 'DM Mono', monospace; letter-spacing: .14em; }.eyebrow span { color: var(--orange); padding: 0 3px; }.hero h1 { margin: 0; font-size: clamp(45px, 6vw, 82px); letter-spacing: -.065em; line-height: .99; font-weight: 600; }.hero h1 i, .heading-arrow { color: var(--orange); font-family: 'Playfair Display', Georgia, serif; font-weight: 600; }.hero-lede { max-width: 480px; margin: 26px 0 30px; color: #58706a; font-size: 16px; }.hero-actions { display: flex; align-items: center; gap: 25px; }.button { border: 0; cursor: pointer; border-radius: 4px; padding: 13px 18px; font-weight: 700; font-size: 12px; transition: transform .2s, background .2s; }.button:hover { transform: translateY(-1px); }.button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid #f3ae82; outline-offset: 3px; }.button-primary { color: #fff; background: var(--orange); box-shadow: 0 5px 13px rgba(229,111,54,.2); }.button-primary span { margin-left: 16px; font-size: 16px; }.text-link { color: var(--green); font-size: 12px; font-weight: 700; text-decoration: none; border-bottom: 1px solid #a3bbb0; padding-bottom: 3px; }.text-link span, .limitations a span { margin-left: 8px; color: var(--orange); }.hero-note { max-width: 275px; margin-bottom: 4px; padding-left: 20px; border-left: 1px solid #b8cbc1; color: #617670; font-size: 12px; }.hero-note p { margin: 12px 0 0; }.hero-note strong { color: var(--ink); }.note-pin { color: var(--orange); font-size: 24px; }
.summary-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }.summary-item { min-height: 124px; padding: 26px 25px; border-right: 1px solid var(--line); }.summary-item:first-child { padding-left: 0; }.summary-item:last-child { border-right: 0; }.summary-label { display: block; color: #789088; font: 500 9px 'DM Mono', monospace; letter-spacing: .1em; }.summary-item strong { display: block; margin: 7px 0 1px; color: var(--green-dark); font: 600 30px 'Playfair Display', Georgia, serif; }.summary-item strong .unit { font: 16px 'DM Sans', sans-serif; }.summary-item .accent-number { color: var(--orange); }.summary-sub { color: #7a8d87; font-size: 11px; }.health { color: var(--green); }.health-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #58a978; }.summary-callout { background: #edf4ee; padding-left: 28px; }
.workspace { padding: 72px 0 64px; }.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }.section-heading h2, .method-intro h2, .sources-section h2 { margin: 0; font: 600 clamp(30px, 3.2vw, 46px)/1.05 'Playfair Display', Georgia, serif; letter-spacing: -.04em; }.controls { display: flex; gap: 9px; }.search-wrap, .select-wrap { display: flex; align-items: center; border: 1px solid #ccdcd5; background: white; border-radius: 4px; color: #79918a; }.search-wrap { padding: 0 11px; }.search-wrap span { font-size: 22px; transform: rotate(-15deg); }.search-wrap input { border: 0; width: 130px; padding: 10px 8px; outline: none; color: var(--ink); font-size: 12px; }.select-wrap select { border: 0; padding: 11px 28px 11px 12px; background: transparent; color: var(--green-dark); font-size: 11px; outline: none; }
.site-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.site-card { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 22px; box-shadow: 0 5px 20px rgba(31,70,59,.02); cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }.site-card:hover, .site-card.selected { border-color: #96b6a6; box-shadow: var(--shadow); transform: translateY(-2px); }.site-card.selected { border-top: 3px solid var(--orange); padding-top: 20px; }.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }.site-card h3 { margin: 0; font-size: 17px; letter-spacing: -.02em; }.site-card .address { color: #7c8c87; font-size: 11px; margin: 4px 0 22px; }.status-pill { flex: 0 0 auto; padding: 5px 7px; border-radius: 3px; font: 500 9px 'DM Mono', monospace; letter-spacing: .04em; }.status-pill.review { color: #b35b27; background: var(--orange-soft); }.status-pill.watch { color: #8b671d; background: #fff5dd; }.status-pill.clear { color: #478166; background: #e9f4ec; }.signal-row { padding-top: 13px; border-top: 1px solid #e6ede9; display: flex; justify-content: space-between; gap: 12px; align-items: center; }.signal-count { color: var(--green-dark); font: 600 20px 'Playfair Display', serif; }.signal-label { color: #768b83; font-size: 11px; }.signal-change { color: var(--orange); font: 500 10px 'DM Mono', monospace; }.signal-change.muted { color: #8ba098; }.empty-state { padding: 30px; color: var(--muted); text-align: center; background: white; border: 1px dashed var(--line); }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(280px, .75fr); gap: 44px; align-items: start; padding: 8px 0 80px; }.section-heading.compact { margin-bottom: 8px; align-items: center; }.section-heading.compact h2 { font-size: clamp(28px, 3vw, 39px); }.heading-arrow { display: inline-block; font-size: .8em; transform: translateY(-3px); }.icon-button { border: 0; color: var(--green); background: transparent; cursor: pointer; font-size: 14px; }.icon-button span { margin-left: 6px; font-size: 11px; font-weight: 700; }.selected-meta { display: flex; flex-wrap: wrap; gap: 8px; color: #7b8d87; font: 10px 'DM Mono', monospace; margin-bottom: 24px; }.selected-meta strong { color: var(--green-dark); font-weight: 500; }.evidence-list { display: grid; gap: 9px; }.evidence-card { display: grid; grid-template-columns: 8px 1fr auto; gap: 16px; align-items: start; padding: 18px 20px 18px 0; background: white; border: 1px solid var(--line); border-radius: 4px; }.evidence-bar { width: 4px; height: 100%; min-height: 72px; border-radius: 0 4px 4px 0; background: var(--green); }.evidence-bar.amber { background: var(--amber); }.evidence-bar.purple { background: var(--purple); }.evidence-content h3 { margin: 0 0 4px; font-size: 14px; }.evidence-content p { margin: 0; color: #6f817a; font-size: 12px; line-height: 1.45; max-width: 680px; }.evidence-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 11px; color: #80948c; font: 9px 'DM Mono', monospace; }.evidence-meta strong { color: var(--green); font-weight: 500; }.fact-badge { display: inline-block; margin-right: 7px; padding: 3px 5px; border-radius: 2px; color: #38725e; background: #e9f4ec; font: 500 9px 'DM Mono', monospace; }.fact-badge.amber { color: #95641d; background: #fff3d9; }.fact-badge.purple { color: #6d489d; background: #f1eafd; }.evidence-link { align-self: center; color: var(--orange); font-size: 17px; text-decoration: none; }.evidence-link:hover { transform: translate(1px, -1px); }
.action-panel { padding: 24px; background: var(--green-dark); color: white; border-radius: 4px; box-shadow: var(--shadow); }.action-top { display: flex; justify-content: space-between; align-items: start; }.action-panel .eyebrow { color: #9cc5b3; }.queue-count { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid #5e8878; border-radius: 50%; color: #bcdfcc; font: 10px 'DM Mono', monospace; }.action-panel h3 { margin: 5px 0 7px; color: white; font: 600 25px 'Playfair Display', serif; }.aside-copy { margin: 0 0 23px; color: #b4ccc2; font-size: 11px; }.action-list { margin: 0 0 25px; padding: 0; list-style: none; counter-reset: review; }.action-list li { position: relative; min-height: 53px; padding: 0 0 15px 33px; border-left: 1px solid #5a8475; color: #e0eee6; font-size: 11px; counter-increment: review; }.action-list li::before { position: absolute; left: -14px; top: -3px; display: grid; place-items: center; width: 26px; height: 26px; content: counter(review, decimal-leading-zero); border: 1px solid #77a591; border-radius: 50%; color: #a9d1bd; background: var(--green-dark); font: 9px 'DM Mono', monospace; }.action-list li:last-child { border-left-color: transparent; }.action-list li + li { padding-top: 5px; }.action-list li small { display: block; margin-top: 4px; color: #8cb3a2; font: 9px 'DM Mono', monospace; }.button-secondary { color: var(--green-dark); background: #d8ebe0; }.full-width { width: 100%; }.review-note { min-height: 16px; margin: 10px 0 0; color: #a9d8be; font: 10px 'DM Mono', monospace; }
.method-section { display: grid; grid-template-columns: .8fr 1.6fr; gap: 70px; padding: 62px 0; border-top: 1px solid var(--line); }.method-intro p:not(.eyebrow) { max-width: 310px; color: #6f837b; font-size: 13px; }.method-cards { display: grid; gap: 10px; }.method-card { display: flex; gap: 17px; padding: 18px 20px; background: white; border: 1px solid var(--line); border-radius: 4px; }.method-icon { color: var(--green); font-size: 27px; line-height: 1; }.method-icon.amber { color: var(--amber); }.method-icon.purple { color: var(--purple); }.method-card h3 { margin: 0 0 3px; font-size: 13px; }.method-card p { margin: 0; color: #71847c; font-size: 11px; }
.limitations { display: grid; grid-template-columns: 1.05fr 2fr auto; gap: 24px; align-items: center; margin: 0 0 74px; padding: 21px 24px; border: 1px solid #f0c6ad; background: #fff7f1; color: #815b47; font-size: 11px; }.limitation-title { display: flex; align-items: center; gap: 10px; color: #a6592d; }.warning { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #f4c7a8; color: #9d522d; font: 700 12px 'DM Mono', monospace; }.limitations p { margin: 0; }.limitations a { color: #a6592d; font-weight: 700; white-space: nowrap; text-decoration: none; }
.sources-section { padding-bottom: 58px; }.sources-section > div:first-child { margin-bottom: 25px; }.source-table { background: white; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }.source-row { display: grid; grid-template-columns: 1.25fr 1.35fr 1fr .75fr; gap: 18px; align-items: center; padding: 13px 18px; border-bottom: 1px solid #e6ede9; color: #637770; font-size: 11px; }.source-row:last-child { border-bottom: 0; }.source-header { color: #789088; background: #f2f6f2; font: 500 9px 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }.source-row strong { display: block; color: var(--green-dark); font-size: 12px; }.source-row small { display: block; color: #91a19c; font: 9px 'DM Mono', monospace; }.source-state { justify-self: start; padding: 4px 6px; border-radius: 2px; font: 500 9px 'DM Mono', monospace; }.source-state.approved { color: #438264; background: #eaf4ec; }.source-state.conditional { color: #996720; background: #fff3d7; }
.footer { display: flex; justify-content: space-between; padding: 22px clamp(20px, 5vw, 76px); color: #94aaa0; background: var(--green-dark); font: 10px 'DM Mono', monospace; letter-spacing: .04em; }.toast { position: fixed; right: 24px; bottom: 24px; max-width: 310px; padding: 13px 16px; color: white; background: var(--green-dark); border-left: 3px solid var(--orange); border-radius: 3px; box-shadow: var(--shadow); font-size: 12px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s, transform .25s; }.toast.show { opacity: 1; transform: translateY(0); }
@media (max-width: 920px) { .hero { align-items: flex-start; flex-direction: column; }.hero-note { margin: 0; max-width: 400px; }.detail-layout, .method-section { grid-template-columns: 1fr; gap: 32px; }.method-intro p:not(.eyebrow) { max-width: 550px; }.limitations { grid-template-columns: 1fr 2fr; }.limitations a { grid-column: 2; } }
@media (max-width: 680px) { .topbar { height: 62px; }.topbar-meta { display: none; }.page-shell { padding-left: 17px; padding-right: 17px; }.hero { padding: 55px 0 43px; }.hero h1 { font-size: 48px; }.hero-lede { font-size: 14px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }.summary-strip { grid-template-columns: 1fr 1fr; }.summary-item, .summary-item:first-child { min-height: 105px; padding: 19px 12px; }.summary-item:nth-child(2) { border-right: 0; }.summary-callout { padding-left: 12px; }.summary-item strong { font-size: 25px; }.section-heading { align-items: flex-start; flex-direction: column; }.controls { width: 100%; }.search-wrap { flex: 1; }.search-wrap input { width: 100%; }.select-wrap select { max-width: 135px; }.workspace { padding: 49px 0 47px; }.site-grid { grid-template-columns: 1fr; }.evidence-card { grid-template-columns: 7px 1fr; padding-right: 15px; }.evidence-link { display: none; }.evidence-content p { font-size: 11px; }.icon-button span { display: none; }.action-panel { margin-top: 5px; }.method-section { padding: 48px 0; }.limitations { display: block; padding: 18px; }.limitations p { margin: 13px 0; }.limitations a { display: inline-block; }.source-table { overflow-x: auto; }.source-row { min-width: 690px; }.footer { align-items: flex-start; flex-direction: column; gap: 8px; padding: 20px 17px; } }
@media print { .topbar, .hero-actions, .controls, .site-grid, .method-section, .limitations, .sources-section, .footer, .action-panel, .icon-button { display: none !important; }.page-shell { padding: 20px; }.detail-layout { display: block; }.evidence-card { break-inside: avoid; }.hero { min-height: auto; padding: 20px 0; }.toast { display: none; } }