/* Labour Market & Wages (economics/labour-market.php). The layout and the graph's basics (axes, grid,
   the D and S colours, the floor line, badges) come from market-graph.css; this adds the wage bill
   shading, the two side-by-side graphs of the Wage differences view and the reasons lists.
   Theme tokens only, plus these page tokens. */

:root{ --lm-bill:rgba(245,158,11,.20); }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --lm-bill:rgba(251,191,36,.16); } }
:root[data-theme="dark"]{ --lm-bill:rgba(251,191,36,.16); }

.lm-bill{fill:var(--lm-bill)}
.lm-grid{opacity:.55}
.lm-sub{font-size:.72em}
.lm-curve-label{font-weight:700}
.lm-bold{font-weight:700}
.lm-nonbinding{stroke-dasharray:8 5;opacity:.75}
.lm-gap-label{font-weight:700;fill:var(--hint)}
.lm-t-a,.lm-t-b{fill:var(--ink)}

/* the legend's swatches */
.mg-legend i.lm-k-bill{background:var(--lm-bill);border:1px solid var(--warn)}
.mg-legend i.lm-k-gap{background:var(--area-gap);height:6px;border-radius:0}
.mg-legend i.lm-k-ghost{height:0;border-top:2px dashed var(--muted);border-radius:0}

/* the side panel: a view's own controls come first */
.mg-side > section.lm-first{order:-1;border-top:0;padding-top:0}
.mg-side > section.lm-first ~ section:not([hidden]):not(.lm-first){border-top:1px solid var(--line);padding-top:12px}
.mg-side h2 + .mg-ctl{margin-top:-2px}
.mg-side section > h2:not(:first-child){margin-top:8px}
.mg-examples .btn[aria-pressed="true"]{background:var(--accent-tint);border-color:var(--accent);color:var(--accent-deep)}

/* wage differences: two graphs side by side */
.lm-two{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lm-two[hidden]{display:none}
.lm-fig{margin:0;display:flex;flex-direction:column;min-height:0;min-width:0}
.lm-fig figcaption{flex:none;font:700 14px/1.3 var(--font-display);color:var(--ink);text-align:center;margin-bottom:2px}
.lm-fig svg{flex:1;min-height:0;width:100%;height:100%;display:block;background:var(--panel);border-radius:6px}
.lm-small-title{font-size:13px}
.lm-reasons{margin:2px 0 4px;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:1.4;color:var(--ink-soft)}
.lm-reasons .badge{margin-right:4px}

.lm-summary{margin:10px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink-soft)}
.mg-graph .mg-note{min-height:2.9em}

@keyframes lm-fade{from{opacity:.3}to{opacity:1}}
.mg-graph.lm-fade svg{animation:lm-fade .35s ease-out}
@media (prefers-reduced-motion:reduce){.mg-graph.lm-fade svg{animation:none}}

@media (min-width:901px) and (max-height:700px){
  .mg-graph .mg-note{min-height:0;font-size:12.5px}
}
@media (max-width:900px){
  .lm-two{display:flex;flex-direction:column}
  .lm-fig svg{height:auto;flex:none}
  .mg-examples .btn{min-height:40px}
}
@media (max-width:640px){
  #graph .axis-tick-text,.lm-fig .axis-tick-text{font-size:21px}
  #graph .label-text,.lm-fig .label-text{font-size:21px}
  #graph .axis-title{font-size:22px}
  .lm-fig .lm-small-title{font-size:18px}
}

/* phones: the view toggle fills the width, and a long name wraps onto two lines */
@media (max-width:640px){
  .rp-controls .seg-toggle{display:flex;width:100%}
  .rp-controls .seg-toggle button{flex:1 1 0;justify-content:center;white-space:normal;text-align:center;line-height:1.15;padding:8px 6px;min-width:0}
}