/* ============================================================================
   data-visualization.css
   Shared styling for ADR survey and data-led pages.
   Scope: .adr-dataviz  ·  Companion: data-visualization.js
   ============================================================================ */

/* == RESET ===================================================================== */

nav + .content { margin-top: 0; }

/* == TOKENS + ARTICLE SHELL ==================================================== */

.adr-dataviz{
  --navy:#003B71;

  --blue:#006ACB;

  --blue-bright:#0178E6;

  --blue-300:#99D1FF;

  --blue-100:#E5F4FF;

  --blue-200:#B2DDFF;

  --gold:#FBB51D;

  --cream:#FFF8E8;

  --gold-200:#FEF0D2;

  --ink:#1D1D26;

  --grey:#616167;

  --line:#E8E8E9;

  --white:#FFFFFF;

  font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  color:var(--ink);

  line-height:1.6;

  font-size:17px;

  -webkit-font-smoothing:antialiased;

  max-width:860px;

  margin:0 auto;

  padding:0 20px;
}

.adr-dataviz *{box-sizing:border-box;}

.adr-dataviz p{margin:0 0 1.1em;color:var(--ink);}

.adr-dataviz strong{color:var(--navy);font-weight:700;}

.adr-dataviz a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;font-weight:600;}

.adr-dataviz a:hover{color:var(--navy);}

.adr-dataviz a:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:2px;}


/* == HERO ====================================================================== */

.adr-dataviz .adr-hero{
  background:var(--blue-100);

  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-bottom:32px;

  padding:44px 24px 40px;
}

.adr-dataviz .adr-hero-inner{display:flex;align-items:stretch;gap:40px;max-width:1040px;margin:0 auto;}

.adr-dataviz .adr-hero-text{flex:1 1 58%;}

.adr-dataviz .adr-hero h1{
  font-size:clamp(28px,4.6vw,46px);line-height:1.2;font-weight:700;letter-spacing:-.01em;

  color:var(--navy);margin:0 0 14px;
}

.adr-dataviz .adr-hero .adr-hero-sub{
  font-size:clamp(16px,2.1vw,18px);line-height:1.55;color:var(--ink);font-weight:400;margin:0;
}

.adr-dataviz .adr-hero-stat{flex:0 0 32%;background:var(--white);border:2px solid var(--blue-300);border-top:4px solid var(--gold);border-radius:4px;padding:28px 26px;display:flex;flex-direction:column;align-items:center;justify-content:center;}


/* == DONUT RINGS =============================================================== */

.adr-dataviz .adr-ring{position:relative;display:inline-block;flex-shrink:0;line-height:0;}

.adr-dataviz .adr-ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg);}

.adr-dataviz .adr-ring-track{fill:none;stroke:var(--gold-200);}

.adr-dataviz .adr-ring-fill{fill:none;stroke:var(--gold);transition:stroke-dashoffset 1.2s cubic-bezier(.22,.61,.36,1);}

.adr-dataviz .adr-ring-val{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--navy);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}

.adr-dataviz .adr-ring--hero{width:150px;height:150px;}

.adr-dataviz .adr-ring--hero .adr-ring-val{font-size:40px;font-weight:800;}

.adr-dataviz .adr-ring--stat{width:112px;height:112px;}

.adr-dataviz .adr-ring--stat .adr-ring-val{font-size:30px;}

@media (prefers-reduced-motion:reduce){
  .adr-dataviz .adr-ring-fill,.adr-dataviz .adr-kfill{transition:none;}
}

.adr-dataviz .adr-hero-lbl{display:block;margin-top:16px;font-size:15px;line-height:1.5;color:var(--ink);font-weight:500;text-align:center;}


/* == BYLINE ==================================================================== */

.adr-dataviz .adr-byline{
  font-size:14px;color:var(--grey);padding:0;margin:0 0 36px;font-weight:500;
}

.adr-dataviz .adr-byline strong{color:var(--navy);}


/* == HEADINGS ================================================================== */

.adr-dataviz h2{
  font-size:clamp(26px,4vw,32px);line-height:1.25;font-weight:700;color:var(--navy);

  letter-spacing:-.01em;margin:56px 0 10px;display:block;
}

.adr-dataviz h2 + p{margin-top:14px;}

.adr-dataviz h3{
  font-size:20px;font-weight:700;color:var(--navy);margin:30px 0 10px;
}


/* == KEY STATISTICS BOX ======================================================== */

.adr-dataviz .adr-keybox{
  background:var(--navy);color:var(--white);border-radius:4px;

  padding:30px;margin:8px 0 44px;
}

.adr-dataviz .adr-keybox h2{
  color:var(--white);margin:0 0 4px;font-size:22px;
}

.adr-dataviz .adr-keybox .adr-kb-sub{
  color:var(--blue-300);font-size:14px;font-weight:500;margin:0 0 20px;letter-spacing:.02em;
}

.adr-dataviz .adr-keylist{list-style:none;margin:0;padding:0;}

.adr-dataviz .adr-keylist li{
  padding:0 0 28px;
}

.adr-dataviz .adr-keylist li:last-child{padding-bottom:0;}

.adr-dataviz .adr-keyhead{display:flex;align-items:center;gap:16px;margin-bottom:9px;}

.adr-dataviz .adr-keylist .adr-kpct{flex:0 0 auto;width:62px;font-size:24px;font-weight:700;color:var(--gold);line-height:1.05;font-variant-numeric:tabular-nums;}

.adr-dataviz .adr-keylist .adr-ktext{color:#EAF3FC;font-size:15.5px;line-height:1.45;font-weight:500;}

@media (min-width:561px){
  .adr-dataviz .adr-keylist .adr-ktext{text-wrap:balance;}
}

.adr-dataviz .adr-kbar{flex:1 1 auto;height:10px;background:rgba(255,255,255,.16);border-radius:50px;overflow:hidden;}

.adr-dataviz .adr-kfill{display:block;height:100%;background:var(--gold);border-radius:50px;transition:width 1s cubic-bezier(.22,.61,.36,1);}


/* == STAT CARD GRID ============================================================ */

.adr-dataviz .adr-statgrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));

  gap:16px;margin:26px 0 30px;
}

.adr-dataviz .adr-stat{
  background:var(--white);border:2px solid var(--blue-300);border-top:4px solid var(--gold);

  border-radius:4px;padding:20px 18px;
}

.adr-dataviz .adr-stat .adr-ring{display:block;margin-bottom:14px;}

.adr-dataviz .adr-stat .adr-lbl{display:block;font-size:16px;color:var(--ink);line-height:1.5;font-weight:500;}


/* == PULL QUOTE ================================================================ */

.adr-dataviz .adr-pull{
  background:var(--cream);padding:26px 28px;margin:30px 0;

  border:2px solid var(--gold);border-radius:4px;
}

.adr-dataviz .adr-pull .adr-pnum{font-size:clamp(40px,7vw,58px);font-weight:700;color:var(--navy);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:0 0 8px;}

.adr-dataviz .adr-pull .adr-ptext{font-size:17px;color:var(--ink);font-weight:500;margin:0;}


/* == BULLET LIST =============================================================== */

.adr-dataviz ul.adr-bullets{margin:0 0 1.2em;padding:0;list-style:none;}

.adr-dataviz ul.adr-bullets li{
  position:relative;padding:6px 0 6px 26px;color:var(--ink);font-size:16px;line-height:1.55;
}

.adr-dataviz ul.adr-bullets li::before{
  content:"";position:absolute;left:4px;top:13px;width:9px;height:9px;border-radius:50%;

  background:var(--gold);
}

.adr-dataviz ul.adr-bullets li strong{color:var(--navy);}


/* == DATA TABLES =============================================================== */

.adr-dataviz .adr-tablewrap{margin:34px 0 16px;}

.adr-dataviz .adr-tablecap{font-size:22px;line-height:1.3;font-weight:700;color:var(--navy);margin:0 0 4px;}

.adr-dataviz .adr-tablesub{margin:0 0 16px;font-size:14px;font-weight:600;color:var(--grey);line-height:1.35;}

.adr-dataviz .adr-scroll{overflow-x:auto;overflow-y:hidden;touch-action:pan-x;border:1px solid var(--line);border-radius:4px;-webkit-overflow-scrolling:touch;}

.adr-dataviz table{border-collapse:collapse;width:100%;min-width:520px;font-size:14.5px;}

.adr-dataviz thead th{
  background:var(--navy);color:var(--white);font-weight:600;text-align:center;

  padding:12px 14px;font-size:13px;line-height:1.35;letter-spacing:.01em;
}

.adr-dataviz thead th:first-child{text-align:left;}

.adr-dataviz tbody th{
  text-align:left;font-weight:700;color:var(--ink);padding:11px 14px;background:var(--white);

  white-space:nowrap;
}

.adr-dataviz tbody td{
  text-align:center;padding:11px 14px;color:var(--ink);font-variant-numeric:tabular-nums;
}

.adr-dataviz tbody tr:nth-child(even) th,

.adr-dataviz tbody tr:nth-child(even) td{background:var(--blue-100);}

.adr-dataviz tbody tr.adr-total th,

.adr-dataviz tbody tr.adr-total td{
  background:var(--cream);font-weight:700;color:var(--navy);border-top:2px solid var(--gold);
}

.adr-dataviz .adr-note{font-size:13px;color:var(--grey);margin:8px 0 0;font-style:italic;}


/* == METHODOLOGY + CITATION ==================================================== */

.adr-dataviz .adr-method{
  background:var(--blue-100);border-radius:4px;padding:26px 28px;margin:44px 0 28px;
}

.adr-dataviz .adr-method h2{
  margin:0 0 12px;font-size:22px;display:block;
}

.adr-dataviz .adr-method p{font-size:15px;}

.adr-dataviz .adr-cite{
  border-left:4px solid var(--gold);background:var(--cream);padding:18px 22px;border-radius:0 4px 4px 0;

  margin:24px 0;
}

.adr-dataviz .adr-cite p{margin:0;font-size:15px;color:var(--ink);}


/* == CLOSING BAND: RELATED READING + FAQ ======================================= */

.adr-dataviz .adr-closing{background:var(--blue-100);width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-top:56px;padding:48px 24px 52px;}

.adr-dataviz .adr-closing-inner{max-width:820px;margin:0 auto;}

.adr-dataviz .adr-closing-inner > h2{margin-top:0;}

/* Related reading */

.adr-dataviz .adr-rr-intro{font-size:16px;color:var(--ink);margin:0 0 22px;}

.adr-dataviz .adr-rr-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:0;}

.adr-dataviz .adr-rr-card{display:block;text-decoration:none;color:inherit;font-weight:400;}

.adr-dataviz .adr-rr-card:hover{text-decoration:none;}

.adr-dataviz .adr-rr-thumb{display:block;width:100%;aspect-ratio:16 / 9;object-fit:cover;background:var(--blue-200);border:1px solid var(--blue-300);border-radius:4px;transition:border-color .2s ease;}

.adr-dataviz .adr-rr-card-title{margin:14px 0 0;font-size:17px;font-weight:700;line-height:1.5;color:var(--navy);overflow:visible;}

.adr-dataviz .adr-rr-card:hover .adr-rr-card-title{color:var(--blue);text-decoration:underline;}

.adr-dataviz .adr-rr-card:hover .adr-rr-thumb{border-color:var(--blue);}

.adr-dataviz .adr-rr-card:focus-visible .adr-rr-thumb{border-color:var(--blue);}

/* FAQ card */


/* == FAQ ACCORDION ============================================================= */

.adr-dataviz .adr-faq-card{background:var(--white);border:1px solid var(--blue-bright);border-radius:4px;padding:40px;margin:48px 0 0;}

.adr-dataviz .adr-faq-card > h2{margin:0 0 20px;text-align:center;}


/* == CLOSING BAND — MOBILE ===================================================== */

@media (max-width:560px){
  .adr-dataviz .adr-closing{margin-top:40px;padding:32px 16px 36px;}

  .adr-dataviz .adr-rr-grid{grid-template-columns:1fr;gap:24px;}

  .adr-dataviz .adr-faq-card{padding:24px 18px;margin-top:32px;}
}


/* == INLINE FIGURES ============================================================ */

.adr-dataviz .adr-figure{margin:26px 0 32px;}

.adr-dataviz .adr-figure img{display:block;width:100%;height:auto;border-radius:4px;}


/* == CONTENTS RAIL (unscoped, position:fixed) ================================== */

.adr-toc-rail{--adr-toc-top:120px;position:fixed;top:var(--adr-toc-top);left:24px;z-index:40;font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;}

.adr-toc-rail *{box-sizing:border-box;}

/* Collapsed tab */

.adr-toc-tab{display:inline-flex;align-items:center;gap:10px;background:#FFFFFF;border:1px solid #E8E8E9;border-radius:50px;box-shadow:0 3px 14px rgba(0,59,113,.13);padding:14px 18px;font-family:inherit;font-size:16px;font-weight:600;color:#003B71;cursor:pointer;transition:background .18s ease,box-shadow .18s ease;}

.adr-toc-tab:hover{background:#E5F4FF;box-shadow:0 3px 14px rgba(0,59,113,.18);}

.adr-toc-tab:focus-visible{outline:2px solid #006ACB;outline-offset:2px;}

.adr-toc-tab svg{flex:0 0 auto;transition:transform .2s ease;}

.adr-toc-tab path{stroke:#006ACB;}

/* Panel */

.adr-toc-panel{position:absolute;top:0;left:0;width:296px;max-height:calc(100vh - var(--adr-toc-cur, var(--adr-toc-top)) - 32px);overflow-y:auto;background:#FFFFFF;border:1px solid #E8E8E9;border-radius:8px;box-shadow:0 6px 24px rgba(0,59,113,.16);padding:18px 20px 16px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease,visibility .2s;}

.adr-toc-rail.is-open .adr-toc-panel{opacity:1;visibility:visible;transform:translateY(0);}

.adr-toc-rail.is-open .adr-toc-tab{opacity:0;pointer-events:none;}

.adr-toc-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;}

.adr-toc-panel-title{font-size:16px;font-weight:700;color:#003B71;margin:0;}

.adr-toc-close{background:none;border:none;padding:4px;line-height:0;cursor:pointer;border-radius:4px;
display:inline-flex;align-items:center;justify-content:center;color:#616167;}
/* Both icons below drawn via CSS mask rather than inline SVG in the page --
   same reasoning as the carousel chevrons: defined once, shared by every
   page that uses the TOC rail, instead of hand-typed path data duplicated
   per page. */
.adr-toc-tab::after{content:'';display:block;width:8px;height:13px;background-color:currentColor;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
-webkit-mask-size:contain;mask-size:contain;
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13' fill='none'%3E%3Cpath d='M1.5 1.5L6.5 6.5L1.5 11.5' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13' fill='none'%3E%3Cpath d='M1.5 1.5L6.5 6.5L1.5 11.5' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.adr-toc-close::before{content:'';display:block;width:14px;height:14px;background-color:currentColor;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
-webkit-mask-size:contain;mask-size:contain;
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M1.5 1.5l11 11M12.5 1.5l-11 11' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M1.5 1.5l11 11M12.5 1.5l-11 11' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");}

.adr-toc-close:hover{background:#E5F4FF;}

.adr-toc-close:focus-visible{outline:2px solid #006ACB;outline-offset:1px;}

.adr-toc-close path{stroke:#006ACB;}

.adr-toc-list{list-style:none;margin:0;padding:0;counter-reset:adrtoc;}

.adr-toc-list li{counter-increment:adrtoc;margin:0;}

.adr-toc-list a{display:flex;gap:8px;padding:7px 10px 7px 8px;border-left:3px solid transparent;color:#006ACB;font-size:14.5px;font-weight:600;line-height:1.4;text-decoration:none;border-radius:0 4px 4px 0;transition:background .15s ease,color .15s ease;}

.adr-toc-list a::before{content:counter(adrtoc) ".";flex:0 0 auto;color:#616167;font-weight:600;}

.adr-toc-list a:hover{background:#E5F4FF;color:#003B71;text-decoration:none;}

.adr-toc-list a.is-current{background:#E5F4FF;border-left-color:#FBB51D;color:#003B71;}

.adr-toc-list a.is-current::before{color:#003B71;}

/* Rail — mobile drawer */

.adr-toc-scrim{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,59,113,.42);opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s;z-index:39;}

@media (max-width:1459px){
  .adr-toc-rail{top:auto;bottom:20px;left:16px;}

  .adr-toc-tab{padding:12px 16px;font-size:15px;}

  .adr-toc-panel{position:fixed;top:0;bottom:0;left:0;width:min(88vw,320px);max-height:none;border-radius:0;border:none;border-right:1px solid #E8E8E9;padding:24px 20px;transform:translateX(-100%);transition:transform .24s ease,visibility .24s;opacity:1;visibility:hidden;}

  .adr-toc-rail.is-open .adr-toc-panel{transform:translateX(0);visibility:visible;}

  .adr-toc-rail.is-open .adr-toc-tab{opacity:0;}

  .adr-toc-rail.is-open ~ .adr-toc-scrim,.adr-toc-scrim.is-open{opacity:1;visibility:visible;}

  .adr-toc-list a{padding:10px 10px 10px 8px;font-size:15px;}
}

@media (prefers-reduced-motion:reduce){
  .adr-toc-tab,.adr-toc-panel,.adr-toc-scrim,.adr-toc-list a{transition:none;}
}

/* Anchor offset */

.adr-dataviz h2[id],.adr-dataviz h3[id]{scroll-margin-top:120px;}

.adr-dataviz #dis_faq_accordion{margin:8px 0 0;}

.adr-dataviz #dis_faq_accordion .collapse{overflow:hidden;transition:max-height 0.3s ease;max-height:0;}

.adr-dataviz #dis_faq_accordion .accordion-link{cursor:pointer;}

.adr-dataviz #dis_faq_accordion .accordion-link:hover .h5{color:var(--adr-color-primary-500,#006ACB);}

.adr-dataviz .adr-cite-string{display:block;margin:12px 0 0;padding:12px 14px;background:var(--white);border:1px solid var(--line);border-radius:4px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.5;color:var(--ink);word-break:break-word;}


/* == CHART CAROUSEL ============================================================ */

.adr-dataviz .adr-carousel{margin:6px 0 16px;}

.adr-dataviz .adr-carousel-hint{font-size:13px;color:var(--grey);font-style:italic;margin:0 0 10px;}

.adr-dataviz .adr-carousel-track{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:4px 2px 4px;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;touch-action:pan-x;}

.adr-dataviz .adr-carousel-slide{flex:0 0 90%;max-width:600px;scroll-snap-align:start;background:var(--white);border:1px solid var(--blue-300);border-radius:4px;padding:26px 28px;position:relative;}

.adr-dataviz .adr-carousel-slide svg{width:100%;height:auto;display:block;overflow:visible;}

.adr-dataviz .adr-carousel-track::-webkit-scrollbar{display:none;}

.adr-dataviz .adr-chart-dls{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:16px;}

.adr-dataviz .adr-dl-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);}

.adr-dataviz .adr-chart-dl,.adr-dataviz .adr-chart-csv{font-size:13px;font-weight:600;}

.adr-dataviz .adr-dl-sep{color:#cfd0d3;}

.adr-dataviz .adr-data-cta{margin:24px 0 4px;}

.adr-dataviz .adr-data-btn{display:inline-block;border:1px solid var(--blue);color:var(--blue);padding:10px 18px;border-radius:4px;font-weight:600;font-size:14px;text-decoration:none;}

.adr-dataviz .adr-data-btn:hover{background:var(--blue);color:#fff;text-decoration:none;}

.adr-dataviz .adr-carousel-dots{display:flex;justify-content:center;gap:9px;margin:0;flex-wrap:wrap;}.adr-carousel-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin:16px 0 0;}.adr-carousel-arrow{width:38px;height:38px;flex:0 0 auto;border-radius:50%;border:1px solid var(--blue-300);background:var(--white);color:var(--navy);font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .2s,border-color .2s,opacity .2s;}.adr-carousel-arrow:hover{background:var(--blue-100);border-color:var(--blue);}.adr-carousel-arrow:disabled{opacity:.35;cursor:default;}
/* Chevron icon drawn via CSS mask, not a glyph or inline SVG in the page --
   the "‹"/"›" text characters render with their visible ink off-center in
   their own glyph box in most fonts (confirmed by direct measurement), and
   this way the icon is defined once and shared by every carousel instance
   instead of duplicated per page. Buttons should have no inner content. */
.adr-dataviz .adr-carousel-arrow::before{content:'';display:block;width:16px;height:16px;background-color:currentColor;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
-webkit-mask-size:contain;mask-size:contain;}
.adr-dataviz .adr-carousel-prev::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");}
.adr-dataviz .adr-carousel-next::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");}

.adr-dataviz .adr-carousel-dot{width:9px;height:9px;border-radius:50%;background:#cfd0d3;display:block;text-decoration:none;transition:background .2s,transform .2s;}

.adr-dataviz .adr-carousel-dot:hover{background:#9a9ba1;}

.adr-dataviz .adr-carousel-dot[aria-current="true"]{background:#616167;transform:scale(1.25);}

/* Chart bars — navy fill rects only, animated by data-visualization.js */

.adr-dataviz .adr-carousel-slide svg rect[fill="#003B71"]{transform-origin:0 0;transition:transform .85s cubic-bezier(.22,.61,.36,1);}

@media (prefers-reduced-motion:reduce){
  .adr-dataviz .adr-carousel-slide svg rect[fill="#003B71"]{transition:none;}
}


/* == CHART BLOCK =============================================================== */

.adr-dataviz .adr-chart{margin:34px 0 18px;}

.adr-dataviz .adr-chart-title{font-size:18px;line-height:1.3;font-weight:700;color:var(--navy);margin:0 0 14px;}

.adr-dataviz .adr-chart svg{width:100%;height:auto;display:block;overflow:visible;}

.adr-dataviz .adr-chart-src{font-size:13px;color:var(--grey);margin:10px 0 0;font-style:italic;}

/* == MOBILE OVERRIDES ========================================================== */

@media (max-width:560px){
  .adr-dataviz{font-size:16px;padding:0 16px;}

  .adr-dataviz .adr-hero{margin-bottom:26px;padding:32px 18px 28px;}

  .adr-dataviz .adr-hero-inner{flex-direction:column;align-items:flex-start;gap:22px;}

  .adr-dataviz .adr-hero-stat{flex:1 1 auto;width:100%;}

  .adr-dataviz .adr-scroll{
    margin-right:calc(50% - 50vw);

    border-right:0;border-radius:4px 0 0 4px;
  }

  .adr-dataviz .adr-keybox{padding:24px 20px;}

  .adr-dataviz .adr-keyhead{gap:12px;}

  .adr-dataviz .adr-keylist .adr-kpct{width:52px;font-size:21px;}

  .adr-dataviz .adr-ring--stat{width:100px;height:100px;}

  .adr-dataviz .adr-ring--stat .adr-ring-val{font-size:27px;}
}


/* == DONUT (inline, animated) ============================================ */

.adr-dataviz .pie-wrap{display:flex;align-items:center;gap:28px;flex-wrap:wrap;}
.adr-dataviz .pie-outer{position:relative;flex:0 0 auto;}
.adr-dataviz .pie{border-radius:50%;position:absolute;left:28px;top:28px;}
.adr-dataviz .pie-fill{transition:none;}
.adr-dataviz .pie-hole{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border-radius:50%;z-index:2;}

/* Percentage labels are siblings of .pie (inside .pie-outer), not nested
   inside .pie itself -- they share .pie's own coordinate space this way.
   Nesting them one level out shifts every label by .pie's own inset. */
.adr-dataviz .pie-label{position:absolute;transform:translate(-50%,-50%);font-size:12px;font-weight:700;
white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s ease;z-index:3;}
.adr-dataviz .pie-label.show{opacity:1;}
.adr-dataviz .pie-label.on-white{color:#fff;}
.adr-dataviz .pie-label.on-ink{color:var(--ink);}
.adr-dataviz .pie-label.outside{background:#fff;padding:1px 4px;border-radius:3px;}

.adr-dataviz .legend{display:flex;flex-direction:column;gap:10px;flex:1 1 180px;min-width:180px;}
.adr-dataviz .lg-item{display:flex;align-items:center;gap:9px;font-size:13.5px;}
.adr-dataviz .lg-swatch{width:13px;height:13px;border-radius:3px;flex:0 0 auto;border:1px solid rgba(0,0,0,.18);}
.adr-dataviz .lg-name{color:var(--ink);}

@media (max-width:560px){
  .adr-dataviz .pie-wrap{flex-direction:column;align-items:center;gap:18px;}
  .adr-dataviz .legend{flex:0 0 auto;min-width:0;}
}

/* == HORIZONTAL 100% STACKED BAR (inline, animated; short labels only) ==== */

.adr-dataviz .stk{position:relative;}
.adr-dataviz .stk-track{display:flex;height:36px;border-radius:6px;overflow:hidden;width:100%;position:relative;z-index:1;}
.adr-dataviz .stk-seg{position:relative;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;}
.adr-dataviz .stk-pct{opacity:0;transition:opacity .15s ease;}
.adr-dataviz .stk-pct.show{opacity:1;}
.adr-dataviz .stk-seg.on-white{color:#fff;}
.adr-dataviz .stk-seg.on-ink{color:var(--ink);}
.adr-dataviz .stk-callout{position:absolute;z-index:3;display:flex;flex-direction:column;align-items:center;
text-align:center;background:#fff;border-radius:4px;padding:3px 4px;opacity:0;transition:opacity .15s ease;}
.adr-dataviz .stk-callout.show{opacity:1;}
.adr-dataviz .stk-callout .name{font-size:11px;font-weight:700;color:var(--ink);line-height:1.3;text-wrap:balance;}
.adr-dataviz .stk-tick{position:absolute;z-index:2;width:1px;background:#BBBBBE;opacity:0;transition:opacity .15s ease;}
.adr-dataviz .stk-tick.show{opacity:1;}

/* == HIGHLIGHTED STAT (single number, no ring; the standout among a group
   of progress rings) ====================================================== */

.adr-dataviz .hl-stat{background:var(--cream);border:2px solid var(--gold);border-radius:4px;padding:26px 28px;}
.adr-dataviz .hl-num{font-size:48px;font-weight:700;color:var(--navy);line-height:1;letter-spacing:-.02em;
font-variant-numeric:tabular-nums;margin:0 0 8px;}
.adr-dataviz .hl-text{font-size:16px;color:var(--ink);margin:0;font-weight:500;}

/* == GROUPED BAR CHART (inline; multi-select questions, doesn't sum to 100%) */

.adr-dataviz .gb-row{margin-bottom:14px;}
.adr-dataviz .gb-name{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:6px;}
.adr-dataviz .gb-track{background:var(--blue-100);border-radius:3px;height:20px;overflow:hidden;}
/* fill has no padding of its own -- padding never shrinks below its own
   value even at width:0%, which left a permanent navy sliver before the
   grow-in animation started. the inset lives on .gb-pct's margin instead. */
.adr-dataviz .gb-fill{background:var(--navy);height:100%;border-radius:3px;display:flex;align-items:center;
justify-content:flex-end;}
.adr-dataviz .gb-pct{color:#fff;font-size:13px;font-weight:700;margin-right:8px;white-space:nowrap;}

/* == SHARED: downloadable-chart reveal (donut + stacked bar SVG exports) == */

.adr-dataviz .dl-fade{opacity:0;transition:opacity .2s ease;}
.adr-dataviz .dl-fade.show{opacity:1;}


/* == MOTION PREFERENCES ======================================================== */

@media (prefers-reduced-motion:no-preference){
  .adr-dataviz a,.adr-dataviz .adr-stat{transition:color .15s ease,box-shadow .2s ease,transform .2s ease;}

  .adr-dataviz .adr-stat:hover{box-shadow:0 10px 26px -18px rgba(16,42,76,.5);transform:translateY(-2px);}
}


/* == SCREEN-READER HELPERS ===================================================== */

.adr-dataviz .adr-sr-only{position:absolute;top:0;left:0;width:1px;height:1px;min-width:0;max-width:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0;}