/* The great oil pivot. One stage, one timeline, one evidence table.
   The globe is sized by its frame (radius = 0.43 × the shorter side), so the
   frame height is what makes it large. */
#oil-atlas{--oa-paper:#f1ede3;--oa-ink:#171918;--oa-muted:#62645c;--oa-line:#d2ccc1;--oa-land:#dcd9cf;--oa-ocean:#faf7ef;--oa-russia:#b8bbaa;--oa-china:#809027;--oa-india:#c93237;--oa-germany:#74776d;--oa-panel:#e7e3d8;--oa-gutter:32px;color-scheme:light;position:relative;isolation:isolate;background:var(--oa-paper);color:var(--oa-ink);font:400 14px/1.5 Arial,Helvetica,sans-serif;border-radius:3px;overflow:hidden}
#oil-atlas *{box-sizing:border-box}
#oil-atlas button,#oil-atlas input{font:inherit;color:inherit;touch-action:manipulation}
#oil-atlas button{cursor:pointer}
#oil-atlas :is(button,a,input,summary):focus-visible{outline:2px solid var(--oa-india);outline-offset:3px}
#oil-atlas .oa-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
body:has(#oil-atlas) .story-main{max-width:1360px}
body:has(#oil-atlas) .story-heading{max-width:920px}

/* Stage: chapter text top-left, the year watermark bottom-left, the globe centred. */
#oil-atlas .oa-stage{position:relative;padding:0 var(--oa-gutter)}
#oil-atlas .oa-chapter{position:absolute;z-index:2;top:32px;left:var(--oa-gutter);max-width:290px;pointer-events:none}
#oil-atlas .oa-chapter-number{font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--oa-muted)}
#oil-atlas .oa-chapter h2{font:400 34px/1.05 Georgia,serif;letter-spacing:-.4px;margin:10px 0 12px}
#oil-atlas .oa-chapter p{font-size:14px;line-height:1.55;color:var(--oa-muted);margin:0}
#oil-atlas .oa-expand{position:absolute;z-index:3;top:24px;right:var(--oa-gutter);border:1px solid var(--oa-line);background:var(--oa-paper);border-radius:3px;padding:8px 12px;font-size:12px}
#oil-atlas .oa-map-frame{position:relative;height:clamp(540px,76vh,820px);contain:layout paint}
#oil-atlas .oa-map{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
#oil-atlas .oa-map-number{position:absolute;left:0;bottom:4px;z-index:0;font:400 clamp(96px,13vw,190px)/.8 Georgia,serif;letter-spacing:-.04em;font-variant-numeric:tabular-nums;opacity:.1;pointer-events:none;transition:opacity .4s}
#oil-atlas[data-view="monthly"] .oa-map-number{font-size:clamp(64px,8vw,120px)}
#oil-atlas[data-motion-phase="transition"] .oa-map-number{opacity:.16}
#oil-atlas .oa-observation{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0;padding:10px 0 12px;font-size:11px;letter-spacing:.04em;color:var(--oa-muted);text-transform:uppercase}

/* Globe marks (drawn by the shared renderer, styled here). */
#oil-atlas .oa-graticule{fill:none;stroke:var(--oa-line);stroke-width:.6;opacity:.65}
#oil-atlas .oa-country{fill:var(--oa-land);stroke:var(--oa-paper);stroke-width:.45;stroke-linejoin:round}
#oil-atlas .oa-country-russia{fill:var(--oa-russia)}
#oil-atlas .oa-country-china{fill:color-mix(in srgb,var(--oa-china) 23%,var(--oa-land))}
#oil-atlas .oa-country-india{fill:color-mix(in srgb,var(--oa-india) 28%,var(--oa-land))}
#oil-atlas .oa-country-germany{fill:color-mix(in srgb,var(--oa-germany) 45%,var(--oa-land))}
#oil-atlas .oa-flow{fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.8;transition:opacity .25s}
#oil-atlas .oa-flow-underlay{fill:none;stroke:var(--oa-paper);opacity:.65}
#oil-atlas .oa-node{fill:var(--oa-paper);stroke:var(--oa-ink);stroke-width:1.5}
#oil-atlas .oa-map-label{font:600 12px Arial,Helvetica,sans-serif;letter-spacing:.1em;fill:var(--oa-ink);paint-order:stroke;stroke:var(--oa-ocean);stroke-width:3px;stroke-linejoin:round}
#oil-atlas .oa-map-value{font:400 26px Georgia,serif;letter-spacing:-.3px;fill:var(--oa-ink);paint-order:stroke;stroke:var(--oa-ocean);stroke-width:3px}
#oil-atlas .oa-map-sub{font:400 11px Arial,Helvetica,sans-serif;fill:var(--oa-muted);paint-order:stroke;stroke:var(--oa-ocean);stroke-width:3px}
#oil-atlas .oa-leader{fill:none;stroke:var(--oa-muted);stroke-width:.65;opacity:.6}
#oil-atlas .oa-route-hit{fill:none;stroke:transparent;stroke-width:24px}

/* Destinations double as the legend and the EU breakdown control. */
#oil-atlas .oa-destinations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 var(--oa-gutter);border-top:1px solid var(--oa-line);padding-top:10px}
#oil-atlas .oa-destination{border:0;background:none;text-align:left;padding:6px 8px;border-radius:3px;min-width:0;transition:background .2s}
#oil-atlas .oa-destination:hover,#oil-atlas .oa-destination[aria-pressed="true"]{background:var(--oa-panel)}
#oil-atlas .oa-destination:disabled{opacity:.5;cursor:default}
#oil-atlas .oa-destination-name{display:flex;gap:7px;align-items:center;font-size:12px;color:var(--oa-muted)}
#oil-atlas .oa-dot{width:8px;height:8px;border-radius:50%;flex:none}
#oil-atlas .oa-germany{background:var(--oa-germany)}
#oil-atlas .oa-china{background:var(--oa-china)}
#oil-atlas .oa-india{background:var(--oa-india)}
#oil-atlas .oa-destination-value{display:block;font:400 26px/1.2 Georgia,serif;font-variant-numeric:tabular-nums}
#oil-atlas .oa-inspection{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin:10px var(--oa-gutter) 0;padding:12px 16px;background:var(--oa-panel);font-size:13px}
#oil-atlas .oa-inspection[hidden],#oil-atlas [data-eu-detail][hidden]{display:none!important}
#oil-atlas .oa-inspection>div{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
#oil-atlas .oa-inspection strong{font-weight:600}
#oil-atlas .oa-inspection>[data-eu-detail]{flex-basis:100%}
#oil-atlas .oa-eu-breakdown{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding-top:12px;width:100%;font-size:12px}
#oil-atlas .oa-eu-breakdown span{display:block}
#oil-atlas .oa-eu-breakdown strong{display:block;font:400 21px Georgia,serif;margin-top:4px}
#oil-atlas .oa-eu-note{grid-column:1/-1;font-size:11px;color:var(--oa-muted)}
#oil-atlas .oa-close{display:grid;place-items:center;background:none;border:0;padding:6px 10px;font-size:18px;line-height:1}

/* One timeline: play, a single track with its periods beneath, the monthly switch. */
#oil-atlas .oa-player{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:28px;padding:22px var(--oa-gutter) 26px}
#oil-atlas .oa-play{display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;font-size:13px;font-weight:600;white-space:nowrap}
#oil-atlas .oa-play-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--oa-ink);color:var(--oa-paper);font-size:12px}
#oil-atlas .oa-timeline{position:relative;padding-top:9px}
#oil-atlas #oa-time{display:block;width:100%;height:20px;margin:0;background:transparent;appearance:none;-webkit-appearance:none;cursor:ew-resize}
#oil-atlas #oa-time::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(to right,var(--oa-ink) var(--oa-progress,0%),var(--oa-line) var(--oa-progress,0%))}
#oil-atlas #oa-time::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--oa-india);margin-top:-5.5px;box-shadow:0 0 0 4px var(--oa-paper)}
#oil-atlas #oa-time::-moz-range-track{height:3px;background:var(--oa-line)}
#oil-atlas #oa-time::-moz-range-progress{height:3px;background:var(--oa-ink)}
#oil-atlas #oa-time::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--oa-india)}
#oil-atlas .oa-years{position:relative;height:30px;margin-top:4px}
#oil-atlas .oa-years button{position:absolute;top:0;left:calc(7px + var(--oa-tick,0) * (100% - 14px));transform:translateX(-50%);background:none;border:0;padding:4px 2px;font-size:12px;color:var(--oa-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
#oil-atlas .oa-years button:first-child{transform:translateX(-7px)}
#oil-atlas .oa-years button:last-child{transform:translateX(calc(-100% + 7px))}
#oil-atlas .oa-years button[aria-pressed="true"]{color:var(--oa-ink);font-weight:700}
#oil-atlas .oa-monthly-check{display:flex;align-items:center;gap:8px;font-size:13px;white-space:nowrap;padding-top:8px}
#oil-atlas .oa-monthly-check input{width:16px;height:16px;margin:0;accent-color:var(--oa-ink)}
#oil-atlas .oa-monthly-check small{font-size:12px;color:var(--oa-muted)}

#oil-atlas .oa-next{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 var(--oa-gutter) 24px;padding:20px 24px;background:var(--oa-panel)}
#oil-atlas .oa-next[hidden]{display:none}
#oil-atlas .oa-next h2{font:400 28px/1.1 Georgia,serif;margin:0 0 6px}
#oil-atlas .oa-next p{font-size:13px;color:var(--oa-muted);margin:0}
#oil-atlas .oa-next button{display:flex;align-items:center;gap:10px;padding:13px 18px;background:var(--oa-ink);color:var(--oa-paper);border:0;border-radius:3px;font-size:13px;min-height:46px;white-space:nowrap}

/* Small multiples share one scale and one export rail. */
#oil-atlas .oa-trends{padding:28px var(--oa-gutter);border-top:1px solid var(--oa-line)}
#oil-atlas .oa-trends-heading{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:14px}
#oil-atlas .oa-trends h2,#oil-atlas .oa-evidence h2{font:400 28px/1.15 Georgia,serif;letter-spacing:-.3px;margin:0}
#oil-atlas #oa-trend-date{font-size:13px;color:var(--oa-muted);font-variant-numeric:tabular-nums}
#oil-atlas .oa-trend-set{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
#oil-atlas[data-view="monthly"] .oa-trend-set{grid-template-columns:1fr}
#oil-atlas .oa-trend-panel,#oil-atlas .psd-shared-plot{min-width:0}
#oil-atlas .oa-trend-panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
#oil-atlas .oa-trend-panel h3{font:600 13px/1.35 Arial,Helvetica,sans-serif;margin:0}
#oil-atlas .oa-trend-value{font:400 24px/1 Georgia,serif;white-space:nowrap;font-variant-numeric:tabular-nums}
#oil-atlas .oa-trend-plot{min-height:230px}
#oil-atlas .psd-chart-rail{gap:4px 16px;border-top:0;margin-top:6px;padding-top:0}
#oil-atlas .psd-chart-action{border:0;padding:4px 0;font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--oa-line)}
#oil-atlas .oa-trends-note{font-size:12px;color:var(--oa-muted);margin:10px 0 0}

#oil-atlas .oa-evidence{padding:28px var(--oa-gutter) 30px;border-top:1px solid var(--oa-line)}
#oil-atlas .oa-evidence p,#oil-atlas .oa-evidence summary{font-size:12px;color:var(--oa-muted);max-width:820px}
#oil-atlas .oa-evidence a{color:var(--oa-ink);text-underline-offset:3px}
#oil-atlas .oa-method-details summary{cursor:pointer;color:var(--oa-ink);font-size:13px;margin-top:6px}
#oil-atlas .oa-table-wrap{overflow-x:auto;margin:14px 0 4px}
#oil-atlas table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
#oil-atlas th,#oil-atlas td{padding:9px 12px 9px 0;border-bottom:1px solid var(--oa-line);text-align:right;font-weight:400}
#oil-atlas th:first-child,#oil-atlas td:first-child{text-align:left}
#oil-atlas th{color:var(--oa-muted)}

#oil-atlas.is-expanded{position:fixed;inset:0;z-index:10000;overflow:auto;border-radius:0}
#oil-atlas.is-expanded .oa-map-frame{height:calc(100vh - 150px)}
body.oil-expanded{overflow:hidden}

@media(max-width:800px){
  #oil-atlas{--oa-gutter:18px}
  #oil-atlas .oa-chapter{position:static;max-width:none;padding:22px 72px 0 0}
  #oil-atlas .oa-chapter h2{font-size:27px;margin:8px 0}
  #oil-atlas .oa-expand{top:18px}
  #oil-atlas .oa-map-frame{height:min(96vw,460px)}
  #oil-atlas .oa-map-number{font-size:72px}
  #oil-atlas .oa-destination-value{font-size:22px}
  #oil-atlas .oa-player{grid-template-columns:auto 1fr;gap:14px 18px}
  #oil-atlas .oa-timeline{grid-column:1/-1;grid-row:2}
  #oil-atlas .oa-monthly-check{justify-self:end;padding-top:0}
  #oil-atlas .oa-trend-set{grid-template-columns:1fr;gap:22px}
  #oil-atlas .oa-next{flex-direction:column;align-items:stretch}
  /* Ten monthly labels do not fit a phone: keep the ends and the current month. */
  #oil-atlas[data-view="monthly"] .oa-years button:not(:first-child):not(:last-child):not([aria-pressed="true"]){font-size:0;width:12px;height:22px}
  #oil-atlas[data-view="monthly"] .oa-years button:not(:first-child):not(:last-child):not([aria-pressed="true"])::before{content:"";display:block;width:4px;height:4px;margin:0 auto;border-radius:50%;background:var(--oa-line)}
}
@media(max-width:520px){
  #oil-atlas .oa-destination-name{font-size:11px}
  #oil-atlas .oa-eu-breakdown{grid-template-columns:repeat(2,minmax(0,1fr))}
  #oil-atlas .oa-observation{font-size:10px}
}
@media(pointer:coarse){
  #oil-atlas .oa-years button,#oil-atlas .oa-play,#oil-atlas .oa-monthly-check,#oil-atlas .oa-close,#oil-atlas .oa-expand{min-height:44px}
  #oil-atlas #oa-time{height:36px}
}
@media(prefers-reduced-motion:reduce){#oil-atlas *{transition:none!important;animation:none!important}}