/* Country Information (economics/country-profiles.php). The page keeps its own layout (a centred column under the
   resource chrome in /css/resource.css, the page taller than the window). Theme tokens only. */

:root{
  /* Categorical palette for the pie charts: a fixed hue order (not reassigned per country), from the theme */
  --pie-1:var(--viz-1); --pie-2:var(--viz-2); --pie-3:var(--viz-3); --pie-4:var(--viz-7); --pie-5:var(--viz-8);
}

a{color:var(--accent);}
/* the content keeps its own width and font under the resource chrome (css/resource.css) */
.page{max-width:1200px;width:100%;margin-inline:auto;font-family:var(--font-cjk);padding-bottom:28px;}

/* ---------- search ---------- */
.search-panel{
  position:relative; max-width:560px; margin:0 auto 24px;
}
.search-input{
  width:100%; padding:13px 40px 13px 16px; font-size:1rem; font-family:var(--font-body);
  border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--panel); color:var(--ink);
  cursor:pointer;
}
.search-input:focus{outline:2px solid var(--focus); outline-offset:1px; cursor:text;}
.search-caret{
  position:absolute; right:16px; top:50%; transform:translateY(-50%); pointer-events:none;
  color:var(--muted); font-size:0.8rem;
}
.search-list{
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:15;
  background:var(--panel); border:1px solid var(--line-strong); border-radius:var(--radius);
  box-shadow:var(--shadow); max-height:340px; overflow-y:auto; display:none;
}
.search-list.open{display:block;}
.search-item{
  display:flex; align-items:center; gap:10px; padding:9px 14px; cursor:pointer; font-size:0.92rem;
}
.search-item:hover, .search-item.active{background:var(--accent-tint);}
.search-flag-blank{width:24px;height:18px;flex:none;}
.search-item img{width:24px;height:18px;object-fit:cover;border-radius:2px;border:1px solid var(--line-strong);flex:none;background:var(--panel);}
.search-empty{padding:14px; color:var(--muted); font-size:0.88rem; text-align:center;}

/* ---------- profile shell ---------- */
.empty-state{
  max-width:560px; margin:40px auto; text-align:center; color:var(--muted); font-size:0.95rem;
}
.profile{display:none;}
.profile.visible{display:block;}

.section-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:0; margin-bottom:22px;
}
.section-card h2{font-family:var(--font-body); font-size:1.25rem; margin:0; font-weight:700;}
.section-sub{color:var(--muted); font-size:0.85rem; margin:0 0 16px;}

/* Accordion: native <details>/<summary>, default marker replaced with a rotating chevron */
.section-card > summary{
  cursor:pointer; padding:20px 22px; display:flex; align-items:center; justify-content:space-between;
  gap:14px; list-style:none;
}
.section-card > summary::-webkit-details-marker{display:none;}
.section-card > summary::marker{content:'';}
.section-card > summary:focus-visible{outline:2px solid var(--focus); outline-offset:-2px;}
.section-card .section-chevron{
  color:var(--muted); font-size:1.1rem; flex:none; transition:transform 0.15s ease;
}
.section-card[open] .section-chevron{transform:rotate(90deg);}
.section-card .section-body{padding:0 22px 20px;}
.section-card .overview-head{margin-bottom:0;}
.section-loading{color:var(--muted); font-size:0.88rem; padding:6px 0;}

.sources-box{
  font-size:0.76rem; line-height:1.6; color:var(--ink-soft);
  background:var(--accent-tint); border:1px solid var(--line-strong); border-radius:8px;
  padding:10px 12px; margin-top:14px;
}
.sources-box .sources-title{ font-weight:700; font-size:0.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:4px; }
.sources-box .source-row{margin-bottom:1px;}
.sources-box .source-label{ font-weight:600; color:var(--ink); }
.sources-box a{ color:var(--accent); word-break:break-word; }

/* ---------- overview ---------- */
.overview-head{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:18px;}
.overview-flag{width:96px; height:64px; object-fit:cover; border-radius:6px; border:1px solid var(--line-strong); flex:none; background:var(--accent-tint);}
.overview-names h2{margin:0; font-size:1.6rem;}
.overview-names .local-name{color:var(--muted); font-size:0.95rem; margin-top:2px;}

.maps-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px;}
@media (max-width:700px){.maps-row{grid-template-columns:1fr;}}
.map-box{border:1px solid var(--line-strong); border-radius:var(--radius); overflow:hidden;}
.map-box svg{width:100%; height:220px; display:block; background:var(--accent-tint);}
.world-country{fill:var(--line-strong); stroke:var(--panel); stroke-width:0.5;}
.world-country.selected{fill:var(--ok); stroke:var(--ok);}
.locator-ring{fill:none; stroke:var(--viz-5); stroke-width:2.5;}
.country-shape{fill:var(--ok-tint); stroke:var(--ok); stroke-width:1.5;}
.capital-dot{fill:var(--accent-b); stroke:var(--panel); stroke-width:1.5;}
.capital-label{font-size:11px; font-weight:600; fill:var(--ink); font-family:var(--font-body);}
.map-note{font-size:11px; fill:var(--muted); font-family:var(--font-body);}
.map-caption{font-size:0.76rem; color:var(--muted); text-align:center; padding:4px 0 0;}

.stat-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); gap:12px;}

.econ-columns{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:18px; align-items:start;}
@media (max-width:900px){.econ-columns{grid-template-columns:1fr;}}
.econ-col-left .stat-grid{grid-template-columns:repeat(auto-fit, minmax(150px,1fr));}
.chart-title{font-size:0.85rem; font-weight:700; color:var(--ink-soft); margin-bottom:4px;}
.stat-tile{border:1px solid var(--line); border-radius:8px; padding:12px 26px 12px 14px; background:var(--accent-tint); min-width:0; position:relative;}
.stat-tile .stat-label{font-size:0.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); font-weight:600; margin-bottom:4px; overflow-wrap:break-word;}
.stat-tile .stat-value{font-size:1.15rem; font-weight:700; font-family:var(--font-mono); color:var(--ink); line-height:1.3; overflow-wrap:break-word; word-break:break-word;}
.stat-tile .stat-sub{font-size:0.74rem; color:var(--muted); margin-top:2px; overflow-wrap:break-word;}
/* the Unemployment tile's note on the NAIRU: spare capacity, at capacity, over capacity */
.stat-tile .capacity{display:inline-block; margin-top:6px; padding:1px 8px; border-radius:999px; font-size:0.72rem; font-weight:700; border:1px solid currentColor;}
.stat-tile .capacity.is-spare{color:var(--bad); background:var(--bad-tint);}
.stat-tile .capacity.is-at{color:var(--ok); background:var(--ok-tint);}
.stat-tile .capacity.is-over{color:var(--warn); background:var(--warn-tint);}
.stat-tile.unavailable .stat-value{color:var(--muted); font-weight:500; font-size:0.9rem; font-family:var(--font-body);}

.source-badge{
  position:absolute; top:8px; right:8px; width:15px; height:15px; border-radius:50%;
  background:var(--line-strong); color:var(--panel); font-size:10px; font-style:normal;
  line-height:15px; text-align:center; cursor:help; user-select:none; font-family:var(--font-body);
}
.source-badge:hover, .source-badge:focus{background:var(--accent-deep); outline:none;}
.fact-row .source-badge{top:0; right:0;}
.chart-source{font-size:0.72rem; color:var(--muted); margin-top:8px; font-style:italic;}

/* ---------- economic ---------- */
.chart-wrap{margin-bottom:18px;}
svg.growth-chart{width:100%; height:auto; display:block;}
.growth-axis{stroke:var(--ink-soft); stroke-width:1.5;}
.growth-grid{stroke:var(--line-strong); stroke-width:1; stroke-dasharray:3 3;}
.growth-zero{stroke:var(--muted); stroke-width:1.2; stroke-dasharray:4 3;}
.growth-line{stroke:var(--accent-deep); stroke-width:2.4; fill:none;}
.growth-dot{fill:var(--accent-deep);}
.growth-tick{font-size:10px; fill:var(--muted); font-family:var(--font-mono);}
.growth-title{font-size:12px; fill:var(--ink); font-weight:700; font-family:var(--font-body);}
.debt-line-lcu{stroke:var(--accent-b-deep); stroke-width:2.4; fill:none; stroke-dasharray:5 3;}
.debt-dot-lcu{fill:var(--accent-b-deep);}
.debt-tick-pct{fill:var(--accent-deep);}
.debt-tick-lcu{fill:var(--accent-b-deep);}
.debt-legend-label{font-size:10px; fill:var(--ink-soft); font-family:var(--font-body);}

.time-range-row{display:flex; gap:6px; margin-bottom:12px;}
.time-range-row button{border:1px solid var(--line); background:var(--panel); color:var(--ink-soft); font:inherit; font-size:0.78rem; font-weight:600; padding:4px 12px; border-radius:6px; cursor:pointer;}
.time-range-row button:hover{background:var(--accent-tint); border-color:var(--accent-deep);}
.time-range-row button.active{background:var(--accent-deep); border-color:var(--accent-deep); color:var(--paper);}

svg.pyramid-chart{width:100%; height:auto; display:block;}
.pyramid-bar-m{fill:var(--hint);}
.pyramid-bar-f{fill:var(--accent-b);}
.pyramid-axis{stroke:var(--ink-soft); stroke-width:1.5;}
.pyramid-band-label{font-size:11px; fill:var(--ink); font-family:var(--font-body); font-weight:600;}
.pyramid-pct-label{font-size:10px; fill:var(--muted); font-family:var(--font-mono);}
.pyramid-legend{font-size:11px; font-family:var(--font-body); font-weight:600;}

.ppp-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px;}
@media (max-width:700px){.ppp-row{grid-template-columns:1fr;}}

.debt-clock{
  border:1px solid var(--bad); background:var(--bad-tint); border-radius:8px;
  padding:16px 18px; margin-bottom:18px; text-align:center;
}
.debt-clock-label{font-size:0.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); font-weight:600; margin-bottom:6px;}
.debt-clock-badge{background:var(--bad); color:var(--on-viz); border-radius:10px; padding:1px 8px; font-size:0.65rem; letter-spacing:.03em; margin-left:6px; text-transform:none;}
.debt-clock-value{font-size:1.9rem; font-weight:700; font-family:var(--font-mono); color:var(--bad); font-variant-numeric:tabular-nums; letter-spacing:.01em;}
.debt-clock-value.surplus{color:var(--ok);}
.debt-clock-note{font-size:0.76rem; color:var(--muted); margin-top:6px;}
.ppp-card{border:1px solid var(--line); border-radius:8px; padding:14px 16px;}
.ppp-card h3{margin:0 0 8px; font-size:0.95rem; font-family:var(--font-body);}
.ppp-card .ppp-value{font-size:1.3rem; font-weight:700; font-family:var(--font-mono);}
.ppp-card .ppp-note{font-size:0.8rem; color:var(--muted); margin-top:4px;}

.trade-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:700px){.trade-row{grid-template-columns:1fr;}}
.trade-card{border:1px solid var(--line); border-radius:8px; padding:14px 16px;}
.trade-card h3{margin:0 0 8px; font-size:0.95rem;}
.trade-card .trade-total{font-size:1.05rem; font-weight:700; font-family:var(--font-mono); margin-bottom:10px;}
.trade-subhead{font-size:0.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); font-weight:600; margin:12px 0 6px;}
.trade-subhead:first-of-type{margin-top:0;}
.pie-wrap{display:flex; flex-direction:column; align-items:center; gap:8px;}
svg.partner-pie{width:100%; max-width:220px; height:auto;}
.pie-pct-label{font-size:11px; font-weight:700; fill:var(--on-viz); font-family:var(--font-body); paint-order:stroke; stroke:var(--chart-ink); stroke-opacity:.35; stroke-width:2px;}
.pie-legend{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 14px; font-size:0.78rem;}
.pie-legend-item{display:flex; align-items:center; gap:5px; color:var(--ink-soft);}
.pie-legend-swatch{width:10px; height:10px; border-radius:2px; flex:none;}
.pie-legend-other .pie-legend-swatch{background:var(--line-strong);}
.partner-bar{display:flex; align-items:center; gap:8px; margin-bottom:5px; font-size:0.82rem;}
.partner-bar .partner-name{flex:0 0 150px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.partner-bar .partner-track{flex:1; height:8px; background:var(--accent-tint); border-radius:4px; overflow:hidden;}
.partner-bar .partner-fill{height:100%; background:var(--accent-b);}
.partner-bar .partner-fill.commodity-fill{background:var(--hint);}
.partner-bar .partner-pct{flex:0 0 40px; text-align:right; font-family:var(--font-mono); font-size:0.78rem; color:var(--muted);}
.partner-bar .partner-fill.bar-negative{background:var(--bad);}
.bar-rows{margin-top:6px;}
.chart-block{margin-bottom:20px;}
.chart-block-title{font-size:0.82rem; font-weight:700; color:var(--ink-soft); margin-bottom:8px;}

.timeline{position:relative; margin:6px 0 0; padding-left:22px;}
.timeline::before{content:''; position:absolute; left:5px; top:4px; bottom:4px; width:2px; background:var(--line-strong);}
.timeline-item{position:relative; padding-bottom:16px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{content:''; position:absolute; left:-22px; top:3px; width:10px; height:10px; border-radius:50%; background:var(--accent-deep); border:2px solid var(--panel); box-shadow:0 0 0 1px var(--accent-deep);}
.timeline-year{font-family:var(--font-mono); font-weight:700; color:var(--accent-deep); font-size:0.82rem;}
.timeline-text{font-size:0.88rem; color:var(--ink); line-height:1.5; margin-top:2px;}

/* ---------- facts (political / geographic) ---------- */
.fact-list{display:grid; grid-template-columns:1fr 1fr; gap:14px 24px;}
@media (max-width:800px){.fact-list{grid-template-columns:1fr;}}
.fact-row{border-bottom:1px solid var(--line); padding:0 18px 8px 0; position:relative;}
.fact-row .fact-label{font-size:0.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); font-weight:600; margin-bottom:3px;}
.fact-row .fact-value{font-size:0.9rem; line-height:1.5; color:var(--ink);}
.fact-row.wide{grid-column:1/-1;}

.intro-text{font-size:0.92rem; line-height:1.6; color:var(--ink-soft); margin-bottom:6px;}
.intro-text p{margin:0 0 10px;}
.intro-text p:last-child{margin-bottom:0;}
.intro-text:empty{display:none;}
.intro-text.clamped{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;}
.intro-toggle{background:none; border:none; color:var(--accent-deep); font:inherit; font-size:0.82rem; font-weight:600; cursor:pointer; padding:0 0 16px; display:none;}
.intro-toggle.visible{display:inline-block;}

.subsection-title{font-size:0.95rem; font-weight:700; color:var(--ink); margin:22px 0 10px; padding-top:16px; border-top:1px solid var(--line);}
.subsection-title:first-child{margin-top:0; padding-top:0; border-top:none;}

.chip-row{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px;}
.chip{background:var(--accent-tint); color:var(--accent-deep); border-radius:20px; padding:3px 10px; font-size:0.76rem; font-weight:600; text-decoration:none; display:inline-block;}
a.chip{cursor:pointer;}
a.chip:hover{background:var(--accent-b-tint); color:var(--accent-b-deep); text-decoration:underline;}

.not-available{color:var(--muted); font-style:italic;}
.not-available.na-small{font-size:0.82rem; margin:4px 0 0;}
