/* Report look (letter pages, white paper, spectrum rule, bento cards, gradient type), shared by the sales report engine
   (/sales/report/) and the dossiers. Source: docs/report-v1/index.html (practice report PDF v4, Steve 2026-10-22). ASCII only. */
@font-face { font-family: "Geist R"; src: url(/assets/fonts/geist-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: block; }
@font-face { font-family: "Geist Mono R"; src: url(/assets/fonts/geist-mono-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: block; }
@page { size: letter; margin: 0; }
:root {
  --ink: #0b1020; --ink2: #394058; --ink3: #687090; --line: #e3e6ef; --paper: #ffffff; --wash: #f5f6fa; --desk: #c9cdd8;
  --t1: #ff3d5a; --t2: #ff7a3d; --t3: #ffb23d; --t4: #f4c41c; --t5: #7fd34a; --t6: #22c3b2; --t7: #2f8bff; --t8: #6b5cff;
  --hot: linear-gradient(90deg, #ff2bd6, #ff3d5a 40%, #ff7a3d 75%, #ffb23d);
  --hotT: linear-gradient(90deg, #e0179c, #f5304f 50%, #f0601c);
  --cool: linear-gradient(90deg, #14b3a3, #2f8bff 50%, #6b5cff);
  --spec: linear-gradient(90deg, #ff2bd6, #ff3d5a 18%, #ff7a3d 34%, #ffb23d 48%, #22c3b2 64%, #2f8bff 80%, #6b5cff);
  --f: "Geist R", Geist, "Helvetica Neue", Arial, sans-serif; --m: "Geist Mono R", "Geist Mono", ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--desk); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-family: var(--f); color: var(--ink); background: var(--desk); -webkit-print-color-adjust: exact; print-color-adjust: exact; font-kerning: normal; }
#doc { width: 8.5in; transform-origin: 0 0; }
@media screen { body { padding: 20px 0; } #wrap { margin: 0 auto; } .page { margin: 0 0 22px; box-shadow: 0 6px 30px rgba(10,20,50,.22); } }
@media print { html, body { background: none; } #doc { transform: none !important; } #wrap { width: auto !important; height: auto !important; } }
a { color: inherit; text-decoration: none; }
.page { width: 8.5in; height: 11in; overflow: hidden; position: relative; background: var(--paper); padding: .52in .6in .72in; page-break-after: always; break-after: page; display: flex; flex-direction: column; gap: 18px; }
.page::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--spec); }
.hd { display: flex; justify-content: space-between; align-items: baseline; font: 500 8px/1 var(--m); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
.hd b { color: var(--ink); font-weight: 600; }
.ft { position: absolute; left: .6in; right: .6in; bottom: .3in; display: flex; justify-content: space-between; align-items: center; font: 500 7.5px/1 var(--m); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.ft .by { display: flex; align-items: center; gap: 9px; }
.ft .by img { height: 15px; width: auto; display: block; }
.ft .by b { color: var(--ink); font-weight: 600; }
.cover .ft .by b { color: #fff; }
.top { display: flex; flex-direction: column; gap: 9px; }
.kick { font: 600 9px/1 var(--m); letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); display: flex; align-items: center; gap: 9px; }
.kick::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--hot); }
h2 { font-size: 34px; line-height: 1.1; font-weight: 680; letter-spacing: -.015em; text-wrap: balance; }
.gt { background: var(--hotT); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gs { background: var(--spec); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: 12.5px; line-height: 1.55; color: var(--ink2); max-width: 6.3in; }
.grid { display: grid; gap: 16px; }
.fill { flex: 1; min-height: 0; }
.card { position: relative; border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 18px 18px 16px; overflow: hidden; }
.card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c, var(--hot)); }
.card h3 { font: 600 8.5px/1.3 var(--m); letter-spacing: .13em; text-transform: uppercase; color: var(--ink3); margin-bottom: 12px; }
.img { border-radius: 16px; overflow: hidden; position: relative; background: #0d1b3a; }
.img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cap { font: 500 8px/1.5 var(--m); letter-spacing: .04em; color: var(--ink3); }
.stats { display: grid; gap: 12px; }
.stat { border-radius: 14px; padding: 14px 15px 13px; background: #fff; border: 1px solid var(--line); position: relative; overflow: hidden; }
.stat::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c, var(--hot)); }
.stat .v { font-size: 28px; font-weight: 680; letter-spacing: -.02em; line-height: 1.05; background: var(--c, var(--hotT)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat .l { font: 500 7.8px/1.4 var(--m); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); margin-top: 7px; }
.nl { list-style: none; }
.nl li { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.25; }
.nl li:first-child { border-top: 0; }
.nl .nm { font-weight: 600; min-width: 0; }
.nl .nm small { display: block; font: 400 8px/1.4 var(--m); color: var(--ink3); letter-spacing: .02em; margin-top: 2px; }
.nl .r { font: 600 10.5px/1 var(--m); text-align: right; white-space: nowrap; }
.nl .r small { display: block; font-weight: 400; font-size: 7.5px; color: var(--ink3); margin-top: 3px; }
.nl li.me { background: linear-gradient(90deg, rgba(255,43,214,.08), rgba(255,178,61,.08)); border-radius: 10px; margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-top: 0; }
.nl.tight li { padding: 4.5px 0; }
.num { width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; font: 700 9px/1 var(--m); color: #fff; background: var(--c, var(--ink)); }
.num.me { width: auto; border-radius: 99px; padding: 0 6px; background: var(--ink); font-size: 7.5px; letter-spacing: .06em; }
table.t { width: 100%; border-collapse: collapse; font-size: 10.5px; }
table.t th { font: 600 7.5px/1.2 var(--m); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); text-align: left; padding: 0 8px 8px; border-bottom: 1.5px solid var(--ink); }
table.t td { padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.t td.n, table.t th.n { text-align: right; font-family: var(--m); white-space: nowrap; font-variant-numeric: tabular-nums; }
table.t tr.me td { background: linear-gradient(90deg, rgba(255,43,214,.09), rgba(255,178,61,.09)); font-weight: 600; }
/* dense lists (Steve 2026-10-22: "show small the next 50 ... your type of doctor close by ... when there's 1,000 doctors, you only list 10, it seems kind of light") */
table.d { width: 100%; border-collapse: collapse; font-size: 7.9px; line-height: 1.05; font-variant-numeric: tabular-nums; }
table.d th { font: 600 6.6px/1.2 var(--m); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); text-align: left; padding: 0 5px 6px; border-bottom: 1.5px solid var(--ink); white-space: nowrap; }
table.d td { padding: 1.5px 5px; height: 12.5px; border-bottom: 1px solid #eef0f5; white-space: nowrap; vertical-align: middle; }
table.d tr:nth-child(even) td { background: #fafbfd; }
table.d td.n, table.d th.n { text-align: right; font-family: var(--m); }
table.d td.i { font-family: var(--m); color: var(--ink3); text-align: right; width: 22px; }
table.d td.nm .dot { width: 6px; height: 6px; }
table.d td.nm { max-width: 2.75in; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
table.d td.nm small { font: 400 6.8px var(--m); color: var(--ink3); margin-left: 5px; letter-spacing: .02em; }
table.d tr.me td { background: linear-gradient(90deg, rgba(255,43,214,.13), rgba(255,178,61,.13)); }
table.d .bar { display: inline-block; height: 6px; border-radius: 3px; background: var(--c); vertical-align: -.5px; }
table.d .tp { display: inline-block; font: 600 6px/1 var(--m); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--c); padding: 1.6px 4px; border-radius: 99px; vertical-align: middle; }
.ad { display: inline-grid; place-items: center; width: 10px; height: 10px; vertical-align: middle; border-radius: 3px; font: 700 6.2px/1 var(--m); color: #fff; background: var(--c); margin-right: 2px; }
.chip { display: inline-block; font: 600 7px/1 var(--m); letter-spacing: .07em; text-transform: uppercase; padding: 4px 6px; border-radius: 99px; color: #fff; background: var(--c); margin: 1px 3px 1px 0; white-space: nowrap; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 5px; vertical-align: -.5px; }
.key { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 500 8px/1.3 var(--m); color: var(--ink2); letter-spacing: .03em; }
.facts { font-size: 11px; line-height: 1.55; color: var(--ink2); }
.facts li { margin: 0 0 7px 14px; }
.facts b { color: var(--ink); }
svg { display: block; overflow: visible; }
svg text { font-family: var(--m); }
.center { display: flex; justify-content: center; align-items: center; }
/* cover */
.cover { background: #050a16; color: #fff; padding: 0; gap: 0; }
.cover::before { height: 6px; z-index: 3; }
.cover .hero { position: absolute; left: 0; right: 0; top: 0; height: 6.9in; }
.cover .hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover .panel { position: absolute; left: 0; right: 0; top: 6.9in; bottom: 0; padding: .4in .6in .7in; background: #050a16; display: flex; flex-direction: column; gap: 12px; }
.cover .brand { position: absolute; left: .6in; top: .32in; right: .6in; display: flex; justify-content: space-between; align-items: center; font: 600 8.5px/1 var(--m); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.9); z-index: 2; }
.cover .brand .mk { display: flex; align-items: center; gap: 12px; padding: 9px 14px 9px 11px; border-radius: 99px; background: rgba(5,10,22,.72); }
.cover .brand .mk img { height: 24px; width: auto; display: block; }
.cover .brand .rt { padding: 9px 14px; border-radius: 99px; background: rgba(5,10,22,.72); }
.cover h1 { font-size: 50px; line-height: 1.04; font-weight: 700; letter-spacing: -.02em; }
.cover .sub { font-size: 12px; color: #c4cbe0; line-height: 1.5; }
.cover .sub b { color: #fff; font-weight: 600; }
.cover .stats { grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 8px; }
.cover .stat { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); padding: 12px 12px 11px; }
.cover .stat .v { font-size: 25px; background: var(--c, var(--hot)); -webkit-background-clip: text; background-clip: text; }
.cover .stat .l { color: #9aa3c0; font-size: 7.2px; }
.cover .kick { color: #9aa3c0; }
.cover .ft { color: #7d86a4; }
.cover .lg { position: absolute; right: .6in; top: 6.38in; display: flex; gap: 12px; font: 500 8px/1 var(--m); color: #dfe5f5; letter-spacing: .05em; background: rgba(5,10,22,.85); padding: 8px 12px; border-radius: 99px; }

/* screen chrome: toolbar and map placeholders (never printed) */
.tbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px max(16px, env(safe-area-inset-left, 0px)); background: rgba(5,10,22,.94); color: #fff; font: 600 11px/1.2 var(--m); letter-spacing: .08em; text-transform: uppercase; }
.tbar img { height: 22px; width: auto; }
.tbar a, .tbar button { color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 99px; padding: 8px 12px; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; text-decoration: none; }
.tbar button.go { background: linear-gradient(90deg, #e0179c, #f5304f 50%, #f0601c); border-color: transparent; }
.tbar .sp { flex: 1; }
.tbar .st { color: #9aa3c0; font-weight: 500; }
.img.wait { background: radial-gradient(60% 80% at 50% 40%, #1b2c5c, #0d1b3a); display: grid; place-items: center; }
.img.wait::after { content: "Drawing the map"; font: 600 10px/1 var(--m); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.img.wait img { display: none; }
@media print { .tbar { display: none !important; } body { padding: 0 !important; } }
