/* ============================================================
   Grapher frontend skin — responsive, theme-hardened
   ============================================================ */

/* ---- Base ------------------------------------------------- */
/* Container query anchor on the OUTER wrapper — keeps .bt-grapher free of
   containment so Chart.js ResizeObserver can correctly measure the canvas. */
.grapher-component{
  margin:20px 0 !important;
  box-sizing:border-box !important;
  container-type:inline-size;
  container-name:btgrapher;
  /* Hard-reset figure defaults that post-page themes commonly apply */
  display:block !important;
  padding:0 !important;
  float:none !important;
  max-width:none !important;
  width:100% !important;
}
/* Ensure inner wrappers don't get theme table/float sizing */
.grapher-component .CaptionedChart,
.grapher-component .CaptionedChartAndSidePanel{
  display:block !important;
  width:100% !important;
  float:none !important;
}
.bt-grapher{
  font-family:Lato,"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  box-shadow:0 4px 24px rgba(0,0,0,.07);
  overflow:visible;
  box-sizing:border-box;
}

/* ---- Header text ------------------------------------------ */
.bt-owid-headtext{
  padding:0;
}
.bt-owid-title{
  margin:0 !important;
  padding:0 !important;
}
.bt-owid-subtitle{
  margin:4px 0 0 !important;
  padding:0 !important;
}

/* ---- Controls row (tabs + right buttons) ------------------ */
.controlsRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:nowrap;          /* single row by default — wrap triggered by container query */
  padding:0;
  box-sizing:border-box;
}

/* ---- Tab group -------------------------------------------- */
.bt-owid-tabs{
  flex:1 1 auto;
  min-width:0;
  overflow:visible;
  display:flex;
  align-items:center;
}

/* Tab icon — always visible */
.bt-grapher .Tabs__Tab .bt-tab-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-shrink:0 !important;
  width:14px !important;
  height:14px !important;
}
.bt-grapher .Tabs__Tab .bt-tab-icon svg{
  width:14px !important;
  height:14px !important;
  fill:currentColor !important;
  display:block !important;
}
/* Tab label text — hidden on narrow containers */
.bt-grapher .Tabs__Tab .label{
  transition:none !important;
}
/* Force no-wrap + horizontal scroll regardless of theme overrides.
   Using .bt-grapher prefix + !important defeats any theme flex rules. */
.bt-grapher .Tabs.ContentSwitchers{
  display:flex !important;
  align-items:center !important;
  gap:4px !important;
  flex-wrap:nowrap !important;   /* NEVER wrap — scroll instead */
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-width:none !important;
  padding-bottom:2px !important;
}
.bt-grapher .Tabs.ContentSwitchers::-webkit-scrollbar{
  display:none;
}

/* Individual tab button — forcefully override ANY theme */
.bt-grapher .Tabs__Tab,
.bt-grapher .Tabs__Tab:link,
.bt-grapher .Tabs__Tab:visited{
  all:unset;                 /* nuclear reset */
  display:inline-flex !important;
  align-items:center !important;
  gap:5px !important;
  border:1px solid rgba(0,0,0,.14) !important;
  background:#f8fafc !important;
  border-radius:7px !important;
  padding:7px 13px !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1.2 !important;
  color:#475569 !important;
  cursor:pointer !important;
  white-space:nowrap !important;
  transition:background .13s ease, color .13s ease, border-color .13s ease !important;
  box-shadow:none !important;
  text-decoration:none !important;
  box-sizing:border-box !important;
  flex-shrink:0 !important;
}
.bt-grapher .Tabs__Tab .label{
  color:inherit !important;
  font-weight:inherit !important;
}

/* Hover — forced with high specificity */
.bt-grapher .Tabs__Tab:hover{
  background:#e2e8f0 !important;
  border-color:rgba(0,0,0,.22) !important;
  color:#0f172a !important;
}

/* Active/selected tab */
.bt-grapher .Tabs__Tab.active,
.bt-grapher .Tabs__Tab[aria-pressed="true"]{
  background:#1e293b !important;
  border-color:#1e293b !important;
  color:#fff !important;
  box-shadow:0 2px 8px rgba(15,23,42,.18) !important;
}
.bt-grapher .Tabs__Tab.active .label,
.bt-grapher .Tabs__Tab[aria-pressed="true"] .label{
  color:#fff !important;
}
.bt-grapher .Tabs__Tab.active:hover,
.bt-grapher .Tabs__Tab[aria-pressed="true"]:hover{
  background:#334155 !important;
  border-color:#334155 !important;
}

/* Overflow "+N" button */
.bt-grapher .ContentSwitchers__OverflowMenuButton{
  min-width:38px !important;
  padding:7px 10px !important;
}

/* Overflow dropdown */
.bt-owid-overflow{
  position:absolute;
  margin-top:6px;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.14);
  padding:4px;
  z-index:200;
  min-width:140px;
}
.bt-owid-overflow-item{
  display:block !important;
  width:100% !important;
  text-align:left !important;
  border:0 !important;
  background:transparent !important;
  padding:9px 12px !important;
  border-radius:7px !important;
  cursor:pointer !important;
  font-size:13px !important;
  font-weight:500 !important;
  color:#334155 !important;
  white-space:nowrap !important;
  transition:background .1s ease !important;
}
.bt-owid-overflow-item:hover{
  background:#f1f5f9 !important;
  color:#0f172a !important;
}

/* ---- Right control buttons (Settings, Expand) */
.bt-grapher .controls.chart-controls{
  display:flex;
  gap:6px;
  align-items:center;
  flex-shrink:0;
  flex-wrap:nowrap;
  white-space:nowrap;
}

.bt-grapher .menu-toggle,
.bt-grapher .menu-toggle:link,
.bt-grapher .menu-toggle:visited{
  all:unset;
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  border:1px solid rgba(0,0,0,.14) !important;
  background:#f8fafc !important;
  border-radius:7px !important;
  padding:7px 12px !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1.2 !important;
  color:#475569 !important;
  cursor:pointer !important;
  white-space:nowrap !important;
  transition:background .13s ease, color .13s ease, border-color .13s ease !important;
  box-sizing:border-box !important;
  flex-shrink:0 !important;
}
.bt-grapher .menu-toggle .label{
  color:inherit !important;
  font-weight:inherit !important;
}
.bt-menu-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-shrink:0 !important;
  width:14px !important;
  height:14px !important;
}
.bt-menu-icon svg{
  width:14px !important;
  height:14px !important;
  fill:currentColor !important;
  display:block !important;
}
.bt-grapher .menu-toggle:hover{
  background:#e2e8f0 !important;
  border-color:rgba(0,0,0,.22) !important;
  color:#0f172a !important;
}
.bt-grapher .menu-toggle.active{
  background:#1e293b !important;
  border-color:#1e293b !important;
  color:#fff !important;
}
.bt-grapher .menu-toggle.active .label{
  color:#fff !important;
}
.bt-grapher .menu-toggle.active:hover{
  background:#334155 !important;
  border-color:#334155 !important;
}

/* ---- Stage (canvas + map area) ---------------------------- */
.bt-owid-stage{
  padding:0 16px;
  box-sizing:border-box;
  position:relative;
  display:block !important;
  float:none !important;
  overflow:hidden;
  height: unset !important;
}
/* 3-class specificity (0,3,0) beats any theme `canvas { height:auto !important }` (0,0,1) */
.bt-grapher .bt-owid-stage .bt-owid-canvas{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
}

/* ---- Slide-in panels ------------------------------------- */
.bt-owid-panels{
  position:absolute;
  left:16px;
  top:8px;
  z-index:150;
  display:flex;
  gap:8px;
  max-width:calc(100% - 32px);
}
.bt-owid-panel{
  width:300px;
  max-width:min(300px, calc(100vw - 32px));
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.16);
  overflow:hidden;
}
.bt-panel-inner{
  padding:12px;
}
.bt-panel-title{
  font-weight:800;
  font-size:13px;
  color:#0f172a;
  margin-bottom:8px;
  line-height:1.3;
}
.bt-panel-nav{
  all:unset;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  box-sizing:border-box !important;
  border:1px solid rgba(0,0,0,.14) !important;
  background:#f8fafc !important;
  border-radius:8px !important;
  padding:8px 12px !important;
  margin-bottom:10px !important;
  font-size:12px !important;
  font-weight:700 !important;
  color:#334155 !important;
  cursor:pointer !important;
  transition:background .12s, color .12s !important;
}
.bt-panel-nav:hover{
  background:#e2e8f0 !important;
  color:#0f172a !important;
}
.bt-panel-note{
  font-size:12px;
  color:#64748b;
  line-height:1.4;
}
.bt-panel-search{
  display:block !important;
  width:100% !important;
  border:1px solid rgba(0,0,0,.14) !important;
  border-radius:8px !important;
  padding:8px 10px !important;
  font-size:13px !important;
  box-sizing:border-box !important;
  background:#f8fafc !important;
  color:#0f172a !important;
  outline:none !important;
  transition:border-color .13s !important;
}
.bt-panel-search:focus{
  border-color:rgba(30,41,59,.4) !important;
  background:#fff !important;
}
.bt-panel-list{
  max-height:220px;
  overflow-y:auto;
  margin-top:8px;
  padding-right:2px;
}
.bt-panel-item{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:5px 4px !important;
  font-size:13px !important;
  color:#0f172a !important;
  cursor:pointer !important;
  border-radius:6px !important;
  transition:background .1s !important;
}
.bt-panel-item:hover{
  background:#f1f5f9 !important;
}
.bt-panel-item input[type=checkbox]{
  width:15px !important;
  height:15px !important;
  flex-shrink:0 !important;
  cursor:pointer !important;
  margin:0 !important;
  accent-color:#1e293b !important;
}
.bt-panel-actions{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:10px;
}
.bt-panel-apply,
.bt-panel-reset{
  all:unset;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(0,0,0,.14) !important;
  background:#f1f5f9 !important;
  border-radius:8px !important;
  padding:8px 12px !important;
  font-weight:700 !important;
  font-size:12px !important;
  cursor:pointer !important;
  color:#334155 !important;
  transition:background .12s, color .12s !important;
  box-sizing:border-box !important;
}
.bt-panel-reset:hover{
  background:#e2e8f0 !important;
  color:#0f172a !important;
}
.bt-panel-apply{
  background:#1e293b !important;
  color:#fff !important;
  border-color:#1e293b !important;
  flex:1 !important;
}
.bt-panel-apply:hover{
  background:#334155 !important;
  border-color:#334155 !important;
}

.bt-panel-toggle{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:6px 2px !important;
  font-size:13px !important;
  color:#0f172a !important;
  cursor:pointer !important;
}
.bt-panel-select{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:4px 2px;
  font-size:13px;
  color:#0f172a;
}
.bt-panel-select select,
.bt-panel-select input{
  border:1px solid rgba(0,0,0,.14) !important;
  border-radius:8px !important;
  padding:7px 10px !important;
  font-size:13px !important;
  background:#f8fafc !important;
  color:#0f172a !important;
  outline:none !important;
}

/* ---- Timeline --------------------------------------------- */
.GrapherTimeline{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 16px;
  box-sizing:border-box;
}
.GrapherTimeline[hidden]{ display:none !important; }
.GrapherTimeline__TimelineEdgeButton{
  border:0 !important;
  background:transparent !important;
  font-size:12px !important;
  color:#64748b !important;
  cursor:pointer !important;
  padding:0 4px !important;
  flex-shrink:0 !important;
  font-weight:600 !important;
  transition:color .12s !important;
}
.GrapherTimeline__TimelineEdgeButton:hover{
  color:#0f172a !important;
}
.GrapherTimeline__Slider{
  position:relative !important;
  flex:1 !important;
  height:26px !important;
  cursor:pointer;
  user-select:none;
}
.bt-owid-range{
  position:absolute;
  left:0;top:0;
  width:100%;height:26px;
  opacity:0;
  cursor:pointer !important;
  pointer-events:none !important;
}
.GrapherTimeline__Slider.clickable{ cursor:pointer; }

/* Timeline track line */
figure.chart.grapher-component .GrapherTimeline__Slider::before,
.grapher-component .GrapherTimeline__Slider::before{
  content:"";
  position:absolute;
  left:0;right:0;top:50%;
  height:1px;
  background:rgba(148,163,184,.8);
  transform:translateY(-50%);
  z-index:0;
  pointer-events:none;
}

/* Interval highlight bar */
.grapher-component .GrapherTimeline__Interval{
  position:absolute !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  height:4px !important;
  border-radius:999px !important;
  background:#64748b !important;
  pointer-events:none !important;
  z-index:1 !important;
}

/* Handle wrapper */
.grapher-component .GrapherTimeline__Handle{
  position:absolute !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:34px !important;
  height:34px !important;
  z-index:2 !important;
  pointer-events:auto !important;
  cursor:grab !important;
  touch-action:none !important;
  background:transparent !important;
  display:block !important;
  margin:0 !important;
  line-height:0 !important;
}
.grapher-component .GrapherTimeline__Handle.startMarker{ z-index:92 !important; }
.grapher-component .GrapherTimeline__Handle.endMarker{ z-index:91 !important; }
.grapher-component .GrapherTimeline__Handle:hover,
.grapher-component .GrapherTimeline__Handle:hover .GrapherTimeline__HandleKnob{
  cursor:grab !important;
}
.grapher-component .GrapherTimeline__Handle.is-dragging,
.grapher-component .GrapherTimeline__Handle.is-dragging .GrapherTimeline__HandleKnob{
  cursor:grabbing !important;
}

/* Knob circle */
.grapher-component .GrapherTimeline__HandleKnob{
  position:absolute !important;
  left:50% !important;top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:16px !important;height:16px !important;
  border-radius:999px !important;
  background:#475569 !important;
  border:2px solid #fff !important;
  box-shadow:0 1px 6px rgba(0,0,0,.2) !important;
  pointer-events:auto !important;
  cursor:grab !important;
  display:block !important;
  margin:0 !important;
  line-height:0 !important;
}
.GrapherTimeline.is-dragging .GrapherTimeline__HandleKnob{ cursor:grabbing !important; }

/* Year label bubble above handle */
.GrapherTimeline__HandleValue{
  position:absolute;
  left:50%;
  top:-26px;
  transform:translateX(-50%);
  font-size:11px;
  font-weight:700;
  line-height:1;
  padding:5px 8px;
  border:1px solid rgba(15,23,42,.15);
  border-radius:6px;
  background:#fff;
  color:#0f172a;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  white-space:nowrap;
  pointer-events:none;
}

/* ---- Action buttons (download / share / fullscreen) ------- */
.ActionButtons ul{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  gap:6px !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
}
.ActionButtons li{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}

.bt-grapher .ActionButton .icon-only{
  all:unset !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:34px !important;
  height:34px !important;
  border-radius:7px !important;
  background:#f1f5f9 !important;
  border:1px solid rgba(0,0,0,.1) !important;
  cursor:pointer !important;
  position:relative !important;
  transition:background .12s ease, border-color .12s ease !important;
  box-sizing:border-box !important;
  flex-shrink:0 !important;
}
.bt-grapher .ActionButton .icon-only:hover{
  background:#e2e8f0 !important;
  border-color:rgba(0,0,0,.18) !important;
}
.bt-grapher .ActionButton .icon-only:active{
  background:#cbd5e1 !important;
}

/* Icon pseudo-elements */
.bt-owid-play::before,
.bt-owid-download::before,
.bt-owid-share::before,
.bt-owid-fullscreen::before{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:15px;height:15px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:15px 15px;
  opacity:.75;
  transition:opacity .12s;
}
.bt-owid-play:hover::before,
.bt-owid-download:hover::before,
.bt-owid-share:hover::before,
.bt-owid-fullscreen:hover::before{
  opacity:1;
}
.bt-owid-play::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 384 512%27%3E%3Cpath fill=%27%230f172a%27 d=%27M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z%27/%3E%3C/svg%3E");}
.bt-owid-play.is-playing::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 384 512%27%3E%3Cpath fill=%27%230f172a%27 d=%27M48 64C21.5 64 0 85.5 0 112V400c0 26.5 21.5 48 48 48H96c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H48zm208 0c-26.5 0-48 21.5-48 48V400c0 26.5 21.5 48 48 48h48c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48h-48z%27/%3E%3C/svg%3E");}
.bt-owid-download::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 512 512%27%3E%3Cpath fill=%27%230f172a%27 d=%27M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32v242.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32z%27/%3E%3C/svg%3E");}
.bt-owid-share::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 448 512%27%3E%3Cpath fill=%27%230f172a%27 d=%27M352 224c53 0 96-43 96-96S405 32 352 32s-96 43-96 96c0 4 .2 8 .7 11.9l-94.1 47C145.4 170.2 121.9 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.9 0 49.4-10.2 66.6-26.9l94.1 47c-.5 3.9-.7 7.8-.7 11.9c0 53 43 96 96 96s96-43 96-96-43-96-96-96c-25.9 0-49.4 10.2-66.6 26.9l-94.1-47c.5-3.9 .7-7.8 .7-11.9s-.2-8-.7-11.9l94.1-47C302.6 213.8 326.1 224 352 224z%27/%3E%3C/svg%3E");}
.bt-owid-fullscreen::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 448 512%27%3E%3Cpath fill=%27%230f172a%27 d=%27M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32S145.7 32 128 32H32zm32 320c0-17.7-14.3-32-32-32S0 334.3 0 352v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64v-64zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32h-96zm128 320c0-17.7-14.3-32-32-32s-32 14.3-32 32v64h-64c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32v-96z%27/%3E%3C/svg%3E");}

/* ---- Footer (Data source + action buttons) ---------------- */
.SourcesFooterHTML{
  padding:12px 16px 16px !important;    /* extra top gap = "move data source down" */
  border-top:1px solid rgba(0,0,0,.06);
  margin-top:4px;
}
.SourcesFooterHTMLBottom{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
}
.SourcesFooterHTMLBottom > div:first-child{
  flex:1 1 auto;
  min-width:0;
}
.SourcesFooterHTMLBottom .sources,
.SourcesFooterHTMLBottom .license{
  margin:0 !important;
  padding:0 !important;
  color:#64748b !important;
  font-size:12px !important;
  line-height:1.5 !important;
}
.SourcesFooterHTMLBottom .sources{
  margin-bottom:4px !important;
}
.SourcesFooterHTMLBottom a{
  color:#3b82f6 !important;
  text-decoration:underline !important;
  text-underline-offset:2px;
}
.SourcesFooterHTMLBottom a:hover{
  text-decoration:underline !important;
}

.ActionButtons{
  margin-left:auto;
  width:auto !important;
  height:auto !important;
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  flex-shrink:0;
}
.ActionButtons ul{
  justify-content:flex-end !important;
}

/* ---- Map -------------------------------------------------- */
.bt-mapbox{
  position:relative;
  width:100%;
  min-height:280px;
  height:400px;
  margin-bottom:8px;
  box-sizing:border-box;
}
.bt-mapbox svg{
  width:100%;
  height:100%;
  display:block;
}

/* Map view: auto-height stage (class applied to .bt-grapher by JS) */
.bt-grapher.is-map-view .bt-owid-stage{
  height:auto !important;
}
.bt-grapher.is-map-view .bt-mapbox{
  height:360px;
  max-height:55vh;
  overflow:hidden;
}
.bt-grapher.is-map-view .bt-mapbox svg{ height:100% !important; }
.bt-grapher.is-map-view .GrapherTimeline{ margin-top:12px; }

/* Map tooltip */
.bt-map-tooltip{
  position:absolute;
  z-index:50;
  pointer-events:none;
  display:none;
  background:rgba(17,24,39,.92);
  color:#fff;
  padding:7px 10px;
  border-radius:10px;
  font-size:12px;
  line-height:1.4;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  transform:translate(12px,12px);
  max-width:240px;
}

/* Map legend */
.bt-map-legend{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-top:10px;
  flex-wrap:wrap;
  font-family:inherit;
  padding:0 4px;
}
.bt-map-legend-nodata{ display:flex; align-items:center; gap:6px; }
.bt-map-legend-scale{ flex:1; min-width:180px; }
.bt-map-legend-bar{ display:flex; align-items:stretch; height:10px; border-radius:6px; overflow:hidden; }
.bt-map-legend-swatch{ flex:1; display:block; }
.bt-map-legend-swatch--nodata{
  width:16px; height:10px; border-radius:3px;
  border:1px solid rgba(0,0,0,.22);
  background:repeating-linear-gradient(45deg,#e5e7eb 0,#e5e7eb 4px,#fff 4px,#fff 8px);
}
.bt-map-legend-ticks{ position:relative; height:18px; margin-top:4px; }
.bt-map-legend-tick{ position:absolute; top:0; transform:translateX(-50%); text-align:center; white-space:nowrap; }
.bt-map-legend-tickline{ display:block; width:1px; height:5px; background:rgba(0,0,0,.4); margin:0 auto 2px; }
.bt-map-legend-ticklabel{ display:block; font-size:11px; line-height:1; color:rgba(60,60,60,.85); }
.bt-map-legend-label{ font-size:11px; line-height:1; color:rgba(60,60,60,.85); }

/* ---- Chart.js tooltip card -------------------------------- */
figure.chart.grapher-component{ position:relative; }
.bt-chart-tooltip{
  position:absolute;
  z-index:999;
  pointer-events:none;
  background:#fff;
  border:1px solid rgba(15,23,42,.1);
  border-radius:8px;
  box-shadow:0 8px 28px rgba(0,0,0,.13);
  padding:10px 14px;
  min-width:160px;
  max-width:280px;
  max-height:300px;
  overflow:auto;
  color:#0f172a;
  font-size:13px;
  line-height:1.3;
}
.bt-chart-tooltip .bt-ct-year{ font-weight:700; font-size:14px; margin-bottom:3px; }
.bt-chart-tooltip .bt-ct-metric{ font-size:11px; opacity:.7; margin-bottom:8px; }
.bt-chart-tooltip .bt-ct-row{ display:flex; align-items:center; gap:8px; }
.bt-chart-tooltip .bt-ct-row + .bt-ct-row{ margin-top:5px; }
.bt-chart-tooltip .bt-ct-swatch{ width:10px; height:10px; border-radius:2px; display:inline-block; flex-shrink:0; }
.bt-chart-tooltip .bt-ct-label{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bt-chart-tooltip .bt-ct-val{ font-weight:700; margin-left:6px; white-space:nowrap; }

/* ---- Table view ------------------------------------------- */
.bt-data-table{
  width:100%;
  /* Stage has height:unset so % doesn't work — cap with a fixed max-height */
  max-height:400px;
  overflow:auto;
  box-sizing:border-box;
  -webkit-overflow-scrolling:touch;
}
.bt-data-table .bt-data-note{
  position:sticky;
  top:0;
  z-index:5;
  background:#fff;
  padding:8px 0 6px;
  margin:0 0 4px;
  font-size:12px;
  color:#64748b;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.bt-data-table table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  min-width:320px;       /* prevents squashing on tiny screens */
}
.bt-data-table th,
.bt-data-table td{
  border-bottom:1px solid rgba(0,0,0,.07);
  padding:7px 10px;
  text-align:left;
  vertical-align:top;
  white-space:nowrap;
}
.bt-data-table thead th{
  position:sticky;
  top:33px;
  z-index:4;
  background:#fff;
  font-weight:700;
  font-size:12px;
  color:#475569;
  border-bottom:2px solid rgba(0,0,0,.1);
}
.bt-data-table tbody tr:hover td{
  background:#f8fafc;
}

/* ---- Small multiples (Expand) ----------------------------- */
.bt-owid-expand.active{
  background:#1e293b !important;
  border-color:#1e293b !important;
  color:#fff !important;
}
.bt-small-multiples-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px,1fr));
  gap:10px;
  box-sizing:border-box;
  padding:2px;
  overflow:hidden;
}
.bt-sm-cell{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:10px;
  padding:10px;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  min-height:140px;
  min-width:0;
  overflow:hidden;
}
.bt-sm-title{
  font-size:11px;
  font-weight:700;
  color:#334155;
  margin-bottom:6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.bt-sm-canvas-wrap{
  position:relative;
  flex:1;
  min-height:100px;
}
.bt-sm-canvas-wrap canvas{
  width:100% !important;
  height:100% !important;
  display:block;
}

/* ---- Fullscreen ------------------------------------------- */
figure.chart.grapher-component:fullscreen,
.chart.grapher-component:fullscreen,
figure.chart.grapher-component:-webkit-full-screen,
.chart.grapher-component:-webkit-full-screen{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#fff !important;
}
figure.chart.grapher-component:fullscreen .GrapherComponent,
.chart.grapher-component:fullscreen .GrapherComponent,
figure.chart.grapher-component:-webkit-full-screen .GrapherComponent,
.chart.grapher-component:-webkit-full-screen .GrapherComponent{
  width:min(1100px,96vw) !important;
  height:auto !important;
  max-height:92vh !important;
}

/* ---- Toast messages --------------------------------------- */
.bt-grapher .bt-toast{
  position:absolute;
  bottom:12px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(15,23,42,.9);
  color:#fff;
  font-size:13px;
  font-weight:500;
  padding:8px 18px;
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  z-index:300;
  pointer-events:none;
  white-space:nowrap;
}

/* ================================================================
   RESPONSIVE — container ≤ 680px
   (triggers on the widget's own width, not the viewport)
   ================================================================ */
@container btgrapher (max-width: 680px){

  .bt-grapher{
    border-radius:10px;
  }

  .controlsRow{
    flex-direction:row !important;
    align-items:center !important;
    gap:6px !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    scrollbar-width:none !important;
  }
  .controlsRow::-webkit-scrollbar{
    display:none;
  }

  .bt-owid-tabs{
    width:auto;
    flex:1 1 auto;
  }

  /* Tabs become a scrollable pill strip — icon-only on narrow containers */
  .bt-grapher .Tabs.ContentSwitchers{
    gap:4px !important;
    padding-bottom:4px !important;
  }
  .bt-grapher .Tabs__Tab{
    padding:7px 10px !important;
    font-size:12px !important;
  }
  .bt-grapher .controls.chart-controls{
    width:auto;
    justify-content:flex-start;
    flex-wrap:nowrap !important;
    gap:5px;
  }
  .bt-grapher .menu-toggle{
    padding:7px 10px !important;
    font-size:12px !important;
  }

  /* Stage — respect the admin-configured inline height on all screen sizes */
  .bt-owid-stage{
    padding:0 10px;
  }
  .bt-owid-stage.is-multiples-view{
    height:auto !important;
    min-height:0 !important;
  }

  /* Timeline */
  .GrapherTimeline{
    padding:0 10px;
    gap:6px;
  }
  .GrapherTimeline__TimelineEdgeButton{
    font-size:11px !important;
  }

  /* Footer */
  .SourcesFooterHTML{
    padding:12px 10px 14px !important;
  }
  .SourcesFooterHTMLBottom{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .ActionButtons{
    margin-left:0;
    width:100% !important;
    justify-content:flex-end !important;
  }

  /* Map */
  .bt-mapbox{
    min-height:220px;
    height:280px;
  }
  .bt-grapher.is-map-view .bt-mapbox{
    height:260px;
  }

  /* Panels */
  .bt-owid-panels{
    left:10px;
    max-width:calc(100% - 20px);
  }
  .bt-owid-panel{
    width:100%;
    max-width:min(300px, calc(100cqw - 20px));
  }

  /* Table */
  .bt-data-table{
    font-size:12px;
  }
  .bt-data-table th,
  .bt-data-table td{
    padding:6px 8px;
    font-size:12px;
  }
}

/* ================================================================
   RESPONSIVE — container ≤ 420px
   ================================================================ */
@container btgrapher (max-width: 420px){

  .bt-grapher .Tabs__Tab{
    padding:7px !important;
    font-size:11px !important;
    gap:0 !important;
    justify-content:center !important;
  }
  .bt-grapher .Tabs__Tab .label{
    display:none !important;
  }
  .bt-grapher .menu-toggle .label{
    display:none !important;
  }
  .bt-grapher .menu-toggle{
    padding:7px !important;
    gap:0 !important;
    justify-content:center !important;
  }
  .bt-owid-stage.is-multiples-view{
    height:auto !important;
    min-height:0 !important;
  }
  .bt-owid-title{
    font-size:16px !important;
  }
  .bt-owid-subtitle{
    font-size:11px !important;
  }

  .bt-mapbox{
    min-height:180px;
    height:220px;
  }
  .bt-grapher.is-map-view .bt-mapbox{
    height:210px;
    max-height:50cqw;
  }

  .bt-chart-tooltip{
    max-width:220px;
    font-size:12px;
    padding:8px 10px;
  }

  .ActionButtons ul{
    gap:4px !important;
  }
  .bt-grapher .ActionButton .icon-only{
    width:30px !important;
    height:30px !important;
  }
}

/* ================================================================
   FALLBACK @media queries for browsers without container query support
   (Safari < 16, Firefox < 110)
   ================================================================ */
@supports not (container-type: inline-size){
  @media (max-width:680px){
    .controlsRow{ flex-direction:row !important; align-items:center !important; gap:6px !important; flex-wrap:nowrap !important; overflow-x:auto !important; scrollbar-width:none !important; }
    .controlsRow::-webkit-scrollbar{ display:none; }
    .bt-owid-tabs{ width:auto; flex:1 1 auto; }
    .bt-grapher .controls.chart-controls{ width:auto; justify-content:flex-start; flex-wrap:nowrap !important; gap:5px; }
    .bt-grapher .menu-toggle{ padding:7px 10px !important; font-size:12px !important; }
    .bt-owid-stage{ padding:0 10px; }
    .GrapherTimeline{ padding:0 10px; gap:6px; }
    .SourcesFooterHTMLBottom{ flex-direction:column; align-items:flex-start; gap:10px; }
    .ActionButtons{ margin-left:0; width:100% !important; }
    .bt-mapbox{ min-height:220px; height:280px; }
    .bt-owid-panels{ left:10px; max-width:calc(100% - 20px); }
    .bt-owid-panel{ width:100%; }
  }
  @media (max-width:420px){
    .bt-grapher .Tabs__Tab{ padding:6px 10px !important; font-size:11px !important; }
    .bt-grapher .menu-toggle{ font-size:11px !important; padding:5px 9px !important; }
    .bt-mapbox{ min-height:180px; height:220px; }
  }
}