/* Reports (/product/reports). The product visuals are the shared v-* blocks in
   css/visuals.css; this file holds the page's own layout. */

/* Hero: the committee paper sits a little in from the edge on wide screens */
@media(min-width:1024px){.tn-rep-hero-visual .v-stage{max-width:560px;margin-left:auto}}

/* Bullet lists beside a visual */

/* 2. One question per report: four groups */
.tn-rep-qgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
@media(min-width:640px){.tn-rep-qgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1200px){.tn-rep-qgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tn-rep-q .tn-eyebrow{color:var(--tn-volt-blue-dark)}
.tn-rep-q h3{margin-bottom:16px}
.tn-rep-reports{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tn-rep-reports li{padding:12px 0;border-top:1px solid var(--tn-fog)}
.tn-rep-reports li:first-child{padding-top:0;border-top:0}
.tn-rep-reports strong{display:block;font-size:15px;font-weight:600;line-height:1.4;color:var(--tn-midnight)}
.tn-rep-reports span{display:block;margin-top:2px;font-size:15px;line-height:1.55;color:var(--tn-iron)}

/* 6. Three kinds of investment: a table on tablets and desktops, stacked by row on phones */
.tn-rep-kinds,.tn-rep-more{border-top:1px solid var(--tn-fog)}
.tn-rep-table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.55}
.tn-rep-table th,.tn-rep-table td{padding:16px 20px 16px 0;text-align:left;vertical-align:top;border-top:1px solid var(--tn-fog)}
.tn-rep-table thead th{padding-top:0;border-top:0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tn-iron)}
.tn-rep-table thead td{border-top:0}
.tn-rep-table tbody th{width:22%;font-weight:600;color:var(--tn-midnight)}
.tn-rep-table td{color:var(--tn-iron)}
@media(max-width:767px){
  .tn-rep-table,.tn-rep-table tbody,.tn-rep-table tr,.tn-rep-table th,.tn-rep-table td{display:block;width:auto}
  .tn-rep-table thead{display:none}
  .tn-rep-table tr{padding:20px 0;border-top:1px solid var(--tn-fog)}
  .tn-rep-table tbody tr:first-child{border-top:0;padding-top:0}
  .tn-rep-table tbody th,.tn-rep-table td{padding:0;border-top:0}
  .tn-rep-table tbody th{width:auto;margin-bottom:8px;font-size:16px}
  .tn-rep-table td{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr);gap:12px;padding:6px 0}
  .tn-rep-table td::before{content:attr(data-l);font-size:13px;font-weight:600;color:var(--tn-midnight)}
}