/* assets/brand/mining-web.css
 *
 * /wa-mining-web. A separate file rather than a <style> block on purpose: the
 * page HTML is edge-cached for a day and this file is not, so a deploy can
 * never pair fresh markup from mining-web.js with a stale stylesheet (the
 * failure /exploration-spend hit three times). Nothing here carries meaning
 * either way: the script puts real spaces and block elements in its markup, so
 * the words read right with this file missing.
 *
 * Colour. Blues and greys only, per the brand. Two node shades, one hue:
 * --mw-party (the outer ring: who holds the paper) and --mw-company (inside:
 * whose ground it is on). Position and labels are the primary encoding; the
 * shades back them up. Checked with the dataviz validator against #0A3550:
 * both >= 3:1 contrast, delta E 18.7 between them under protan, 20.2 normal.
 */
:root {
  --mw-party: #A9C0DE;
  --mw-company: #4F87B3;
  --mw-centre: #DFE6EF;
  --mw-edge: rgba(109, 159, 194, .24);
  --mw-edge-hot: #A9C0DE;
  --mw-surface: #0A3550;
  --mw-rule: rgba(109, 159, 194, .22);
  --mw-rule-strong: rgba(109, 159, 194, .42);
}

.mw-section { padding: 8px 0 72px; }
.mw-status { padding: 60px 0; color: var(--muted); font-size: 17px; }

.mw-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px; background: var(--mw-rule); border: 1px solid var(--mw-rule);
  border-radius: 10px; overflow: hidden; margin-bottom: 30px;
}
.mw-stat { background: var(--mw-surface); padding: 17px 19px 16px; display: flex; flex-direction: column; gap: 3px; }
.mw-stat-val { font-size: 28px; font-weight: 300; letter-spacing: -.5px; line-height: 1.1; color: #fff; }
.mw-stat-key { font-size: 11.5px; color: var(--dim); letter-spacing: .06em; text-transform: uppercase; font-weight: 500; }
.mw-stat-sub { font-size: 12px; color: var(--faint); }

.mw-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px 34px; margin-bottom: 18px; }
.mw-ctl { display: flex; flex-direction: column; gap: 8px; }
.mw-ctl-label { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.mw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mw-chip {
  font-family: inherit; font-size: 13px; color: var(--muted);
  background: rgba(var(--blue-rgb), .07); border: 1px solid var(--mw-rule-strong);
  padding: 7px 13px; border-radius: 6px; cursor: pointer; transition: all .18s var(--ease);
}
.mw-chip:hover { border-color: var(--blue); color: #fff; }
.mw-chip[aria-pressed="true"] { background: var(--bright); border-color: var(--bright); color: #fff; font-weight: 500; }
.mw-chip:focus-visible, .mw-link-btn:focus-visible, .mw-search input:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 2px; }

.mw-search { position: relative; min-width: 260px; flex: 1 1 260px; max-width: 420px; }
.mw-search input {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 14px; color: #fff;
  background: rgba(var(--blue-rgb), .07); border: 1px solid var(--mw-rule-strong);
  border-radius: 6px; padding: 8px 12px;
}
.mw-search input::placeholder { color: var(--faint); }
.mw-suggest {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px 0;
  list-style: none; background: var(--surface2); border: 1px solid var(--mw-rule-strong); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4); max-height: 320px; overflow-y: auto;
}
.mw-suggest[hidden] { display: none; }
.mw-suggest li { padding: 8px 12px; cursor: pointer; font-size: 13.5px; color: var(--text); display: flex; justify-content: space-between; gap: 12px; }
.mw-suggest li[aria-selected="true"], .mw-suggest li:hover { background: rgba(var(--blue-rgb), .14); color: #fff; }
.mw-suggest small { color: var(--dim); font-size: 11.5px; white-space: nowrap; }

.mw-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.mw-card { background: var(--mw-surface); border: 1px solid var(--mw-rule); border-radius: 12px; padding: 6px 6px 0; margin: 0; }
.mw-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 20px; padding: 14px 16px 4px; }
.mw-card-title { font-size: 15px; font-weight: 500; color: #fff; margin: 0; }
.mw-card-sub { font-size: 13px; color: var(--dim); margin: 0; }
.mw-back { margin: 2px 16px 0; }
.mw-plot { width: 100%; display: block; touch-action: manipulation; }
.mw-plot text { font-family: 'Roboto', Arial, sans-serif; }

/* Marks. Edges are recessive until a node is picked, then only its own
   connections light up and everything else steps back. */
.mw-edge { stroke: var(--mw-edge); fill: none; transition: stroke .15s, opacity .15s; }
.mw-node { cursor: pointer; }
.mw-node circle.mw-dot { stroke: var(--mw-surface); stroke-width: 2; transition: opacity .15s; }
.mw-node-party circle.mw-dot { fill: var(--mw-party); }
.mw-node-company circle.mw-dot { fill: var(--mw-company); }
.mw-node-centre circle.mw-dot { fill: var(--mw-centre); }
.mw-node:hover circle.mw-dot { stroke: #fff; }
/* Labels live in their own top layer so no dot can sit over a name. */
.mw-label { fill: var(--muted); pointer-events: none; transition: opacity .15s; }
.mw-label-party, .mw-label-centre { fill: var(--text); font-weight: 500; }
.mw-label-dim { fill: var(--dim); font-weight: 400; font-size: .86em; }
.mw-sector { fill: var(--dim); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; pointer-events: none;
  paint-order: stroke; stroke: var(--mw-surface); stroke-width: 4px; stroke-linejoin: round; }
/* A halo in the surface colour keeps a name legible where a line runs under it. */
.mw-label { paint-order: stroke; stroke: var(--mw-surface); stroke-width: 3px; stroke-linejoin: round; }
.mw-arc { stroke: var(--mw-rule-strong); stroke-width: 1; fill: none; }

.mw-plot.is-focus .mw-edge { opacity: .12; }
.mw-plot.is-focus .mw-edge.is-hot { opacity: 1; stroke: var(--mw-edge-hot); }
.mw-plot.is-focus .mw-node circle.mw-dot { opacity: .28; }
.mw-plot.is-focus .mw-label { opacity: .2; }
.mw-plot.is-focus .mw-node.is-hot circle.mw-dot, .mw-plot.is-focus .mw-label.is-hot { opacity: 1; }
.mw-plot.is-focus .mw-node.is-picked circle.mw-dot { stroke: #fff; stroke-width: 2.5; }
/* A label with no clear room stays hidden until its node is in play. */
.mw-label.mw-quiet { opacity: 0; }
.mw-plot.is-focus .mw-label.mw-quiet.is-hot { opacity: 1; }

.mw-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding: 4px 16px 16px; font-size: 12px; color: var(--dim); }
.mw-key { display: inline-flex; align-items: center; gap: 8px; }
.mw-key i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; }
.mw-pointer { margin: 0; padding: 0 16px 14px; font-size: 13px; color: var(--dim); }

/* The panel: one company's or one party's connections. */
.mw-panel { background: var(--mw-surface); border: 1px solid var(--mw-rule); border-radius: 12px; padding: 18px 18px 8px; position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; }
.mw-panel-empty { color: var(--dim); font-size: 14px; line-height: 1.55; margin: 0 0 12px; }
.mw-panel h2 { font-size: 19px; font-weight: 500; color: #fff; margin: 0 0 4px; line-height: 1.25; }
.mw-code { font-family: 'Roboto Mono', monospace; font-size: 12px; color: var(--blue-light); font-weight: 400; }
.mw-kind { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); font-weight: 700; margin: 0 0 10px; }
.mw-facts { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 0 0 10px; }
.mw-note { font-size: 12.5px; color: var(--dim); line-height: 1.5; margin: 0 0 12px; padding: 8px 10px; border-left: 2px solid var(--mw-rule-strong); }
.mw-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.mw-link-btn {
  font-family: inherit; font-size: 13px; font-weight: 500; color: var(--blue-light); background: none;
  border: 1px solid var(--mw-rule-strong); border-radius: 6px; padding: 6px 11px; cursor: pointer; text-decoration: none;
}
.mw-link-btn:hover { color: #fff; border-color: var(--blue); }
.mw-rel { border-top: 1px solid var(--mw-rule); padding: 12px 0 6px; }
.mw-rel h3 { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); font-weight: 700; margin: 0 0 8px; }
.mw-rel ul { list-style: none; margin: 0; padding: 0; }
.mw-rel li { padding: 6px 0; border-bottom: 1px solid rgba(109, 159, 194, .1); font-size: 13.5px; }
.mw-rel li:last-child { border-bottom: none; }
.mw-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mw-row button.mw-name { font-family: inherit; font-size: 13.5px; color: var(--text); background: none; border: none; padding: 0; text-align: left; cursor: pointer; }
.mw-row button.mw-name:hover { color: #fff; text-decoration: underline; }
.mw-num { font-family: 'Roboto Mono', monospace; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.mw-meta { font-size: 11.5px; color: var(--faint); margin-top: 2px; }
.mw-titles-btn { font-family: inherit; font-size: 11.5px; color: var(--blue-light); background: none; border: none; padding: 0; cursor: pointer; margin-top: 3px; }
.mw-titles-btn:hover { color: #fff; text-decoration: underline; }
.mw-titles { margin: 6px 0 2px; padding: 8px 10px; background: rgba(var(--blue-rgb), .06); border-radius: 6px; font-size: 12.5px; }
.mw-titles a { color: var(--blue-light); text-decoration: none; }
.mw-titles a:hover { color: #fff; text-decoration: underline; }
.mw-titles div { padding: 2px 0; color: var(--muted); }
.mw-more { font-size: 12px; color: var(--faint); margin: 4px 0 0; }

.mw-tip {
  position: fixed; z-index: 60; pointer-events: none; opacity: 0;
  transform: translate(-50%, calc(-100% - 14px)); transition: opacity .1s;
  background: var(--surface2); border: 1px solid var(--mw-rule-strong); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4); padding: 10px 13px; min-width: 180px; max-width: 280px;
  font-size: 12.5px; color: var(--muted); line-height: 1.45;
}
.mw-tip[data-on="1"] { opacity: 1; }
.mw-tip strong { color: #fff; font-weight: 500; font-size: 13.5px; }

.mw-table-wrap { margin-top: 18px; border: 1px solid var(--mw-rule); border-radius: 12px; background: var(--mw-surface); overflow-x: auto; }
.mw-table-wrap table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.mw-table-wrap caption { text-align: left; padding: 15px 17px 11px; font-size: 13px; color: var(--dim); }
.mw-table-wrap th, .mw-table-wrap td { padding: 9px 15px; text-align: right; white-space: nowrap; border-top: 1px solid var(--mw-rule); }
.mw-table-wrap th { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); font-weight: 500; }
.mw-table-wrap td { color: var(--text); font-family: 'Roboto Mono', monospace; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.mw-table-wrap td.mw-tname, .mw-table-wrap th.mw-tname { text-align: left; white-space: normal; min-width: 180px; font-family: inherit; font-size: 13.5px; }
.mw-table-wrap td.mw-tkind { text-align: left; font-family: inherit; color: var(--dim); font-size: 12.5px; }
.mw-table-wrap td.mw-tname button { font-family: inherit; font-size: 13.5px; color: var(--text); background: none; border: none; padding: 0; text-align: left; cursor: pointer; border-bottom: 1px solid var(--mw-rule-strong); }
.mw-table-wrap td.mw-tname button:hover { color: #fff; border-bottom-color: currentColor; }
.mw-table-wrap tbody tr:hover { background: rgba(var(--blue-rgb), .07); }
.mw-more-row { padding: 12px 17px; border-top: 1px solid var(--mw-rule); }

.mw-method { margin-top: 46px; border-top: 1px solid var(--mw-rule); padding-top: 30px; }
.mw-method h2 { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin: 0 0 20px; }
.mw-method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px 38px; }
.mw-method h3 { font-size: 14px; font-weight: 500; color: #fff; margin: 0 0 6px; }
.mw-method p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.6; max-width: 60ch; font-weight: 300; }
.mw-stamp { display: block; margin-top: 26px; font-size: 12.5px; color: var(--faint); }

@media (max-width: 1000px) {
  .mw-layout { grid-template-columns: minmax(0, 1fr); }
  .mw-panel { position: static; max-height: none; }
}
@media (max-width: 720px) {
  .mw-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mw-stat { padding: 13px 14px 12px; }
  .mw-stat-val { font-size: 23px; }
  .mw-card { padding: 4px 4px 0; }
  .mw-card-head { padding: 12px 12px 4px; }
  .mw-search { min-width: 0; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mw-chip, .mw-edge, .mw-node circle.mw-dot, .mw-label { transition: none; }
}