/* justin.fm/where-your-taxes-go: the tax receipt. A white page in one column: the question as a sentence to fill
   in, the pour (a canvas), how long your taxes ran the government, the receipt, the map (a
   treemap down to every line), every line, and how it works. The share sheet and a map line's
   card sit over it. */
:root{
  --ink:#101214;--text:#3B3F48;--muted:#5A6072;--faint:#8A8F99;--hair:rgba(20,22,26,.12);--wash:#F4F5F7;
  --dm:#2F5DFF;--warn:#D4452A;--paper:#FFFEF8;--gold:#E7B321;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --out:cubic-bezier(.2,.8,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:#FFFFFF;color:var(--ink);line-height:1.5;overflow-x:hidden;
  font-family:"Inter",-apple-system,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;
}
a{color:inherit}
button,input{font:inherit;color:inherit}
::selection{background:var(--dm);color:#fff}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
:focus-visible{outline:2px solid var(--dm);outline-offset:2px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.top{display:flex;align-items:center;padding:22px 24px;color:var(--faint)}
.back{display:flex;align-items:center;gap:10px;color:var(--muted);text-decoration:none;transition:color .2s}
.back:hover{color:var(--ink)}
.back svg{width:16px;height:16px}
.back svg path{fill:var(--ink)}

main{max-width:1120px;margin:0 auto;padding:0 24px 96px}
section{margin-top:104px}
h2{font-size:clamp(24px,3.2vw,32px);font-weight:600;letter-spacing:-.035em;line-height:1.15}
.head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.link{background:none;border:0;cursor:pointer;color:var(--muted)}
.link:hover{color:var(--ink)}

/* ---------- the question ---------- */
.hero{padding-top:48px;max-width:860px}
h1{font-size:clamp(36px,5.6vw,64px);font-weight:600;letter-spacing:-.045em;line-height:1.04}
h1 span{color:var(--faint)}
.ask{margin-top:48px}
.sentence{font-size:clamp(28px,4.2vw,46px);font-weight:600;letter-spacing:-.035em;line-height:1.3;color:var(--text)}
.field{
  display:inline-flex;align-items:baseline;border-bottom:3px solid var(--ink);color:var(--ink);
  padding:0 2px;margin:0 2px;transition:border-color .2s;
}
.field:focus-within{border-color:var(--dm)}
.field .dollar{color:var(--faint)}
.field input{
  border:0;outline:0;background:none;padding:0;min-width:2ch;width:7ch;
  font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--ink);
}
.pick{
  border:0;background:none;cursor:pointer;font-weight:600;color:var(--dm);
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-style:dotted;
}
.presets{display:flex;gap:6px;flex-wrap:wrap;margin-top:18px}
.presets button{
  border:0;cursor:pointer;padding:6px 11px;border-radius:999px;font-size:13px;font-weight:500;
  background:var(--wash);color:var(--muted);transition:background .2s,color .2s;
}
.presets button:hover{color:var(--ink)}
.presets button[aria-pressed="true"]{background:var(--ink);color:#fff}
.result{margin-top:26px;font-size:18px;color:var(--text);min-height:1.6em}
.result b{color:var(--ink);font-weight:600}
.go-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:20px}
.go{
  border:0;cursor:pointer;padding:14px 22px;border-radius:12px;
  background:var(--ink);color:#fff;font-size:16px;font-weight:600;letter-spacing:-.01em;transition:background .2s;
}
.go:hover{background:var(--dm)}
.swap{border:0;background:none;cursor:pointer;color:var(--muted);font-size:14px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hair)}
.swap:hover{color:var(--ink)}
.fine{margin-top:18px;font-size:12px;color:var(--faint);max-width:60ch}

/* ---------- the pour ---------- */
.stage{margin-top:22px}
.stage canvas{display:block;width:100%}
.legend{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;color:var(--faint)}
.legend .coin{width:11px;height:11px;border-radius:50%;background:var(--gold);box-shadow:inset 0 0 0 2px #B7860F}
.legend .coin.lent{background:#fff;box-shadow:inset 0 0 0 2px var(--warn);margin-left:14px}

/* ---------- how long ---------- */
.time{text-align:center;padding:24px 0}
.time-big{font-size:clamp(64px,13vw,168px);font-weight:600;letter-spacing:-.06em;line-height:.95}
.time-say{margin:18px auto 0;max-width:36ch;font-size:clamp(18px,2.2vw,22px);color:var(--text);letter-spacing:-.01em}

/* ---------- the receipt ---------- */
.receipt-wrap{display:flex;flex-direction:column;align-items:center}
.receipt-wrap .head{align-self:stretch}
.paper{
  position:relative;width:min(460px,100%);margin-top:32px;padding:28px 26px 34px;background:var(--paper);color:#222;
  font-family:var(--mono);font-size:12.5px;line-height:1.55;
  box-shadow:0 1px 0 rgba(20,22,26,.04),0 22px 44px -18px rgba(20,22,26,.35),0 0 0 1px rgba(20,22,26,.06);
  -webkit-mask:radial-gradient(circle 6px at 8px 100%,#0000 98%,#000) -8px 0/16px 100% repeat-x;
          mask:radial-gradient(circle 6px at 8px 100%,#0000 98%,#000) -8px 0/16px 100% repeat-x;
}
.paper .c{text-align:center}
.paper .title{font-weight:600;font-size:14px;letter-spacing:.06em}
.paper hr{border:0;border-top:1px dashed rgba(0,0,0,.35);margin:12px 0}
.paper .li{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:baseline}
.paper .li .n{overflow:hidden;white-space:nowrap;text-overflow:clip;text-transform:uppercase}
.paper .li .n::after{content:" ........................................................";color:rgba(0,0,0,.3)}
.paper .li .a{font-variant-numeric:tabular-nums;text-align:right}
.paper .li .p{color:rgba(0,0,0,.45);margin-left:8px;display:inline-block;min-width:5ch}
.paper .tot{font-weight:600;font-size:14px}
.paper .warn{color:var(--warn)}
.paper .fine{font-size:10.5px;color:rgba(0,0,0,.55);margin:0}
.paper .bar{display:block;height:44px;margin:16px auto 6px;width:78%}
.paper .li.in{opacity:0;transform:translateY(-4px);animation:print .25s var(--out) forwards}
@keyframes print{to{opacity:1;transform:none}}
.actions{display:flex;gap:10px;margin-top:26px}
.btn{border:0;cursor:pointer;padding:11px 18px;border-radius:10px;font-size:15px;font-weight:600;background:var(--ink);color:#fff;transition:background .2s,box-shadow .2s}
.btn:hover{background:var(--dm)}
.btn.ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px rgba(20,22,26,.4);background:none}

/* ---------- the map: wider than the column, down to every line ---------- */
.map-wrap{width:min(1400px,calc(100vw - 48px));margin-left:50%;transform:translateX(-50%)}
/* where you are in the map, stuck to the top while you scroll it: back out, and the trail */
.bar-nav{
  position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:14px;margin-top:14px;padding:10px 0;
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.up{
  flex:none;border:0;cursor:pointer;padding:8px 13px;border-radius:999px;background:var(--ink);color:#fff;
  font-size:14px;font-weight:600;transition:background .2s;
}
.up:hover{background:var(--dm)}
.up[hidden]{display:none}
.crumbs{display:flex;gap:6px;flex-wrap:wrap;align-items:center;color:var(--faint);min-height:18px}
.crumbs button{border:0;background:none;cursor:pointer;color:var(--muted);font:inherit;letter-spacing:inherit;text-transform:inherit;padding:0}
.crumbs button:hover{color:var(--ink)}
.crumbs [aria-current]{color:var(--ink)}
.crumbs a{color:var(--dm);text-decoration:none;margin-left:8px}
.map{position:relative;margin-top:4px;height:clamp(680px,88vh,1000px);background:#16181d;border-radius:12px;overflow:hidden}
.box{position:absolute;overflow:hidden}
.map.in > *{animation:zoomin .32s var(--out)}
@keyframes zoomin{from{opacity:0;transform:scale(.985)}}
.box-head{
  position:absolute;left:0;right:0;top:0;height:17px;padding:0 6px;display:flex;align-items:center;border:0;width:100%;text-align:left;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.86);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:zoom-in;
}
.box-head.d1{height:19px;font-size:10.5px;font-weight:600;color:#fff}
.box-head:hover{color:#fff;text-decoration:underline}
.tile{
  position:absolute;overflow:hidden;padding:3px 4px;color:#fff;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.45);cursor:pointer;
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:1px;
  transition:filter .15s;
}
.tile:hover,.tile.on{filter:brightness(1.22)}
.tile.deep{cursor:zoom-in}
/* a phone's boxes: one level, each a button with its name, your share, and a way in */
.tile.big{border:0;border-radius:0;padding:8px 8px;gap:3px;font:inherit;color:#fff;box-shadow:inset 0 0 0 1.5px #16181d;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.tile.big:active{filter:brightness(1.3)}
.tile.big small{margin-top:4px;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.18);font-size:11.5px;font-weight:600;white-space:nowrap}
.tile.big.rest{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 8px,transparent 8px 16px)}
.tip .go{margin-top:6px;color:var(--dm)}
/* the view as a ranked list: every part, even the slivers, with a bar for its size */
.rank{margin-top:22px}
.rank-head{color:var(--faint)}
.rank-list{list-style:none;margin-top:8px;border-top:1px solid var(--hair)}
.rank-list li{border-bottom:1px solid var(--hair)}
.rank-list button{
  display:grid;grid-template-columns:1fr auto auto;grid-template-areas:"name you gov" "bar bar bar";gap:6px 18px;align-items:baseline;
  width:100%;padding:11px 2px 10px;border:0;background:none;cursor:pointer;text-align:left;font-size:14.5px;
}
.rank-list button:hover{background:var(--wash)}
.r-name{grid-area:name;color:var(--ink);font-weight:500}
.r-name em{font-style:normal;color:var(--dm);font-size:12.5px;margin-left:8px;white-space:nowrap}
.r-name .sw{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:8px;vertical-align:1px}
.r-you{grid-area:you;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.r-gov{grid-area:gov;color:var(--faint);font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:11ch;text-align:right}
.r-bar{grid-area:bar;height:4px;border-radius:2px;background:var(--wash);overflow:hidden}
.r-bar i{display:block;height:100%;border-radius:2px}
.tile b{font-weight:600;letter-spacing:-.01em;line-height:1.1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;word-break:break-word}
.tile span{font-variant-numeric:tabular-nums;opacity:.85;white-space:nowrap}
.tip{
  position:fixed;z-index:10;pointer-events:none;max-width:300px;padding:10px 12px;border-radius:10px;
  background:#fff;color:var(--ink);font-size:13px;box-shadow:0 0 0 1px var(--hair),0 16px 32px -12px rgba(20,22,26,.35);
}
.path{font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}
.tip b{display:block;margin-top:2px;font-size:15px;letter-spacing:-.01em}
.tip .you{margin-top:6px;font-size:22px;font-weight:600;letter-spacing:-.03em}
.tip .gov{color:var(--muted)}
/* a line, opened: a card at the bottom right (a sheet on phones) */
.card{
  position:fixed;z-index:20;right:24px;bottom:24px;width:min(380px,calc(100vw - 32px));padding:18px 18px 16px;border-radius:14px;
  background:#fff;box-shadow:0 0 0 1px var(--hair),0 30px 60px -20px rgba(20,22,26,.45);animation:rise .22s var(--out);
}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
.card .x{position:absolute;top:8px;right:8px}
.card .path{padding-right:30px}
.card b.name{display:block;margin-top:4px;font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.2;padding-right:28px}
.card .you{margin-top:10px;font-size:34px;font-weight:600;letter-spacing:-.04em;line-height:1}
.card .you small{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0;margin-left:6px}
.card .gov{margin-top:6px;color:var(--muted);font-size:14px}
.card .about{margin-top:12px;font-size:15px;line-height:1.55;color:var(--text)}
.card .about em{font-style:normal;color:var(--muted)}
.card .est{margin-top:8px;font-size:12.5px;line-height:1.5;color:var(--faint)}
.card .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
/* what the area you're in does, under the trail */
.view-about{margin:2px 0 10px;max-width:72ch;font-size:15px;line-height:1.55;color:var(--text)}
.view-about[hidden]{display:none}
.card .row a,.card .row button{
  display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:9px;font-size:13.5px;font-weight:600;
  text-decoration:none;border:0;cursor:pointer;background:var(--wash);color:var(--ink);
}
.card .row a:hover,.card .row button:hover{background:#E8EAEE}
.x{width:32px;height:32px;border:0;border-radius:8px;background:none;cursor:pointer;font-size:22px;line-height:1;color:var(--muted)}
.x:hover{background:var(--wash);color:var(--ink)}

/* ---------- every line ---------- */
.search{width:min(340px,100%);padding:10px 12px;border:0;border-radius:10px;background:var(--wash);font-size:16px;outline:0}
.search:focus{box-shadow:0 0 0 2px var(--dm)}
.lines{width:100%;margin-top:20px;border-collapse:collapse;font-size:14px}
.lines th{text-align:left;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);padding:0 0 8px}
.lines td{padding:10px 0;border-top:1px solid var(--hair);vertical-align:baseline}
.lines .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:16px}
.lines td.num:nth-child(2){font-weight:600}
.lines .gov{color:var(--muted)}
.lines .where{display:block;margin-top:2px;font-size:12px;color:var(--faint)}
.lines .where a{color:var(--faint);text-decoration:none;border-bottom:1px solid var(--hair)}
.lines .where a:hover{color:var(--dm);border-color:var(--dm)}
.lines .sw{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:8px;vertical-align:1px}
.lines-wrap .more{margin-top:16px}
.lines-wrap .more[hidden]{display:none}

/* ---------- how it works ---------- */
.method{max-width:760px}
.method ul{margin-top:16px;padding-left:18px;color:var(--text);font-size:15px}
.method li{margin-top:9px}
.method a{color:var(--dm);text-decoration:none}
.method a:hover{text-decoration:underline}
.disclaimer{max-width:760px;padding-top:28px;border-top:1px solid var(--hair)}
.disclaimer h2{font-size:15px;letter-spacing:-.01em;color:var(--muted)}
.disclaimer p{margin-top:10px;font-size:13px;line-height:1.6;color:var(--faint)}

/* ---------- the share sheet ---------- */
.share{
  margin:auto;width:min(760px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto;padding:20px 22px 22px;border:0;border-radius:16px;
  background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--hair),0 40px 80px -24px rgba(20,22,26,.5);
}
.share::backdrop{background:rgba(20,22,26,.4)}
.share-head{display:flex;align-items:center;justify-content:space-between}
.share-head h2{font-size:20px}
.share-body{display:grid;grid-template-columns:220px 1fr;gap:24px;margin-top:14px}
.preview{background:#EDEDE8;border-radius:10px;padding:10px;max-height:380px;overflow:auto}
.preview img{display:block;width:100%;border-radius:4px}
.toggle{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;cursor:pointer}
.toggle input{width:18px;height:18px;accent-color:var(--dm)}
.share-hint{margin-top:6px;font-size:13px;color:var(--faint)}
.targets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}
.targets a,.targets button{
  display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 4px 10px;border-radius:12px;border:0;cursor:pointer;
  background:var(--wash);color:var(--ink);text-decoration:none;font-size:12.5px;font-weight:500;transition:background .2s;
}
.targets a:hover,.targets button:hover{background:#E8EAEE}
.targets i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font-style:normal;font-weight:700;font-size:15px;color:#fff}
.targets svg{width:18px;height:18px}
.share-note{margin-top:12px;color:var(--dm);min-height:1.4em}

@media (max-width:760px){
  .top{padding:16px}
  main{padding:0 16px 72px}
  section{margin-top:72px}
  .hero{padding-top:20px}
  .ask{margin-top:32px}
  .result{font-size:16px}
  .map-wrap{width:calc(100vw - 16px)}
  .map{height:1100px;border-radius:10px}
  .bar-nav{gap:10px}
  /* the trail on one line you can swipe, kept scrolled to where you are */
  .crumbs{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;scrollbar-width:none;min-width:0;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 14px);mask-image:linear-gradient(90deg,transparent,#000 14px);padding-left:6px}
  .crumbs::-webkit-scrollbar{display:none}
  .rank-list button{grid-template-columns:1fr auto;grid-template-areas:"name you" "gov gov" "bar bar";gap:3px 12px;font-size:14px}
  .r-gov{text-align:left}
  .paper{font-size:11.5px;padding:24px 18px 30px}
  .lines .gov{display:none}
  /* on a phone the card is a sheet from the bottom: big type, room to read, a full-width source */
  .card{right:0;left:0;bottom:0;width:auto;max-height:78dvh;overflow:auto;padding:22px 20px calc(20px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0}
  .card .x{top:12px;right:12px;width:40px;height:40px;font-size:26px}
  .card .path{font-size:11px;line-height:1.5}
  .card b.name{font-size:24px;line-height:1.15;margin-top:6px}
  .card .you{margin-top:14px;font-size:44px}
  .card .you small{font-size:14px}
  .card .gov{font-size:15px;line-height:1.5}
  .card .about{font-size:17px;line-height:1.55;margin-top:14px}
  .card .row a,.card .row button{width:100%;justify-content:center;padding:14px 16px;font-size:15.5px;border-radius:12px}
  .view-about{font-size:14.5px}
  .share{width:100vw;max-width:100vw;max-height:92dvh;margin:auto 0 0;border-radius:18px 18px 0 0;padding-bottom:calc(22px + env(safe-area-inset-bottom))}
  .share-body{grid-template-columns:1fr}
  .preview{max-height:200px}
}