/* The research reader: the document, its charts, and the tiles and rails they
   are made of. Shared with share.html, which reuses every chart renderer to
   draw one page as a square card. */
/* A research reads like a document, not a dashboard: one measure of words on
   the left, one square chart on the right, and on a phone the words move on
   top of the square. Everything else on the page gets out of the way. */
:root{
  --font-text:"SF Pro Text",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,sans-serif;
  --font-display:"SF Pro Display",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,sans-serif;
  --inset:clamp(18px,4vw,56px);
}
body{font:400 15px/1.5 var(--font-text);display:block;}
#research{max-width:1420px;margin:0 auto;padding:0 var(--inset) 12vh;}

/* ---- research head: the title and nothing else ---- */
.rhead{padding:clamp(40px,8vh,90px) 0 clamp(20px,3.5vh,38px);}
.rhead h1{font:700 clamp(40px,7vw,86px)/1.0 var(--font-display);letter-spacing:-.035em;
  margin:0;max-width:16ch;text-wrap:balance;}

/* ---- one page ---- */
.rpage{position:relative;display:grid;grid-template-columns:minmax(0,37fr) minmax(0,63fr);
  gap:clamp(22px,3.4vw,58px);align-items:center;
  padding:clamp(34px,6vh,74px) 0;border-top:2px solid var(--ink-1);}

/* ---- colophon: what the head used to carry ---- */
.rcolophon{display:block;border-top:2px solid var(--ink-1);padding:22px 0 40px;max-width:58ch;}
.rcolophon p{display:block;font:400 13px/1.55 var(--font-text);color:var(--muted);margin:0 0 8px;}
.rcolophon p:first-child{color:var(--ink-2);font-size:15px;}
.rcolophon a{color:var(--ink-1);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.rcolophon a:hover{color:var(--s1);}
.rcolophon .rlinks{display:flex;gap:10px;margin-top:10px;}
.rcolophon .rlinks span{color:var(--muted);}
.rtext{min-width:0;}
.rtext .kicker{font:600 12px/1 var(--font-text);letter-spacing:.16em;color:var(--muted);}
.rtext h2{font:700 clamp(34px,4.4vw,68px)/1.02 var(--font-display);letter-spacing:-.035em;
  margin:12px 0 0;text-wrap:balance;}
.rtext .desc{font:400 clamp(15px,1.15vw,17.5px)/1.5 var(--font-text);color:var(--ink-2);
  margin:16px 0 0;max-width:46ch;}
.rctl{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px;}
.rctl:empty{display:none;}
.seg{display:flex;gap:6px;flex-wrap:wrap;}
.rnote{margin-top:18px;max-width:46ch;}
.rstat{font:400 14px/1.45 var(--font-text);color:var(--ink-2);margin:0 0 10px;}
.rstat b{color:var(--ink-1);font-weight:650;}
.rfoot{font:400 12.5px/1.5 var(--font-text);color:var(--muted);margin:12px 0 0;}
.rkey{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;}
.rkey-i{display:inline-flex;align-items:center;gap:6px;font:400 12.5px/1.7 var(--font-text);color:var(--ink-2);}

/* the chart: square on every screen, never taller than the viewport */
.rviz{min-width:0;display:flex;justify-content:center;}
.vizbox{position:relative;width:100%;aspect-ratio:1/1;
  max-width:min(100%,min(74vh,760px));max-height:min(74vh,760px);}
.vizbox svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.vizbox svg text.ax{font:400 10.5px var(--font-text);fill:var(--muted);}
.vizbox svg text.lab{fill:var(--ink-2);}
.vizbox svg text.num{font-variant-numeric:tabular-nums;fill:var(--ink-2);}
.vizbox svg text.pt{font:600 10.5px var(--font-text);fill:var(--ink-1);paint-order:stroke;
  stroke:var(--page);stroke-width:3px;stroke-linejoin:round;}
.vizbox svg text.cap{font:400 10.5px var(--font-text);fill:var(--muted);}
.vizbox svg .grid{stroke:var(--hairline);stroke-width:1;}
.vizbox svg .base{stroke:var(--muted);stroke-width:1;stroke-dasharray:2 3;}
.vizbox svg .cross{stroke:var(--ink-2);stroke-width:1;stroke-dasharray:2 3;}
.vizbox svg .trk{fill:var(--hairline);opacity:.5;}

/* ---- the card button, and the card itself ---- */
.cardbtn{position:absolute;right:0;bottom:clamp(12px,2.4vh,26px);
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  background:none;border:1px solid var(--hairline);border-radius:9px;
  padding:5px 9px;color:var(--muted);font:500 12px/1 var(--font-text);}
.cardbtn svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.4;}
.cardbtn:hover{color:var(--ink-1);border-color:var(--muted);}

.cardback{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;padding:16px;
  background:color-mix(in srgb,var(--page) 78%,#000);backdrop-filter:blur(3px);}
body.noscroll{overflow:hidden;}
.cardpage{--card:min(86vmin,900px);width:var(--card);height:var(--card);
  flex:none;background:var(--page);border:1px solid var(--hairline);
  padding:clamp(20px,3.6vmin,44px);display:flex;flex-direction:column;
  gap:clamp(8px,1.4vmin,18px);}
.cardhead h2{font:700 clamp(24px,5vmin,56px)/1.03 var(--font-display);
  letter-spacing:-.032em;margin:0;max-width:19ch;text-wrap:balance;}
.cardline{font:400 clamp(12px,1.9vmin,21px)/1.35 var(--font-text);color:var(--ink-2);
  letter-spacing:-.01em;margin:clamp(6px,1vmin,12px) 0 0;max-width:44ch;}
.cardkey{display:flex;flex-wrap:wrap;gap:2px clamp(8px,1.5vmin,18px);}
.cardkey .rkey-i,.cardkey .rl-row{font-size:clamp(10px,1.4vmin,16px);}
.cardkey .rkey-i .chip{width:clamp(7px,1vmin,11px);height:clamp(7px,1vmin,11px);}
.cardpage .rviz{flex:1;min-height:0;}
.cardpage .vizbox{width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:auto;}
.cardbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  max-width:min(86vmin,900px);}
.cardhint{font:400 12px/1 var(--font-text);color:var(--muted);}

/* ---- treemap tiles ---- */
.tm-tier{position:absolute;display:flex;align-items:center;justify-content:center;
  color:var(--muted);pointer-events:none;}
.tm-group.strip{background:color-mix(in srgb,var(--c) 24%,var(--surface-1));
  border:1px solid color-mix(in srgb,var(--c) 45%,transparent);border-radius:4px;
  cursor:crosshair;}
.tm-group.strip:hover{background:color-mix(in srgb,var(--c) 38%,var(--surface-1));}
.tm-group.strip .tm-vhead{width:100%;color:var(--ink-1);}
.tm-vhead{position:absolute;left:0;top:0;bottom:0;width:13px;display:flex;
  align-items:center;justify-content:center;pointer-events:none;color:var(--ink-2);}
.tm-vhead span{writing-mode:vertical-rl;transform:rotate(180deg);
  font:600 9.5px/1 var(--font-text);white-space:nowrap;overflow:hidden;}
.tm-tier span{writing-mode:vertical-rl;transform:rotate(180deg);
  font:600 10px/1 var(--font-text);letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;}
.tm-group{position:absolute;border-radius:5px;background:color-mix(in srgb,var(--c) 8%,transparent);}
.tm-head{display:flex;align-items:center;gap:6px;height:19px;padding:0 6px;
  font:600 11px/1 var(--font-text);color:var(--ink-2);}
.tm-head .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tm-head .tot{margin-left:auto;font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums;}
.tm-tile{position:absolute;border-radius:4px;overflow:hidden;padding:4px 5px;cursor:crosshair;
  background:color-mix(in srgb,var(--c) 22%,var(--surface-1));
  border:1px solid color-mix(in srgb,var(--c) 45%,transparent);}
.tm-tile:hover{background:color-mix(in srgb,var(--c) 36%,var(--surface-1));border-color:var(--c);}
.tm-tile.est{border-style:dashed;border-color:color-mix(in srgb,var(--c) 70%,transparent);}
.tm-tile .k{font-weight:700;line-height:1.04;letter-spacing:-.02em;color:var(--ink-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tm-tile .v{font-weight:600;line-height:1.25;color:var(--ink-2);font-variant-numeric:tabular-nums;}
.tm-tile .s{line-height:1.22;color:var(--muted);margin-top:2px;}

/* ---- the moves legend ---- */
.rlegend{display:flex;flex-direction:column;gap:1px;}
.rl-row{display:flex;align-items:center;gap:8px;font:400 13px/1.75 var(--font-text);color:var(--ink-2);}
.rl-row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rl-row .vv{font-variant-numeric:tabular-nums;font-weight:600;}
.rl-row.bench{color:var(--muted);}

/* ---- page rail ---- */
.rrail{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:8;
  display:flex;flex-direction:column;gap:2px;}
.rrail .rdot{display:flex;align-items:center;gap:8px;justify-content:flex-end;
  padding:5px 6px;border-radius:7px;text-decoration:none;color:var(--muted);}
.rrail .rdot i{font:600 10px/1 var(--font-text);font-style:normal;letter-spacing:.06em;}
.rrail .rdot span{display:none;font:400 12px/1 var(--font-text);}
.rrail .rdot:hover{color:var(--ink-1);background:var(--surface-1);}
.rrail .rdot:hover span{display:block;}
.rrail .rdot.on{color:var(--ink-1);font-weight:600;}

@media (max-width:900px){
  .rpage{grid-template-columns:1fr;gap:22px;padding:34px 0 52px;}
  .cardbtn{bottom:14px;}
  .cardpage{--card:min(92vw,92vh);}
  .vizbox{max-width:100%;max-height:none;}
  .rrail{display:none;}
  .rhead{max-width:none;}
  .rtext .desc,.rnote{max-width:none;}
}