:root { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #172846; background: #f2f6fb; }
* { box-sizing: border-box; }
body { margin: 0; }
.preview-note { background: #eaf4ff; border-bottom: 1px solid #bbd8f6; color: #174a83; text-align: center; padding: 10px 18px; font-size: .9rem; }
.site-header { max-width: 1000px; margin: auto; padding: 24px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
a { color: #1257ae; }
.brand { color: #173d78; text-decoration: none; font-size: 1.4rem; font-weight: 800; letter-spacing: -.04em; }
.brand-dot { color: #2684ec; }
.sister { font-size: .9rem; text-decoration: none; }
main { max-width: 780px; margin: 34px auto 0; padding: 0 20px; }
.intro { margin-bottom: 32px; }
.eyebrow { color: #376ba7; font-size: .75rem; font-weight: 800; letter-spacing: .14em; }
h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.1; letter-spacing: -.05em; margin: 10px 0; }
.lead { font-size: 1.22rem; margin: 0 0 14px; }
.scope { max-width: 620px; color: #52647e; line-height: 1.55; }
.card { background: white; border: 1px solid #dce6f1; border-radius: 16px; box-shadow: 0 7px 24px #1f46700a; margin: 16px 0; padding: 28px; }
.step { font-size: .8rem; font-weight: 800; color: #2475cf; letter-spacing: .06em; }
.step span { margin-left: 8px; color: #62758d; font-weight: 600; letter-spacing: 0; }
h2 { font-size: 1.45rem; margin: 12px 0 8px; }
h3 { font-size: 1.05rem; margin-top: 24px; }
p { line-height: 1.5; }
.card > p { color: #52647e; margin-top: 0; }
.address-row, .actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.address-row code { flex: 1; min-width: 0; overflow-wrap: anywhere; background: #f3f7fc; border: 1px solid #dce7f4; border-radius: 8px; padding: 14px; font-size: .95rem; }
button { border: 0; border-radius: 8px; background: #1469c5; color: white; padding: 13px 16px; font: inherit; font-weight: 700; cursor: pointer; }
button:hover { background: #0752a4; }
button:disabled { opacity: .55; cursor: not-allowed; }
button:focus-visible, a:focus-visible { outline: 3px solid #f3ae29; outline-offset: 3px; }
.small { font-size: .86rem; color: #60728a; margin-top: 12px; }
dl { margin: 20px 0; }
dl > div { display: grid; grid-template-columns: minmax(150px, 230px) 1fr; gap: 10px; border-bottom: 1px solid #ebeff4; padding: 10px 0; }
dt { color: #5a6a7e; }
dd { margin: 0; overflow-wrap: anywhere; font-weight: 600; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; background: #f3f7fc; border-radius: 8px; padding: 14px; font-size: .85rem; }
.new-test { padding: 12px 4px; }
footer { max-width: 780px; margin: 40px auto; padding: 0 20px 20px; color: #60728a; font-size: .88rem; }
.receipt-basics dl { margin: 12px 0 24px; }
.report-summary { border-top: 1px solid #dce6f1; padding-top: 22px; }
.report-summary h3 { font-size: 2rem; margin: 5px 0 4px; letter-spacing: -.04em; }
.report-summary[data-verdict="problems-found"] h3 { color: #a52f27; }
.report-summary[data-verdict="needs-attention"] h3,
.report-summary[data-verdict="checks-incomplete"] h3 { color: #8a5d06; }
.report-summary[data-verdict="healthy"] h3 { color: #166b45; }
.report-summary p { color: #52647e; }
#priority-fixes { background: #f5f9fe; border: 1px solid #dce6f1; border-radius: 10px; padding: 12px 16px; margin: 14px 0; }
#priority-fixes h4 { margin: 0 0 6px; }
#priority-fixes ol { margin: 0; padding-left: 20px; }
#priority-fixes li { margin: 5px 0; }
#report-nav { display: flex; gap: 7px; flex-wrap: wrap; margin: 18px 0 24px; }
.pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 10px; font-size: .76rem; font-weight: 800; text-transform: capitalize; text-decoration: none; white-space: nowrap; }
.pill.pass { background: #e5f5ec; color: #126943; }
.pill.warn { background: #fff1d6; color: #805505; }
.pill.fail { background: #fce8e5; color: #a12d25; }
.pill.info { background: #eaf2fc; color: #245992; }
.pill.incomplete { background: #ede9f9; color: #654697; }
a.pill:hover { text-decoration: underline; }
.identity-chain { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 12px; margin: 0 -12px 20px; background: #eef5fd; border: 1px solid #cbdff4; border-radius: 10px; box-shadow: 0 5px 12px #1f467016; }
.identity-chain[hidden] { display: none; }
.chain-item { min-width: 98px; max-width: 150px; overflow-wrap: anywhere; line-height: 1.2; border-left: 3px solid #93b1d3; padding-left: 6px; }
.chain-item.pass { border-color: #3ca874; }
.chain-item.warn { border-color: #dfaa37; }
.chain-item.fail { border-color: #d45a50; }
.chain-item.incomplete { border-color: #9a7ac8; }
.chain-label { display: block; color: #5a6a7e; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.chain-item strong { font-size: .8rem; }
.chain-arrow { color: #6f88a6; font-size: 1.1rem; }
.report-card { margin: 14px 0; padding: 20px; background: #fbfdff; scroll-margin-top: 95px; box-shadow: none; }
.report-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.report-heading h3 { margin: 0; font-size: 1.18rem; }
.report-meaning { color: #354b66; margin: 10px 0; }
.report-fix { background: #f0f6ff; border-left: 3px solid #2684ec; padding: 10px 12px; border-radius: 4px; }
.report-facts { margin: 10px 0; }
.report-facts > div { grid-template-columns: minmax(125px, 190px) 1fr; padding: 8px 0; }
.report-facts dd { font-weight: 500; }
.report-evidence { margin-top: 12px; }
.report-evidence summary { color: #1257ae; cursor: pointer; font-weight: 700; }
.report-evidence pre { margin-bottom: 0; max-height: 260px; overflow: auto; }
.report-list { margin: 12px 0; }
.report-list h4 { font-size: .9rem; margin: 0 0 6px; }
.report-list summary { color: #1257ae; cursor: pointer; font-weight: 700; }
.report-list ul { margin: 6px 0; padding-left: 20px; }
.report-list li { margin: 4px 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .site-header { padding: 18px 16px; } main { margin-top: 18px; padding: 0 14px; } .card { padding: 20px; } .address-row { align-items: stretch; } .address-row code, .address-row button { width: 100%; } dl > div { grid-template-columns: 1fr; gap: 3px; } }