/* ClickCrooks inner pages: sign-up and the report. Same tokens as the front page
   and as CopycatCheck, so the family reads as one hand. */
:root{
  --paper:#ffffff; --paper-2:#f4f7f9; --ink:#0b0c0e; --ink-muted:#4b5158; --hairline:#e2e7ea;
  --good:#0f6b39; --good-soft:#e8f3ec; --ok:#8a6100; --ok-soft:#fbf1dc; --bad:#ad2216; --bad-soft:#fbeae7; --focus:#1a63d8;
  --serif:"Source Serif 4","Iowan Old Style",Georgia,serif; --sans:"Source Sans 3","Segoe UI",Helvetica,Arial,sans-serif; --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#0e1113;--paper-2:#151a1d;--ink:#eef2f4;--ink-muted:#a4adb4;--hairline:#2a3135;--good:#74d29a;--good-soft:#12291d;--ok:#e0bb5c;--ok-soft:#2b2412;--bad:#f0907f;--bad-soft:#2e1512;--focus:#8fb8ff}}
:root[data-theme="dark"]{--paper:#0e1113;--paper-2:#151a1d;--ink:#eef2f4;--ink-muted:#a4adb4;--hairline:#2a3135;--good:#74d29a;--good-soft:#12291d;--ok:#e0bb5c;--ok-soft:#2b2412;--bad:#f0907f;--bad-soft:#2e1512;--focus:#8fb8ff}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper-2);color:var(--ink);font:17px/27px var(--sans);overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.top{background:#0b0c0e;color:#fff}
.top .in{max-width:1000px;margin:0 auto;padding:0 var(--s4);min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.wordmark{font-family:var(--serif);font-size:26px;font-weight:600;letter-spacing:-.01em;text-decoration:none;color:#fff}
.wordmark em{font-style:italic;font-weight:400;color:rgba(255,255,255,.78)}
.topdom{font-size:16px;font-weight:700;color:#fff;overflow-wrap:anywhere;text-align:right}
.covers{margin:0 0 var(--s3);font-size:15px;color:var(--ink-muted)}
.covers strong{display:block;margin-top:2px;font-size:30px;line-height:1.2;font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.top a.ghost{font-size:15px;color:rgba(255,255,255,.85);text-decoration:none;border:1px solid rgba(255,255,255,.5);padding:8px 14px;min-height:44px;display:inline-flex;align-items:center}
.wrap{max-width:1000px;margin:0 auto;padding:var(--s7) var(--s4) var(--s9)}
.eyebrow{font-size:15px;line-height:22px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 var(--s3)}
h1{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;font-size:clamp(32px,5vw,52px);line-height:1.06;margin:0 0 var(--s4);max-width:20ch}
h2{font-family:var(--serif);font-weight:600;font-size:26px;line-height:1.2;margin:0 0 var(--s3)}
h3{font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.3;margin:0 0 var(--s2)}
p{margin:0 0 var(--s3)}
.lede{font-size:19px;line-height:1.5;color:var(--ink-muted);max-width:60ch;margin:0 0 var(--s6)}
.note{color:var(--ink-muted);font-size:16px;line-height:25px}
.panel{background:var(--paper);border:1px solid var(--hairline);padding:var(--s5);margin-bottom:var(--s4)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.fields .full{grid-column:1 / -1}
label{display:block;font-size:15px;line-height:22px;color:var(--ink-muted);margin-bottom:6px}
input[type=text],input[type=email],input[type=number],select,textarea{width:100%;min-height:50px;padding:12px var(--s4);border:1px solid var(--hairline);background:var(--paper);color:var(--ink);font:400 17px/26px var(--sans)}
.check{display:flex;gap:var(--s3);align-items:flex-start;min-height:48px;padding:var(--s2) 0;cursor:pointer;color:var(--ink);font-size:17px}
.check input{width:22px;height:22px;flex:none;margin-top:3px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:12px 24px;font:600 17px/24px var(--sans);text-decoration:none;border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer}
.btn:hover{opacity:.88}
.btn.ghost{background:transparent;color:var(--ink)}
.btn:disabled{opacity:.5;cursor:default}
.err{color:var(--bad);font-weight:600}
.auditctl{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);margin:var(--s3) 0 var(--s2)}
.auditctl label{display:flex;flex-direction:column;gap:4px;font-size:15px;color:var(--ink-muted)}
.auditctl select{min-height:44px;font:16px var(--sans);padding:6px 10px;border:1px solid var(--hairline);background:var(--paper);color:var(--ink)}
#alloc tr.src td{font-weight:600;border-top:1px solid var(--ink)}
#alloc tr.camp td:first-child{padding-left:20px;color:var(--ink-muted)}
#alloc tfoot td{font-weight:600;border-top:2px solid var(--ink)}
#alloc .soft{display:block;font-size:15px;color:var(--ink-muted);font-weight:400}
/* Phones: each row becomes a small labelled card, so no figure hides off to the side. */
@media(max-width:600px){#alloc thead{display:none}#alloc,#alloc tbody,#alloc tfoot,#alloc tr{display:block}#alloc tr{border-top:1px solid var(--hairline);padding:8px 0}#alloc tr.src,#alloc tfoot tr{border-top:1px solid var(--ink)}#alloc td{display:flex;justify-content:space-between;gap:var(--s3);border:0;padding:3px 0}#alloc td:first-child{font-size:17px}#alloc tr.camp td:first-child{padding-left:0}#alloc td[data-label]:not(:first-child)::before{content:attr(data-label);color:var(--ink-muted);font-weight:400}#alloc td:empty{display:none}#alloc .soft{display:inline;margin-left:6px}}
.auditbox{margin-top:var(--s4);border-top:1px solid var(--hairline);padding-top:var(--s3)}
.auditbox summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
.auditbox .fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--s3)}
.auditbox .fields label{display:flex;flex-direction:column;gap:4px;font-size:15px}
.auditbox .fields input{min-height:44px;font:16px var(--sans);padding:6px 10px;border:1px solid var(--hairline);background:var(--paper);color:var(--ink)}
@media print{header,.btn,button,.toggle,.mapctl,#settings,#morepanel,#installhint,.printrow,.auditctl,.auditbtns,#a-spendbox,#auditlocked,.sticky-start{display:none!important}.auditbox[open] summary{display:none}body{background:#fff}.panel{break-inside:avoid}}
/* hidden means hidden, even on elements styled as buttons or flex rows */
[hidden]{display:none!important}
.installhint{border:1px solid var(--hairline);background:var(--paper);padding:var(--s4);margin:var(--s4) 0}
.installhint p{margin:0}
.installhint .installbtns{margin-top:var(--s3);display:flex;gap:var(--s3);flex-wrap:wrap}
.botpaid{margin:var(--s4) 0 0;padding:12px 16px;border-left:3px solid var(--ink);background:var(--paper-2);color:var(--ink);font-weight:600}
.code{font-family:var(--mono);font-size:15px;line-height:23px;background:var(--paper-2);border:1px solid var(--hairline);padding:var(--s4);word-break:break-all;margin:var(--s3) 0}
.line{font-family:var(--serif);font-size:clamp(24px,3.4vw,34px);line-height:1.2;font-weight:600;margin:0 0 var(--s3)}
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--s3);margin:var(--s4) 0}
.fig{border:1px solid var(--hairline);border-top:3px solid var(--ink);padding:var(--s4);background:var(--paper)}
.fig b{display:block;font-family:var(--serif);font-size:34px;line-height:1.05;font-variant-numeric:tabular-nums}
.fig span{color:var(--ink-muted);font-size:15px;line-height:21px}
.fig.good{border-top-color:var(--good)} .fig.good b{color:var(--good)}
.fig.bad{border-top-color:var(--bad)} .fig.bad b{color:var(--bad)}
table{width:100%;border-collapse:collapse;font-size:16px;line-height:24px}
th{text-align:left;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);padding:8px 12px 8px 0;border-bottom:1px solid var(--ink);font-weight:600}
td{padding:9px 12px 9px 0;border-bottom:1px solid var(--hairline);vertical-align:top;font-variant-numeric:tabular-nums}
.tablewrap{overflow-x:auto}
/* Fourteen days, as bars. Black is real, grey is the rest of the paid visits. No
   colour is needed to read it, and every bar says its numbers in words too. */
.bars{display:grid;grid-template-columns:repeat(14,1fr);gap:4px;align-items:end;height:150px;margin:var(--s4) 0 var(--s2)}
.bars .day{display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.bars .noise{background:var(--hairline)} .bars .real{background:var(--ink)}
.barsx{display:grid;grid-template-columns:repeat(14,1fr);gap:4px;font-size:12px;color:var(--ink-muted);text-align:center}
.foot{color:var(--ink-muted);font-size:15px;line-height:23px;margin-top:var(--s6)}
@media(max-width:640px){.fields{grid-template-columns:1fr}.panel{padding:var(--s4)}.bars{height:110px}}

/* the dashboard */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.card3{border:1px solid var(--hairline);border-top:3px solid var(--ink);padding:var(--s4);background:var(--paper);display:flex;flex-direction:column;gap:2px}
.card3 h3{font-family:var(--sans);font-size:14px;line-height:20px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 var(--s2)}
.card3 .n{font-family:var(--serif);font-size:38px;line-height:1.05;font-variant-numeric:tabular-nums}
.card3 .of,.card3 .more{color:var(--ink-muted);font-size:15px;line-height:21px}
.card3 .of b{color:var(--ink)}
@media(max-width:640px){.cards3{grid-template-columns:1fr}}
.mapbox{border:1px solid var(--hairline);background:var(--paper);margin:var(--s4) 0 var(--s3);overflow:hidden;position:relative}
.mapbox svg{cursor:grab}.mapbox svg.dragging{cursor:grabbing}
.mapctl{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:6px}
.mapbtns{display:flex;flex-direction:column;gap:6px}
.mapctl button{min-width:44px;min-height:44px;border:1px solid var(--hairline);background:var(--paper);color:var(--ink);font:600 20px/1 var(--sans);cursor:pointer;padding:0 8px}
.mapctl button[data-zoom="fit"]{font-size:14px;font-weight:600}
.mapctl button:hover{background:var(--ink);color:var(--paper)}
.mapctl button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* The map is the point, so on a phone the controls are one small half-clear
   button in the bottom corner. Tapping it opens the three; tapping it again,
   or using one of them, puts them away. On a wider screen all three are
   simply there, and the opener is not. */
.mapctl-open{display:none}
@media(max-width:700px){
  .mapctl{top:auto;bottom:8px;right:8px;flex-direction:row;gap:4px;align-items:center}
  .mapctl-open{display:inline-flex;align-items:center;justify-content:center;opacity:.6;transition:opacity .2s}
  .mapbox .mapctl-open svg{width:18px;height:18px;display:block}
  .mapctl-open:hover,.mapctl-open:focus-visible{opacity:1}
  .mapctl.open .mapctl-open{opacity:1}
  .mapbtns{display:none;gap:4px}
  .mapctl.open .mapbtns{display:flex;flex-direction:row}
  .mapctl button{min-width:36px;min-height:36px;font-size:18px;padding:0 6px;
    background:color-mix(in srgb,var(--paper) 78%,transparent);border-radius:6px}
  .mapctl button[data-zoom="fit"]{font-size:13px}}
/* Where a pointer cannot hover and nothing has been opened yet, the opener
   still has to be found: keep it readable rather than ghosted. */
@media(max-width:700px) and (hover:none){.mapctl-open{opacity:.75}}
.mapbox svg{display:block;width:100%;height:auto}
.mapbox .land{fill:var(--paper-2);stroke:var(--hairline);stroke-width:1;stroke-linejoin:round}
.mapbox .city{stroke:var(--paper);stroke-width:1.5;opacity:.5}
.mapbox .city.good{fill:var(--good)} .mapbox .city.ok{fill:var(--ok)} .mapbox .city.bad{fill:var(--bad)}
.mapbox .city.unpaid{fill:#1a63d8;opacity:.5}
.mapbox .aside{fill:#7d878e;stroke:var(--paper);opacity:.9}
.mapbox .label{font-family:var(--sans);font-weight:600;fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-linejoin:round}
.mapbox .empty{font-family:var(--sans);fill:var(--ink-muted)}
.legend{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);font-size:15px;color:var(--ink-muted)}
.legend .dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.legend .dot.good{background:var(--good)} .legend .dot.ok{background:var(--ok)} .legend .dot.bad{background:var(--bad)} .legend .dot.unpaid{background:#1a63d8;opacity:.5}
.legend .dot.aside{background:#7d878e;border-radius:1px;width:10px;height:10px;transform:rotate(45deg);margin-left:1px}
.toggle{display:inline-flex;border:1px solid var(--ink);margin-top:var(--s2)}
.toggle button{appearance:none;border:0;background:var(--paper);color:var(--ink);font:600 15px var(--sans);padding:8px 14px;min-height:40px;cursor:pointer}
.toggle button.on{background:var(--ink);color:var(--paper)}
.toggle button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}

.wordmark{display:inline-flex;align-items:center;gap:10px}
.wordmark .mark{height:38px;width:auto;display:block}
.wordmark small{display:block;font:600 11px/14px var(--sans);letter-spacing:.02em;color:rgba(255,255,255,.65);font-style:normal}
/* privacy and terms */
.legalpage{max-width:760px}
.legalpage .legal{margin-top:var(--s6)}
.legalpage .legal h2{font-size:23px}
.legalpage .legal p,.legalpage .legal li{font-size:17px;line-height:28px}
.legalpage .legal ul{padding-left:20px;margin:0 0 var(--s3)}
.legalpage .legal li{margin-bottom:var(--s2)}