@layer page-specific {

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* .single-report  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.single-report {
  display: grid;
  grid-template-areas: 
  "header"
  "toc"
  "content";
  gap: 1rem;
  align-items: start;
}

@media (min-width: 50rem){
  .single-report {
    grid-template-columns: 3fr calc(var(--sidebar-width) - 4rem);
    grid-template-areas: 
      "header header"
      "content toc";
    column-gap: 2rem;
  }

  /* if TOC is empty let article expand whole page width */
  .single-report:has(.toc ol:empty) {
    grid-template-areas: 
      "header header"
      "content content";
  }
}































/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* .single-report header - - - - - - - - - - - - - - - - - - - - - - - - - - */

.single-report header {
  --featured-image-size: min(10rem,30vw);
  display: grid;
  row-gap: 0;
  column-gap: inherit;
  grid-template-columns: var(--featured-image-size,10rem) 1fr;
  grid-area: header;
}

.single-report header > * {
  grid-column: 1 / -1;
}

.single-report header h1 {
  line-height: 1.1;
  margin-block-start: 0;
  margin-block-end: 1rem;
}
@media (min-width: 50rem) {
  .single-report header h1 {
    margin-block-end: 2rem;

  }
}

.single-report header .report-cover {
  grid-column: 1 / 2;
}

/* .single-report .report-cover :is(img,video) {
  max-height: 90svh;
  margin-inline: auto;
  margin-block: 1rem; 
} */

/* .single-report header .report-cover video {
  aspect-ratio: 1;
  width: 100%;
  border-radius: 0.5rem;
  border: var(--hr-width) solid var(--text-gray);
} */


.single-report header .report-meta {
  font-size: 0.8rem;
  /* padding-bottom: 1rem; */
  /* border-bottom: var(--hr-width) solid var(--accent-color); */
  grid-column: 2/3;
}

.single-report header .report-meta > * + * {
  margin-top: 0.5rem;
  display: inline-block;
}

.single-report header .report-series,
.single-report header .report-topics {
  display: block;
  font-weight: bold;
}
/* display commas between term links */
:is(.report-topics,.report-series) a:has( + a)::after {
  content: ', ';
}

.single-report header .report-date {
  min-width: max-content;
  margin-right: 1rem;
}
/* force de-capitalization for French */
html[lang^="fr" i] .report-date { 
  text-transform: lowercase;
}

.single-report header :is(.report-issn, .report-isbn) {
  width: max-content;
  text-wrap-mode: nowrap; /* never break ISBN/ISSN number */
}

.single-report header .report-excerpt {
  margin-top: 1rem;
}

.single-report header .report-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1em;
  font-size: 1rem;
  font-weight: bold;
  border-bottom: var(--hr-width) solid var(--text-gray);
  margin-block: 1rem;
  padding-bottom: 1rem;
}


/* tabbed sections */
.single-report header .tabbed-sections {
  border-bottom: var(--hr-width) solid var(--accent-color);
  font-size: 0.8rem;
}

.single-report header .tabbed-sections [tabindex] {
  font-weight: 600;
  border-radius: 0.5rem 0.5rem 0 0;
  padding-inline: 0.5rem;
  padding-block: 0.5rem;
  padding-block-end: 0.25rem;
  margin-inline-end: 0.25rem;
  background-color: var(--accent-light);
}

.single-report header .tabbed-sections [tabindex][aria-selected] {
  background-color: var(--accent-color);
  color: var(--text-dark-color)
}

.single-report header .tabbed-sections [tabindex]:focus,
.single-report header .tabbed-sections [tabindex]:hover {
  background-color: var(--accent-dark);
  color: var(--text-dark-color);
}





.single-report header .tabbed-sections [tabindex].icon {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  /* grid-template-columns: auto auto; */
}

.single-report header .tabbed-sections section {
  border-top: var(--hr-width) solid var(--accent-color);
  padding-block: 1rem;
}



.single-report .tabbed-sections .row {
  gap: 0.25rem;
  align-items: center;
}

.single-report .tabbed-sections .row + .row {
  margin-top: 1rem;
}

.single-report .tabbed-sections .row > * {
  flex: 0 1 auto;
}

.single-report .tabbed-sections .copy-target {
  display: inline-block;
  width: 100%;
  max-width: max-content;

  padding: 0.5rem;
  border-radius: 0.25rem;
  background: var(--accent-light);

  font-family: monospace;
}


.single-report .tabbed-sections button {
  padding: 0.5em 1em;
  border-radius: 0.25rem;
  border: var(--hr-width) solid var(--button-bg);
  background-color: var(--button-bg);
  color: var(--button-color);
}
.single-report .tabbed-sections button:is(:hover, :focus-visible) {
  border: var(--hr-width) solid var(--button-focus-bg);
  background-color: var(--button-focus-bg);
  color: var(--button-focus-color);
}
.single-report .tabbed-sections button:active {
  border: var(--hr-width) solid var(--button-active-bg);
  background-color: var(--button-active-bg);
  color: var(--button-active-color);
}

.single-report .tabbed-sections section > * + * {
  margin-top: 1rem;
}

.single-report {
  container-type: inline-size;
}

@media (min-width: 30rem){
  .single-report header {
    grid-template-rows: auto auto 1fr;
  }
  
  .single-report header .report-cover {
    grid-row: span 2; 
  }

  .single-report header .report-excerpt {
    grid-column: 2 / 3;
  }
}

@media (min-width: 50rem){
  .single-report header {
    /* grid-template-columns: 1fr calc(var(--sidebar-width) - 4rem); */
    grid-template-columns: inherit;
    grid-template-rows: repeat(9,auto);
  }

  .single-report header > * {
    grid-column: 1 / 2;
  }
  
  .single-report header .report-cover {
    grid-column: 2/3;
    grid-row: 1/-1; 
    /* grid-row: 1/10;  */
  }

  .single-report header .report-series,
  .single-report header .report-topics,
  .single-report header .report-meta,
  .single-report header .report-excerpt {
    grid-column: 1 / 2;
  }
}
























/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* .single-report aside  - - - - - - - - - - - - - - - - - - - - - - - - - - */


.single-report .toc {
  /* display: grid; */
  grid-area: toc;
  position: sticky;
  /* top: 0; */
  border: none;
  /* margin-inline: -0.5rem; */
  padding: 0;
  font-size: 0.8rem;
  background: var(--accent-light);
  /* border-radius: 0.5rem; */
  /* padding-bottom: 0.5rem; */
  z-index: 9;
  /* todo: needs drop-shadow */
}

.single-report .toc ol {
  overflow-y: auto;
}

/* if TOC is empty, hide it */
.single-report .toc:has(ol:empty) {
  display: none;
}

/* .toc .toc-h1 > a { padding-bottom: 0.5em;} */
.toc .toc-h2 > a { 
  padding-left: 1rem;
  font-weight: bold;   
}
.toc .toc-h3 > a { 
  padding-left: 1.75rem;
  font-weight: normal; 
}
.toc .toc-h4 {
  padding-left: 1.75rem
}
.toc .toc-h4:has( > a:is(:hover,:focus-visible)) {
  background-color: var(--button-light-focus-bg);
  /* color: var(--button-light-focus-color, white); */
  /* text-decoration: none; */
}
.toc .toc-h4 > a { 
  padding-left: 0.5rem;
  font-weight: normal; 
  border-left: var(--hr-width) solid var(--accent-color); 
}
/* .toc .toc-h5 > a { padding-left: 1.75rem; font-weight: normal; border-left: var(--hr-width) solid var(--accent-color); } */
/* .toc .toc-h6 > a { padding-left: 1.75rem; font-weight: normal; border-left: var(--hr-width) solid var(--accent-color); } */

.single-report .toc{
  top: 0;
  margin-inline: -0.5rem;
  border-bottom: var(--hr-width) solid var(--accent-color);
}

.single-report .toc button {
  min-height: 44px;
}
.single-report .toc:has(button[aria-expanded]) {
  box-shadow: 0 0.25em 1em 0 rgba(0,0,0,0.5);
}

.single-report .toc ol {
  max-height: 60svh;
  gap: 0;
}
.single-report .toc ol:not([aria-expanded]) {
  display: none;
}

@media (min-width: 50rem){
  


  /* no clicks for button in desktop mode */
  .single-report .toc button {
    pointer-events: none;
  }
  /* dont't show +/- marker in desktop mode  */
  .single-report .toc button::after {
    display: none;
  }
  /* always show TOC in desktop mode */
  .single-report .toc ol:not([aria-expanded]) {
    display: grid;
  }




  .single-report .toc {
    /* display: grid; */
    grid-area: toc;
    position: sticky;
    top: 0.5rem;
    border: none;
    margin: 0;
    padding: 0;
    font-size: 0.8rem;
    background: var(--accent-light);
    border-radius: 0.5rem;

    /* position:fixed; */
    /* top:0; */
    /* right:0; */
    /* min-height: 10px; */
    /* min-width: 10px; */
    /* max-height: calc(100vh - 1rem);
    overflow-y: auto; */
    /* border: 1px solid red; */
  }

  .toc > button {
    padding: 1rem;
  }
  
  .single-report .toc ol {
    /* max-height: 100%; */
    /* overflow-y: auto; */
    /* padding:0; */
    /* margin:0; */
    /* list-style: none; */
    max-height: calc(99vh - 4rem);
    margin-bottom: 0.5rem;
    gap:0;
  }

  .toc li a {
    display: block;
    padding-block: 0.25rem;
    padding-right: 1rem;
    line-height: 1.1;
  }
    
}





































/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* .single-report article  - - - - - - - - - - - - - - - - - - - - - - - - - */

.single-report article {
  margin-top: 0;
  grid-area: content;
  overflow: auto;
}



/* footnotes should have some margin */
.footnotes > p {
  margin-block-start: 1rem;
}  





/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.single-report article {
  /* max-width: 60ch; */
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* spacing for lists */
.single-report article li {
  margin-block: 0.5rem;
}



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* alt-text disclosure */
.single-report details.alt-text {
  border-top: none;
  background: var(--text-bg);
  border: 0;
}
.single-report details.alt-text[open] {
  border: var(--hr-width) solid var(--accent-color);
  border-top: 0;
}

.single-report details.alt-text summary {
  justify-content: center;
  font-size: 0.8rem;
}
.single-report details.alt-text[open] summary:not(:hover,:focus-visible) {
  background: var(--text-bg);
  color: var(--text-color); 
}

/* prevent marker from changing size, so summary text doesn't shift slightly */
.single-report details.alt-text summary::after {
  display: grid;
  place-content: center;
  width: 1ch;
}

/* padding around details content but not summary */
.single-report details.alt-text[open] {
  padding: 0.5rem;
  padding-top: 0;
}
.single-report details.alt-text[open] summary {
  margin-inline: -0.5rem;
  margin-bottom: 0.5rem;
}


    

/* remove top-bottom HR when inside alt-text disclosure */
.single-report details.alt-text .report-table .title,
.single-report details.alt-text .report-table .source {
  border:none;
}


/* text coming later notice */
.single-report .text-coming-later {
  background-color: var(--accent-light);
  color: var(--text-light-color);
  padding: 1rem;
  border-radius: 0.5rem;
}




























































































/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* old classes / styles */
/* 
existing styles maintained with minor changes:
- px lengths exchanged for similar rem or em lengths
- hardcoded colours changed to theme custom props 
*/

.report-chart,
.report-table {
  /*padding won't work here*/
  /* margin: 10px 0 24px 0; */
  table-layout: fixed; /*defaults all columns to equal width*/
  width: 100%; /*needed for table-layout:fixed;*/
  /* font-size: 0.8rem; */
  /* line-height: 1.2; */
}

.report-table {
  font-size: 0.8rem;
}

/* default all captions to bottom of table */
.report-table caption {
  caption-side: bottom;
}

/* Add space between last table row and first bottom caption. */
/* Should be the first caption after the .title caption. */
.report-table .title + caption { margin-top: 0.5rem; }


/* caption styles */
:is(.report-chart, .report-table) .title {
  margin: 0;
  padding-block: 0.5rem;
  font-size: 1.25rem;
  line-height: 1.1;
  font-weight: bold;
  text-align: left;
  /* top-border needs to be here, not on table */
  border-top: var(--hr-width) solid var(--accent-color);
  /* move title above table */
  caption-side: top;
}
:is(.report-table, .report-chart) .title span,
:is(.report-table, .report-chart) .title :is(.fig-num, .tab-num){
  display: block;
  margin-bottom: 0.5em;
  color: var(--accent-color);
  font-size: 0.8rem;
}

:is(.report-chart, .report-table) :is(.source, .note, .alt-text) {
  font-weight: normal;
  text-align: left;
  font-size: 0.8rem;
  line-height: normal;
}
/* background colour for notes/source but not alt-text */
:is(.report-chart, .report-table) :is(.source, .note) {
  background-color: var(--accent-light);
  padding-inline: 0.5rem;
  padding-top: 0.5rem;
}
:is(.report-chart, .report-table) :is(.source, .note) + :is(.source, .note) {
  background-color: var(--accent-light);
  padding-top: 0.25rem;
}
:is(.report-chart, .report-table) .source {
  /* bottom-border needs to be here, not on table */
  border-bottom: var(--hr-width) solid var(--accent-color);
  padding-bottom: 0.5rem;
}

.report-chart {
  /* margin: 10px 0; */
}
.report-chart p {
  margin: 0;
}
.report-chart img {
  margin: 0 auto;
  display: block;
  width: 100%; /* width:100% will enlarge smaller images*/
  /*max-width: 100%; /* max-width:100% will scale down larger images, but not increase size of smaller images*/
  max-height: 90svh;
  object-fit: contain;
}

/*td and th default styles*/
.report-table :is(th,td) {
  text-align: center;
  padding: 0.5em;
  border-width: 0;
  line-height: 1.25;
  font-weight: normal;
  word-wrap: break-word;
}

/* alternate row colors */
.report-table tr:nth-child(odd) {
  background-color: var(--accent-light);
}
/*bottom border for last row*/
.report-table tr:last-of-type > * {
  border-bottom: var(--hr-width) solid var(--text-color);
}



/* table utility classes ****************************** */

/* width */ 
/* sets cell width as if it spanned two columns */
.report-table :is(th,td).col-2  { width: calc(100% * 2/3); }
.report-table :is(th,td).col-3  { width: calc(100% * 2/4); }
.report-table :is(th,td).col-4  { width: calc(100% * 2/5); }
.report-table :is(th,td).col-5  { width: calc(100% * 2/6); }
.report-table :is(th,td).col-6  { width: calc(100% * 2/7); }
.report-table :is(th,td).col-7  { width: calc(100% * 2/8); }
.report-table :is(th,td).col-8  { width: calc(100% * 2/9); }
.report-table :is(th,td).col-9  { width: calc(100% * 2/10); }
.report-table :is(th,td).col-10 { width: calc(100% * 2/11); }
.report-table :is(th,td).col-11 { width: calc(100% * 2/12); }
.report-table :is(th,td).col-12 { width: calc(100% * 2/13); }
.report-table :is(th,td).col-13 { width: calc(100% * 2/14); }
.report-table :is(th,td).col-14 { width: calc(100% * 2/15); }
.report-table :is(th,td).col-15 { width: calc(100% * 2/16); }
.report-table :is(th,td).col-16 { width: calc(100% * 2/17); }
.report-table :is(th,td).col-17 { width: calc(100% * 2/18); }
.report-table :is(th,td).col-18 { width: calc(100% * 2/19); }


/* todo: convert these table utility classes to general utility classes  */
/* borders */
.report-table   .border,
.report-table tr.border > *        { border:        1px solid black; }
.report-table   .border-top,
.report-table tr.border-top > *    { border-top:    1px solid black; }
.report-table   .border-right,
.report-table tr.border-right > *  { border-right:  1px solid black; }
.report-table   .border-bottom,
.report-table tr.border-bottom > * { border-bottom: 1px solid black; }
.report-table   .border-left,
.report-table tr.border-left > *   { border-left:   1px solid black; }

.report-table   .border-solid,
.report-table tr.border-solid > *  { border-style: solid; }
.report-table   .border-dashed,
.report-table tr.border-dashed > * { border-style: dashed; }
.report-table   .border-dotted,
.report-table tr.border-dotted > * { border-style: dotted; }

.report-table   .border-top-solid,
.report-table tr.border-top-solid > *     { border-top:    1px solid  black; }
.report-table   .border-right-solid,
.report-table tr.border-right-solid > *   { border-right:  1px solid  black; }
.report-table   .border-bottom-solid,
.report-table tr.border-bottom-solid > *  { border-bottom: 1px solid  black; }
.report-table   .border-left-solid,
.report-table tr.border-left-solid > *    { border-left:   1px solid  black; }
.report-table   .border-top-dashed,
.report-table tr.border-top-dashed > *    { border-top:    1px dashed black; }
.report-table   .border-right-dashed,
.report-table tr.border-right-dashed > *  { border-right:  1px dashed black; }
.report-table   .border-bottom-dashed,
.report-table tr.border-bottom-dashed > * { border-bottom: 1px dashed black; }
.report-table   .border-left-dashed,
.report-table tr.border-left-dashed > *   { border-left:   1px dashed black; }
.report-table   .border-top-dotted,
.report-table tr.border-top-dotted > *    { border-top:    1px dotted black; }
.report-table   .border-right-dotted,
.report-table tr.border-right-dotted > *  { border-right:  1px dotted black; }
.report-table   .border-bottom-dotted,
.report-table tr.border-bottom-dotted > * { border-bottom: 1px dotted black; }
.report-table   .border-left-dotted,
.report-table tr.border-left-dotted > *   { border-left:   1px dotted black; }


.report-table :is(.border-none,   .border-0) { border-width: 0; }
.report-table :is(.border-normal, .border-1) { border-width: 1px; }
.report-table :is(.border-thick,  .border-2) { border-width: 2px; }
.report-table :is(.border-thicker,.border-3) { border-width: 3px; }

/* text */
.report-table :is(.bold,.b,.strong),
.report-table tr:is(.bold,.b,.strong) * { font-weight: bold; }
.report-table :is(.italic,.i,.em),
.report-table tr:is(.italic,.i,.em) *   { font-style: italic; }

/* use ch unit so indent scales with font-size*/
.report-table .indent { padding-left: 3ch; } 

.report-table .left   { text-align: left; }
.report-table .right  { text-align: right; }
.report-table .center { text-align: center; }
  
.report-table tr.header :is(th,td) {
  background-color: var(--accent-dark);
  color: var(--text-dark-color);
  font-weight: bold;
}

/* cell background color */
.report-table :is(tr,th,td).bg-blue         { background-color: rgb( 15, 96,213); }
.report-table :is(tr,th,td).bg-white        { background-color: rgb(255,255,255); }
.report-table :is(tr,th,td).bg-dark-blue    { background-color: rgb( 26, 43, 74); }
.report-table :is(tr,th,td).bg-light-blue-1 { background-color: rgb(158,194,245); }
.report-table :is(tr,th,td).bg-light-blue-2 { background-color: rgb(186,209,246); }
.report-table :is(tr,th,td).bg-light-blue-3 { background-color: rgb(215,228,250); }
.report-table :is(tr,th,td).bg-light-blue-4 { background-color: rgb(241,246,253); }
.report-table :is(tr,th,td).bg-green        { background-color: rgb(178,210, 53); }
.report-table :is(tr,th,td).bg-pink         { background-color: rgb(226, 62,148); }

/* font-color */
.report-table :is(tr,th,td).blue         { color: rgb( 15, 96,213); }
.report-table :is(tr,th,td).white        { color: rgb(255,255,255); }
.report-table :is(tr,th,td).dark-blue    { color: rgb( 26, 43, 74); }
.report-table :is(tr,th,td).light-blue-1 { color: rgb(158,194,245); }
.report-table :is(tr,th,td).light-blue-2 { color: rgb(186,209,246); }
.report-table :is(tr,th,td).light-blue-3 { color: rgb(215,228,250); }
.report-table :is(tr,th,td).light-blue-4 { color: rgb(241,246,253); }
.report-table :is(tr,th,td).green        { color: rgb(178,210, 53); }
.report-table :is(tr,th,td).pink         { color: rgb(226, 62,148); }

.report-table .red  { color: red; }
.report-table .blue { color: var(--accent-color); }















/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* report-table wrapper allows for scrolling overflow */
div.report-table-container{
  overflow-x: auto;
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/*Used for links to new reports on old report page*/
.report-update-banner {
font-size: 0.8rem;
background: rgb(241,246,253);
padding: 0.5rem;
}



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* container aware float */
:not(dialog):has(> .float-right) {
  container-type: inline-size;
}
@container (width > 35rem){
:not(dialog) > .report-chart.float-right, 
:not(dialog) > .report-chart.float-left {
  max-width: 50%;
  display: block;
  margin-inline: 0.5rem;
  margin-bottom: 0.5rem;
  clear: both;
}
:not(dialog) > .report-chart.float-right{
  float: right;
  margin-right: 0;
}
:not(dialog) > .report-chart.float-left {
  float: left;
  margin-left: 0;
}
:not(dialog) > .report-chart.float-right,
:not(dialog) > .report-chart.float-left {
  /* margin-top: 1rem; */
}

:not(dialog) > .report-chart.float-right .title,
:not(dialog) > .report-chart.float-left .title{
  font-size: 1rem;
}
/* stop floated charts from intersecting headings,etc */
h1,h2,h3,h4,h5,h6,.report-chart,.report-table,.report-table-container {
  clear: both;
}

}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

main.single-report .tabbed-sections > section video {
  width: calc(var(--sidebar-width));
  border: var(--hr-width) solid var(--text-gray);
  border-radius: 0.5rem;
}



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 20rem;
  background-color: #555;
  color: #fff;
  /* text-align: center; */
  border-radius: 6px;
  padding: .5rem;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  opacity: 0;
  margin-left: -10rem;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.tooltip-right {
  top: -5px;
  left: 125%;
}

.tooltip-left {
  top: -5px;
  bottom: auto;
  right: 128%;
}

.tooltip-top {
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
}





/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* interactive charts */

/* reset css sets all SVGs to 100% width, this causes the colour blocks in the 
legend of interactive charts to expand weirdly. */
.single-report :where([class*='swatch']) svg {
  width: unset;
}


}