| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <title>Riprap — auditable flood-exposure report</title> |
| <link rel="stylesheet" href="/static/style.css"> |
| <style> |
| :root { |
| --paper-w: 8.5in; |
| --paper-pad: 0.55in; |
| } |
| * { box-sizing: border-box; } |
| body { |
| background: #e9eef5; margin: 0; padding: 24px 0; |
| font-family: var(--font-sans), system-ui, sans-serif; |
| color: var(--text); |
| } |
| .report-controls { |
| max-width: var(--paper-w); margin: 0 auto 16px; padding: 0 12px; |
| display: flex; gap: 12px; align-items: center; |
| } |
| .report-controls .lhs { |
| font-size: 12px; color: var(--text-muted); |
| } |
| .report-controls .actions { |
| margin-left: auto; display: flex; gap: 8px; |
| } |
| .btn-primary { |
| padding: 8px 16px; border: 0; border-radius: 4px; |
| background: var(--nyc-blue); color: white; |
| font-weight: 600; font-size: 13px; cursor: pointer; |
| font-family: inherit; |
| } |
| .btn-secondary { |
| padding: 8px 16px; border: 1px solid var(--line); |
| background: var(--panel); color: var(--text); |
| border-radius: 4px; font-size: 13px; cursor: pointer; |
| font-family: inherit; font-weight: 500; |
| } |
| .btn-primary:hover { background: #0f329d; } |
| .btn-secondary:hover { background: var(--bg-soft); } |
| |
| .paper { |
| background: white; |
| width: var(--paper-w); |
| margin: 0 auto; |
| padding: var(--paper-pad); |
| box-shadow: 0 4px 24px rgba(0,0,0,0.08); |
| font-size: 11pt; |
| line-height: 1.45; |
| color: #111; |
| } |
| |
| |
| .r-head { |
| border-bottom: 2px solid #111; |
| padding-bottom: 12px; margin-bottom: 18px; |
| } |
| .r-brand { |
| font-weight: 700; font-size: 18pt; color: var(--nyc-blue); |
| letter-spacing: -0.01em; |
| } |
| .r-tagline { |
| font-size: 9pt; color: #555; margin-top: 2px; |
| text-transform: uppercase; letter-spacing: 0.06em; |
| } |
| .r-meta-grid { |
| display: grid; grid-template-columns: max-content 1fr; |
| gap: 4px 12px; font-size: 9.5pt; margin-top: 12px; |
| } |
| .r-meta-grid dt { |
| color: #666; font-weight: 600; |
| text-transform: uppercase; letter-spacing: 0.05em; |
| font-size: 8.5pt; |
| } |
| .r-meta-grid dd { margin: 0; color: #111; } |
| .r-meta-grid dd.mono { font-family: var(--mono); font-size: 9pt; } |
| |
| .r-section { |
| margin-top: 22px; |
| page-break-inside: avoid; |
| } |
| .r-section h2 { |
| font-size: 9pt; font-weight: 700; |
| text-transform: uppercase; letter-spacing: 0.10em; |
| color: #444; margin: 0 0 8px; |
| border-bottom: 1px solid #ccc; padding-bottom: 4px; |
| } |
| .r-section .lead { font-size: 10pt; color: #333; margin-bottom: 8px; } |
| |
| .r-query { |
| background: #f5f7fb; padding: 10px 14px; |
| border-left: 3px solid var(--nyc-blue); |
| font-style: italic; font-size: 11pt; color: #222; |
| } |
| |
| .r-plan { |
| display: grid; grid-template-columns: max-content 1fr; |
| gap: 4px 12px; font-size: 9.5pt; |
| } |
| .r-plan dt { |
| color: #666; font-weight: 600; |
| text-transform: uppercase; letter-spacing: 0.05em; font-size: 8pt; |
| } |
| .r-plan dd { margin: 0; } |
| .r-plan dd.mono { font-family: var(--mono); font-size: 9pt; } |
| .r-plan-rationale { |
| grid-column: 1 / -1; |
| margin-top: 6px; padding-top: 6px; |
| border-top: 1px dotted #ccc; |
| color: #444; font-style: italic; font-size: 9.5pt; |
| } |
| |
| .r-trace { |
| width: 100%; border-collapse: collapse; font-size: 8.5pt; |
| } |
| .r-trace th, .r-trace td { |
| text-align: left; padding: 5px 8px; |
| border-bottom: 1px solid #eee; |
| vertical-align: top; |
| } |
| .r-trace th { |
| background: #f5f7fb; color: #444; |
| font-weight: 700; text-transform: uppercase; |
| letter-spacing: 0.05em; font-size: 7.5pt; |
| } |
| .r-trace tr.ok .mark { color: #1a8754; } |
| .r-trace tr.err .mark { color: #c0392b; } |
| .r-trace .mono { font-family: var(--mono); } |
| .r-trace .mark { font-weight: 700; } |
| .r-trace .result { |
| font-family: var(--mono); font-size: 7.5pt; |
| color: #555; word-break: break-word; |
| max-width: 280px; |
| } |
| .r-trace .err-msg { |
| color: #c0392b; font-style: italic; font-size: 8pt; |
| } |
| |
| .r-map { margin-top: 6px; } |
| .r-map img { |
| width: 100%; height: auto; display: block; |
| border: 1px solid #ddd; border-radius: 2px; |
| } |
| .r-map .legend-cap { |
| font-size: 8pt; color: #666; margin-top: 4px; |
| text-align: center; font-style: italic; |
| } |
| .r-map.no-map { |
| padding: 24px; background: #f5f7fb; border: 1px dashed #ccc; |
| color: #888; text-align: center; font-size: 9pt; |
| } |
| |
| .r-briefing { font-size: 10pt; } |
| .r-briefing h4 { |
| font-size: 9pt; font-weight: 700; |
| text-transform: uppercase; letter-spacing: 0.06em; |
| color: #555; margin: 14px 0 4px; |
| } |
| .r-briefing h4:first-child { margin-top: 0; } |
| .r-briefing p { margin: 0 0 6px; line-height: 1.55; } |
| .r-briefing ul { margin: 4px 0 8px 0; padding-left: 20px; } |
| .r-briefing ul li { margin: 3px 0; line-height: 1.5; } |
| .r-briefing strong { font-weight: 700; background: #fff7d6; padding: 0 1px; } |
| .r-briefing .cite { |
| display: inline-block; vertical-align: super; |
| font-size: 7pt; font-family: var(--mono); |
| padding: 0 4px; margin-left: 1px; |
| background: #f5f7fb; color: var(--nyc-blue); |
| border-radius: 6px; font-weight: 700; |
| } |
| |
| .r-sources { |
| font-size: 9pt; |
| } |
| .r-sources ol { |
| list-style: none; padding: 0; margin: 0; |
| } |
| .r-sources li { |
| display: grid; grid-template-columns: 26px 1fr; |
| gap: 8px; padding: 6px 0; |
| border-bottom: 1px dotted #ddd; |
| page-break-inside: avoid; |
| } |
| .r-sources li:last-child { border-bottom: 0; } |
| .r-sources .num { |
| font-family: var(--mono); font-weight: 700; |
| color: var(--nyc-blue); font-size: 9pt; text-align: right; |
| } |
| .r-sources .label { font-weight: 600; color: #111; } |
| .r-sources .vintage { |
| display: block; color: #666; font-size: 8.5pt; margin-top: 2px; |
| } |
| .r-sources .url { |
| display: block; font-family: var(--mono); |
| font-size: 8pt; color: #444; margin-top: 2px; |
| word-break: break-all; |
| } |
| .r-sources .url a { color: var(--nyc-blue); text-decoration: none; } |
| |
| .r-method { |
| font-size: 8.5pt; color: #555; line-height: 1.5; |
| } |
| .r-method p { margin: 0 0 6px; } |
| |
| .r-foot { |
| margin-top: 22px; padding-top: 10px; |
| border-top: 1px solid #ccc; |
| font-size: 7.5pt; color: #888; |
| display: flex; justify-content: space-between; |
| } |
| |
| |
| @media print { |
| body { background: white; padding: 0; } |
| .report-controls { display: none; } |
| .paper { |
| box-shadow: none; margin: 0; |
| width: auto; padding: 0.5in; |
| } |
| @page { size: letter; margin: 0; } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="report-controls"> |
| <div class="lhs"><strong>Auditable report</strong> · ready to print or save as PDF</div> |
| <div class="actions"> |
| <button class="btn-secondary" onclick="window.close()">Close</button> |
| <button class="btn-primary" onclick="window.print()">Print / Save PDF</button> |
| </div> |
| </div> |
|
|
| <article class="paper" id="paper"> |
| <div style="padding: 60px 0; text-align: center; color: #888;"> |
| Loading report from agent session… |
| <br><br> |
| <small>If this hangs, the report payload wasn't found in sessionStorage. Re-run the query and click <em>Generate auditable report</em> from there.</small> |
| </div> |
| </article> |
|
|
| <script src="/static/report.js"></script> |
| </body> |
| </html> |
|
|
