/* Index Numbers (economics/index-numbers.php). The page chrome is the one-screen layout in
   /css/resource.css. Three views, one at a time: on a laptop or desktop the chart, with its working
   under it, fills what's left of the window, and the controls sit to its right (scrolling inside their
   panel if they must). On smaller screens they stack and the page scrolls. Theme tokens only, plus the
   charts' own page tokens below. */

/* ---------- page tokens: the basket's categories and the charts' lines, deeper in light mode ---------- */
:root{
  --cat-1:#2563eb;--cat-2:#d97706;--cat-3:#059669;--cat-4:#db2777;--cat-5:#7c3aed;--cat-6:#0891b2;--cat-7:#65a30d;
  --ln-cpi:#b91c1c;      /* the weighted index */
  --ln-avg:#475569;      /* the simple average */
  --ln-nom:#2563eb;      /* nominal values */
  --ln-real:#c2410c;     /* real values */
  --bar-x:#059669;       /* export prices */
  --bar-m:#7c3aed;       /* import prices */
  --gap-fill:rgba(37,99,235,.10);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --cat-1:#60a5fa;--cat-2:#fbbf24;--cat-3:#34d399;--cat-4:#f472b6;--cat-5:#a78bfa;--cat-6:#22d3ee;--cat-7:#a3e635;
    --ln-cpi:#f87171;--ln-avg:#cbd5e1;--ln-nom:#60a5fa;--ln-real:#fb923c;--bar-x:#34d399;--bar-m:#a78bfa;--gap-fill:rgba(96,165,250,.14);
  }
}
:root[data-theme="dark"]{
  --cat-1:#60a5fa;--cat-2:#fbbf24;--cat-3:#34d399;--cat-4:#f472b6;--cat-5:#a78bfa;--cat-6:#22d3ee;--cat-7:#a3e635;
  --ln-cpi:#f87171;--ln-avg:#cbd5e1;--ln-nom:#60a5fa;--ln-real:#fb923c;--bar-x:#34d399;--bar-m:#a78bfa;--gap-fill:rgba(96,165,250,.14);
}

.rp-main{gap:10px}
.ix-work{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,380px);gap:12px}
.ix-work[hidden]{display:none}
.panel h2{margin:0;font:600 11.5px/1.2 var(--font-display);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}

/* ---------- the chart ---------- */
.ix-graph{display:flex;flex-direction:column;min-height:0;min-width:0;padding:10px 14px 12px;gap:6px}
.ix-head{display:flex;align-items:center;justify-content:space-between;gap:6px 14px;flex-wrap:wrap;flex:none}
.ix-legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--ink-soft)}
.ix-legend li{display:inline-flex;align-items:center;gap:6px}
.ix-legend i{width:18px;height:0;border-top:3px solid;flex:none}
.lg-cpi i{border-color:var(--ln-cpi)}.lg-avg i{border-color:var(--ln-avg);border-top-style:dashed}
.lg-ghost i{border-color:var(--muted);border-top-style:dotted}
.lg-nom i{border-color:var(--ln-nom)}.lg-real i{border-color:var(--ln-real)}
.lg-x i{border-color:var(--bar-x);border-top-width:8px}.lg-m i{border-color:var(--bar-m);border-top-width:8px}
#viewTot .lg-ghost i{border-top:2px dashed var(--muted);height:8px;border:2px dashed var(--muted)}
.ix-svg-box{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.ix-svg-box svg{display:block;width:100%;height:100%;max-height:100%;overflow:visible}

.ix-svg-box .axis{stroke:var(--ink-soft);stroke-width:2}
.ix-svg-box .grid-line{stroke:var(--line);stroke-width:1}
.ix-svg-box .tick{font:500 13px var(--font-mono);fill:var(--muted)}
.ix-svg-box .ax-title{font:700 14.5px var(--font-body);fill:var(--ink)}
.ix-svg-box .base-line{stroke:var(--ink-soft);stroke-width:1.5;stroke-dasharray:6 4}
.ix-svg-box .base-text{font:600 12.5px var(--font-body);fill:var(--ink-soft)}
.ix-svg-box .bar{opacity:.82;stroke:var(--panel);stroke-width:1}
.ix-svg-box .bar-val{font:700 13px var(--font-mono);fill:var(--ink)}
.ix-svg-box .bar-val.big{font-size:17px}
.ix-svg-box .bar-name{font:600 12px var(--font-body);fill:var(--ink)}
.ix-svg-box .cpi-line{stroke:var(--ln-cpi);stroke-width:3.5}
.ix-svg-box .cpi-dot{fill:var(--ln-cpi);stroke:var(--panel);stroke-width:2}
.ix-svg-box .cpi-text{font:700 15px var(--font-mono);fill:var(--ln-cpi);paint-order:stroke;stroke:var(--panel);stroke-width:4px}
.ix-svg-box .avg-line{stroke:var(--ln-avg);stroke-width:2;stroke-dasharray:7 5}
.ix-svg-box .avg-text{font:600 13px var(--font-mono);fill:var(--ln-avg);paint-order:stroke;stroke:var(--panel);stroke-width:4px}
.ix-svg-box .ghost-line,.ix-svg-box .ghost-path{stroke:var(--muted);stroke-width:2;stroke-dasharray:2 4;fill:none}
.ix-svg-box .ghost-text{font:500 12px var(--font-mono);fill:var(--muted);paint-order:stroke;stroke:var(--panel);stroke-width:4px}
.ix-svg-box .line{fill:none;stroke-width:3.5;stroke-linejoin:round}
.ix-svg-box .line-nom{stroke:var(--ln-nom)}.ix-svg-box .line-real{stroke:var(--ln-real)}
.ix-svg-box .dot{stroke:var(--panel);stroke-width:2}
.ix-svg-box .dot-nom{fill:var(--ln-nom)}.ix-svg-box .dot-real{fill:var(--ln-real)}
.ix-svg-box .drop-line{stroke-width:1.5;stroke-dasharray:4 4}
.ix-svg-box .drop-nom{stroke:var(--ln-nom)}.ix-svg-box .drop-real{stroke:var(--ln-real)}
.ix-svg-box .gap-area{fill:var(--gap-fill)}
.ix-svg-box .end-label{font:700 14px var(--font-body)}
.ix-svg-box .lab-nom{fill:var(--ln-nom)}.ix-svg-box .lab-real{fill:var(--ln-real)}
.ix-svg-box .tbar{stroke-width:2}
.ix-svg-box .bar-x{fill:var(--bar-x);opacity:.85}
.ix-svg-box .bar-m{fill:var(--bar-m);opacity:.85}
.ix-svg-box .bar-tot-improved{fill:var(--ok-tint);stroke:var(--ok)}
.ix-svg-box .bar-tot-worsened{fill:var(--bad-tint);stroke:var(--bad)}
.ix-svg-box .bar-tot-unchanged{fill:var(--accent-tint);stroke:var(--accent-deep)}
.ix-svg-box .tbar-ghost{fill:none;stroke:var(--ink-soft);stroke-width:1.5;stroke-dasharray:5 4}
.ix-svg-box .bar-label{font:600 14px var(--font-body);fill:var(--ink)}
.ix-svg-box .op-sym{font:700 30px var(--font-mono);fill:var(--ink-soft)}
.ix-svg-box .op-sym.op-sm{font-size:20px}

/* the readouts and the working, under the chart */
.ix-readouts{flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ix-stat{background:var(--panel-2);border:1px solid var(--line);border-radius:5px;padding:5px 10px;display:flex;flex-direction:column;gap:1px;min-width:0}
.ix-stat .lab{font:600 11.5px/1.25 var(--font-display);color:var(--muted)}
.ix-stat .val{font:700 18px/1.2 var(--font-mono);color:var(--ink);font-variant-numeric:tabular-nums}
.ix-stat.big{border-left:4px solid var(--ln-cpi)}
.ix-stat.big .val{color:var(--ln-cpi)}
.ix-work-line{flex:none;margin:0;font:500 13px/1.5 var(--font-mono);color:var(--ink-soft);overflow-wrap:anywhere}
.ix-work-line b{color:var(--ink)}
.ix-summary{flex:none;margin:0;font-size:13.5px;line-height:1.45;color:var(--ink-soft)}
.ix-summary:empty{display:none}
.ix-table-wrap{flex:none;overflow-x:auto}
table.ix-table{width:100%;border-collapse:collapse;font-size:13px}
table.ix-table th,table.ix-table td{padding:3px 6px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
table.ix-table thead th{font:600 11px/1.2 var(--font-display);color:var(--muted);letter-spacing:.04em}
table.ix-table tbody th{text-align:left;font:600 12.5px var(--font-display);color:var(--ink)}
table.ix-table td{font:500 12.5px var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink)}
table.ix-table .r-nom{color:var(--ln-nom)}table.ix-table .r-real{color:var(--ln-real)}

/* ---------- the side panel ---------- */
.ix-side{display:flex;flex-direction:column;gap:10px;min-height:0;min-width:0;overflow:auto;padding:12px 14px}
.ix-side-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ix-sum{font:700 12.5px/1.2 var(--font-mono);color:var(--ok);background:var(--ok-tint);padding:3px 8px;border-radius:999px}
.ix-sum.bad{color:var(--bad);background:var(--bad-tint)}
.ix-sec{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding-top:10px}
.ix-side > .ix-sec:first-child{border-top:0;padding-top:0}
.ix-legend li[hidden]{display:none}
.ix-check{display:inline-flex;align-items:center;gap:8px;font:600 13px/1.3 var(--font-display);color:var(--ink-soft);cursor:pointer}
.ix-check input{width:17px;height:17px;margin:0;accent-color:var(--accent);cursor:pointer}
.ix-rows{display:flex;flex-direction:column;gap:6px}
.ix-row{border:1px solid var(--line);border-left:4px solid var(--c);border-radius:5px;padding:5px 8px 4px;background:var(--panel-2)}
.ix-row-top{display:flex;align-items:center;gap:6px}
.ix-row .sw{width:10px;height:10px;border-radius:2px;background:var(--c);flex:none;display:none}
.ix-name{flex:1;min-width:0;font:600 13.5px/1.2 var(--font-display);color:var(--ink);background:transparent;border:1px solid transparent;border-radius:4px;padding:3px 4px}
.ix-name:hover{border-color:var(--line-strong)}
.ix-name:focus-visible{outline:2px solid var(--focus);outline-offset:0;background:var(--panel)}
.ix-prod{font:500 12px var(--font-mono);color:var(--muted);white-space:nowrap}
.ix-del{border:0;background:transparent;color:var(--muted);font-size:18px;line-height:1;padding:2px 6px;border-radius:4px;cursor:pointer}
.ix-del:hover{color:var(--bad);background:var(--bad-tint)}
.ix-del[hidden]{display:none}
.ix-row-ctl{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px}
.ix-mini{display:flex;flex-direction:column;font:600 11.5px/1.2 var(--font-display);color:var(--ink-soft)}
.ix-mini output{font:700 12.5px var(--font-mono);color:var(--accent-deep);margin-left:4px}
.ix-mini input[type="range"]{width:100%;margin:0;height:22px;accent-color:var(--c);cursor:pointer}
#btnAdd{align-self:flex-start}
.ix-ctl{display:flex;flex-direction:column;gap:1px}
.ix-ctl label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font:600 13.5px/1.3 var(--font-display);color:var(--ink)}
.ix-ctl output{font:600 13.5px/1.3 var(--font-mono);color:var(--accent-deep)}
.ix-ctl input[type="range"]{width:100%;margin:0;height:26px;accent-color:var(--accent);cursor:pointer}
.ix-presets{display:flex;flex-wrap:wrap;gap:6px}
.ix-presets .btn{white-space:normal;text-align:left}
.ix-dl{margin:0;display:flex;flex-direction:column;gap:5px}
.ix-dl div{background:var(--panel-2);border:1px solid var(--line);border-radius:5px;padding:5px 9px}
.ix-dl dt{font-size:12px;color:var(--muted)}
.ix-dl dd{margin:1px 0 0;font:700 14px var(--font-mono);color:var(--ink)}
.ix-hint{margin:0;font-size:12.5px;line-height:1.4;color:var(--muted)}
.ix-verdict{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ix-verdict .val{font:700 22px var(--font-mono);color:var(--ink)}
.badge{display:inline-block;padding:3px 12px;border-radius:999px;font:700 14px/1.35 var(--font-display)}
.badge-improved{background:var(--ok-tint);color:var(--ok)}
.badge-worsened{background:var(--bad-tint);color:var(--bad)}
.badge-unchanged{background:var(--accent-tint);color:var(--accent-deep)}
.ix-why{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.ix-nz{font-size:13px;line-height:1.5;color:var(--ink-soft);background:var(--accent-tint);border-left:3px solid var(--accent);border-radius:5px;padding:8px 11px}
.ix-nz strong{display:block;color:var(--ink);margin-bottom:2px}

/* ---------- a short laptop window: tighter, so it all still fits ---------- */
@media (min-width:901px) and (max-height:720px){
  .ix-stat .val{font-size:16px}
  .ix-work-line,.ix-summary{font-size:12.5px}
  table.ix-table th,table.ix-table td{padding:2px 6px}
}

/* ---------- smaller screens: stacked, and the page scrolls ---------- */
@media (max-width:900px),(max-height:559px){
  .ix-work{grid-template-columns:1fr;flex:none}
  .ix-svg-box{flex:none;display:block}
  .ix-svg-box svg{height:auto;max-height:none}
  .ix-side{overflow:visible}
}
@media (max-width:900px){
  /* tap targets of at least 40px */
  .rp-titlebar .btn,.ix-side .btn,.seg-toggle button,.rp-nav .btn,.rp-nav .account-link{min-height:40px}
  .rp-nav .account-link{display:inline-flex;align-items:center}
  .ix-ctl input[type="range"],.ix-mini input[type="range"]{height:40px}
  .ix-check{min-height:40px}
  .ix-check input{width:22px;height:22px}
  .ix-del{min-width:40px;min-height:40px}
  .ix-name{min-height:40px}
}
@media (max-width:640px){
  .ix-graph{padding:10px 8px 12px}
  .rp-controls .seg-toggle{display:flex;width:100%}
  .rp-controls .seg-toggle button{flex:1;justify-content:center;white-space:normal;text-align:center;line-height:1.15}
  /* the charts are drawn smaller on a phone, so their text is drawn bigger */
  .ix-svg-box .tick{font-size:18px}
  .ix-svg-box .ax-title{font-size:18px}
  .ix-svg-box .bar-val{font-size:17px}
  .ix-svg-box .bar-val.big{font-size:22px}
  .ix-svg-box .bar-name{font-size:16px}
  .ix-svg-box .cpi-text{font-size:20px}
  .ix-svg-box .avg-text,.ix-svg-box .base-text,.ix-svg-box .ghost-text{font-size:17px}
  .ix-svg-box .end-label,.ix-svg-box .bar-label{font-size:18px}
  .ix-readouts{grid-template-columns:1fr 1fr}
  .ix-stat.big{grid-column:1 / -1}
  table.ix-table .long{display:none}
  table.ix-table th,table.ix-table td{padding:3px 3px}
  table.ix-table td{font-size:11.5px}
  .ix-svg-box .op-sym{font-size:24px}
  .ix-svg-box .op-sym.op-sm{font-size:17px}
}

/* small laptops: a narrower side panel, so the chart keeps the room */
@media (min-width:901px) and (max-width:1150px){
  .ix-work{grid-template-columns:minmax(0,1fr) 300px}
  .ix-stat{padding:4px 8px}
  .ix-stat .lab{font-size:10.5px}
  .ix-stat .val{font-size:15px}
  .ix-work-line{font-size:12px}
  .ix-summary{font-size:12.5px}
}