/* report.css: a research report at /research/<slug>/ (ops/build_research_piece.py). The hero and its contents card
   are the research frame (story.css); the article column, the figures and fact cards between columns, the sources
   and the end matter are a post's (design/pages/post.css). This file holds only what a report adds to them. Layout
   only: every color and size is a ka.css token. */

/* the topic after the breadcrumb, quieter than the links */
.rp-topic{color:var(--mut)}

/* the contents card: a report has more sections than a story has chapters, so its rows are compact; beside the title
   from 961px the title sits at the top of the hero, level with the card */
.rp-toc .toc-row{grid-template-columns:2.1rem minmax(0,1fr) 8px;min-height:48px;padding:8px 12px}
.rp-toc .toc-t b{font:600 var(--fs-ui)/1.3 var(--sans);letter-spacing:0}
@media (min-width:961px){.rp-top .story-hero{align-items:start}}
/* on a phone the card is one row that opens the list (report.js), so the report's first paragraph is on the first
   screen; without JS the list is always open */
.rp-toc-btn{display:none}
@media (max-width:960px){
  .story-hero .rp-toc{margin-top:28px}
  html.js .rp-toc{padding:4px 10px}
  html.js .rp-toc .toc-k{display:none}
  html.js .rp-toc-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:4px 12px;border:0;background:none;color:var(--mut);font:700 var(--fs-xs)/1.25 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
  html.js .rp-toc-btn::after{content:"";flex:none;width:8px;height:14px;background:var(--blue);opacity:.7;-webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat;rotate:90deg;transition:rotate var(--dur-ui) var(--ease-out)}
  html.js .rp-toc.is-open .rp-toc-btn::after{rotate:-90deg}
  html.js .rp-toc:not(.is-open) .toc-list{display:none}
  html.js .rp-toc.is-open .toc-list{padding-bottom:6px}
}

/* the explorer sits between article columns like a figure, so the column's paragraph and list rules stay out of it */
.rp-explorer{margin-top:8px;margin-bottom:8px}

/* the downloads: one link per file, then the license and where the method is */
.rp-data{margin-top:36px;margin-bottom:8px}
.rp-data .kicker{margin-bottom:10px}
.rp-dl{list-style:none;margin:0;padding:0}
.rp-dl li{margin:0}
.rp-data .datafig-src{margin:6px 0 0}