/* Lorenz Curve & Gini Coefficient (economics/lorenz-gini.php). The page chrome is the one-screen
   layout in /css/resource.css. On a laptop or desktop: the country's figures in a bar, then the
   Lorenz curve (with the Gini slider and presets under it) beside the decile bars, filling what's
   left of the window. On smaller screens they stack and the page scrolls. Theme tokens only. */

:root{
  /* the Gini areas */
  --gini-area-a: var(--viz-5-area);  /* area A: the gap from equality */
  --gini-area-b: var(--viz-3-area);  /* area B: income held */
}

.rp-main{gap:10px}

/* ---------- the country's figures ---------- */
.lg-bar{flex:none;display:flex;align-items:flex-end;gap:10px 16px;flex-wrap:wrap}
.lg-field{display:flex;flex-direction:column;gap:4px}
.lg-field label{font:600 11px/1 var(--font-display);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.lg-country{display:flex;align-items:center;gap:8px}
.country-flag{width:30px;height:21px;object-fit:cover;border-radius:3px;border:1px solid var(--line-strong);flex:none;background:var(--panel)}
.lg-bar select,.lg-bar input[type="number"]{font:600 14px/1.3 var(--font-body);color:var(--ink);background:var(--panel);border:1px solid var(--line-strong);border-radius:5px;padding:7px 9px}
.lg-bar select{min-width:170px;cursor:pointer}
.lg-bar input[type="number"]{width:130px;font-family:var(--font-mono)}
.lg-bar select:focus-visible,.lg-bar input:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.lg-bar-note{margin:0 0 6px;font-size:12.5px;color:var(--muted);flex:1 1 200px}

/* ---------- the two panels, filling what's left ---------- */
.lg-work{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(340px,1fr);gap:12px}
.lg-lorenz,.lg-deciles{display:flex;flex-direction:column;min-height:0;min-width:0;padding:10px 14px 12px}
.lg-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none}
.gini-readout{display:inline-flex;align-items:baseline;gap:8px;padding:3px 12px;border-radius:999px;background:var(--accent-tint);border:1px solid var(--line-strong)}
.gini-readout .caption{font:600 11px/1 var(--font-display);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.gini-readout .value{font-size:22px;font-weight:700;color:var(--accent-deep);line-height:1.2}
.lg-svg-box{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;margin:4px 0}
.lg-svg-box svg{display:block;width:100%;height:100%;max-height:100%;overflow:visible}
.lg-cap{flex:none;margin:4px 0 0;font-size:12.5px;color:var(--muted);line-height:1.4}

/* the Lorenz curve */
.axis{stroke:var(--ink-soft);stroke-width:2}
.axis-side{stroke:var(--line-strong);stroke-width:1.5}
.grid-line{stroke:var(--line-strong);stroke-dasharray:4 4;stroke-width:1}
.curve-equality{stroke:var(--muted);stroke-width:2;stroke-dasharray:6 4;fill:none}
.curve-lorenz{stroke:var(--accent-deep);stroke-width:3.5;fill:none}
.zone-a{fill:var(--gini-area-a)}
.zone-b{fill:var(--gini-area-b)}
.zone-a.lg-off,.zone-b.lg-off{display:none}
.label-text{font-size:17px;fill:var(--ink);font-family:var(--font-mono)}
.eq-label{fill:var(--muted)}
.axis-tick-text{font-size:17px;fill:var(--muted);font-family:var(--font-mono)}
.axis-title{font-size:18px;font-weight:700;fill:var(--ink);font-family:var(--font-body)}
.decile-dot{fill:var(--accent-deep);stroke:var(--panel);stroke-width:2}

/* the decile bars (each bar's colour is set by the script, poorest red to richest green) */
.bar-track{fill:var(--accent-tint)}
.bar-label{font-size:12px;font-weight:600;fill:var(--ink);font-family:var(--font-body)}
.bar-value{font-size:13px;font-weight:700;fill:var(--ink);font-family:var(--font-mono)}
.bar-tick{font-size:12px;fill:var(--muted);font-family:var(--font-mono)}
.bar-ref-line{stroke:var(--ink-soft);stroke-width:1.5;stroke-dasharray:4 3}
.spectrum-label{font-size:10px;font-weight:700;letter-spacing:.08em;fill:var(--muted);font-family:var(--font-body);text-transform:uppercase}

/* the curve, with its controls in a column to its right (stacked below it on smaller screens) */
.lg-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:8px 16px}
.lg-body .lg-svg-box{margin:4px 0;height:100%}
.lg-controls{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:4px 2px}
.lg-controls .lg-gini{flex-direction:column;align-items:stretch;gap:8px}
.lg-controls .lg-gini input[type="range"]{flex:none;width:100%}
.lg-controls .lg-presets{flex-direction:column;margin-top:0}
.lg-controls .lg-presets .btn{justify-content:center}
.lg-controls .lg-note{margin:0}

/* the Gini slider and the presets */
.lg-gini{flex:none;display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap}
.lg-gini > label:first-child{font:600 14px/1.3 var(--font-display);color:var(--ink);white-space:nowrap}
.lg-gini > label .num{color:var(--accent-deep);font-size:15px;margin-left:4px}
.lg-gini input[type="range"]{flex:1 1 160px;margin:0;cursor:pointer;accent-color:var(--accent)}
.lg-check{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink-soft);cursor:pointer}
.lg-check input{width:18px;height:18px;margin:0;accent-color:var(--accent);cursor:pointer}
.lg-presets{flex:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.lg-note{flex:none;margin:8px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink-soft)}
.lg-areas-key{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.lg-areas-key .sw{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px;margin:0 4px 0 0;border:1px solid var(--line-strong)}
.lg-areas-key .sw-b{margin-left:10px}
.sw-a{background:var(--gini-area-a)}
.sw-b{background:var(--gini-area-b)}

/* the sources dialog */
.sources-box{font-size:14px;line-height:1.6;color:var(--ink-soft)}
.sources-box .sources-title{font:700 12px/1.3 var(--font-display);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:6px}
.sources-box .source-row{margin-bottom:4px}
.sources-box .source-label{font-weight:600;color:var(--ink)}
.sources-box a{color:var(--accent);word-break:break-word}

/* ---------- a short laptop window: a little tighter ---------- */
@media (min-width:901px) and (max-height:760px){
  .lg-bar-note{display:none}
  .lg-cap{display:none}
  .lg-presets .btn{padding:6px 11px}
}

/* ---------- smaller screens: stacked, and the page scrolls ---------- */
@media (max-width:900px),(max-height:559px){
  .lg-work{grid-template-columns:1fr;flex:none}
  .lg-body{display:flex;flex-direction:column;flex:none}
  .lg-body .lg-svg-box{height:auto}
  .lg-controls{overflow:visible;padding:0;gap:8px}
  .lg-controls .lg-gini{flex-direction:row;flex-wrap:wrap;align-items:center}
  .lg-controls .lg-gini input[type="range"]{flex:1 1 160px;width:auto}
  .lg-controls .lg-presets{flex-direction:row}
  .lg-svg-box{flex:none}
  .lg-svg-box svg{height:auto;max-height:none}
}
@media (max-width:900px){
  /* tap targets of at least 40px */
  .rp-titlebar .btn,.lg-bar .btn,.lg-presets .btn,.seg-toggle button,.rp-nav .btn,.rp-nav .account-link{min-height:40px}
  .rp-nav .account-link{display:inline-flex;align-items:center}
  .lg-bar select,.lg-bar input[type="number"]{min-height:42px;font-size:16px}
  .lg-gini input[type="range"]{height:40px}
  .lg-check{min-height:40px}
  .lg-check input{width:22px;height:22px}
}
@media (max-width:640px){
  .lg-bar{display:grid;grid-template-columns:1fr 1fr;align-items:end}
  .lg-bar .lg-field:first-child{grid-column:1 / -1}
  .lg-bar select{flex:1;min-width:0}
  .lg-bar input[type="number"]{width:100%}
  .lg-bar-note{grid-column:1 / -1;margin:0}
  .lg-bar .btn{grid-column:1 / -1;justify-content:center}
  .lg-lorenz,.lg-deciles{padding:10px 8px 12px}
  /* the graphs are drawn smaller on a phone, so their text is drawn bigger */
  .axis-tick-text{font-size:19px}
  .axis-title{font-size:20px}
  .label-text{font-size:19px}
  .bar-label{font-size:14px}
  .bar-value{font-size:14.5px}
  .spectrum-label{font-size:12px}
  .bar-tick{font-size:13px}
  .lg-presets .btn{flex:1 1 calc(50% - 8px);justify-content:center}
  .lg-presets .btn:first-child{flex-basis:100%}
  .seg-toggle{display:flex;width:100%}
  .seg-toggle button{flex:1;justify-content:center}
}