/* "Go deeper": one separator line holding RELATED, TIMELINE and BIG PICTURE. Click a word to open it.
   Built by go-deeper.js. Without JavaScript none of this applies and every section shows in the normal order. */
#gd { margin: 0; }
#gd[hidden] { display: none; }
/* The line uses the site's own .continued-divider class, so it matches the old RELATED COMPANIES line exactly. */
#gd .gd-word { padding: 14px 13px; margin: -14px -13px; background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; }
#gd .gd-word:hover, #gd .gd-word[aria-expanded="true"] { color: #000; background: none; }
body.dark #gd .gd-word:hover, body.dark #gd .gd-word[aria-expanded="true"] { color: #fff; background: none; }
#gd .gd-word:focus-visible { outline: 2px solid #4d819c; outline-offset: 2px; }
#gd .gd-word[hidden] { display: none; }
/* The line runs on between the words: each connector is a stretchy piece of the same line. */
#gd .gd-dot { flex: 1; height: 0; font-size: 0; border-top: 1px solid #ddd; }
body.dark #gd .gd-dot { border-top-color: #444; }
/* One underline that slides from word to word. */
#gd .gd-line { position: relative; }
#gd .gd-bar { position: absolute; height: 2px; left: 0; top: 0; width: 0; background: #000; opacity: 0; pointer-events: none; transition: left .25s ease, width .25s ease, opacity .15s; }
body.dark #gd .gd-bar { background: #fff; }
#gd .gd-bar.snap { transition: opacity .15s; }
@media (prefers-reduced-motion: reduce) { #gd .gd-bar { transition: opacity .15s; } }
/* Closed panels keep their width (so charts can measure themselves) but take no height. */
/* position: relative makes the clipping catch absolutely placed parts too (the timeline's items), which otherwise stretched the page below the footer. */
#gd .gd-panel { position: relative; height: 0; overflow: hidden; visibility: hidden; margin: 0; }
/* No top margin: the line's own 35px margin is the space (a margin here added on top of it whenever a closed panel sat in between). */
#gd .gd-panel.open { height: auto; overflow: visible; visibility: visible; margin: 0; }
/* The open panel does not need its own heading: the word on the line is the heading. */
#gd #timeline .tl-head, #gd #insight-card > h2, #gd #related-divider, #gd #timeline-status .tl-head, #gd #insight-status .is-head { display: none; }
html.gd-on #timeline-divider { display: none; }
/* The panel already has its own space under the line, so drop the Big Picture card's own top margin (it doubled the gap). */
/* !important: timeline.css and insight.css add a 75px top margin when a timeline sits before the Big Picture, with a more specific selector. */
#gd #insight-card { margin: 0 0 20px !important; }
#gd #insight-status { margin-top: 0 !important; }
/* Same for the Timeline: its own 40px top margin doubled the gap under the line. */
#gd #timeline { margin: 0 0 20px; }
#gd #timeline-status { margin: 0 0 20px; }
/* The timeline used to sit between the last two paragraphs. Now they touch, so give them one blank line, like the other paragraphs. */
html.gd-on #explanation-last { margin-top: 1.5em; }
/* Small box with the company's everyday name where the Related lines start. */
#gd .gd-root { position: absolute; left: 50%; top: 0; transform: translate(-50%, -100%); z-index: 2; width: max-content; max-width: 92%; padding: 10px 16px; background: #fff; color: #17221b; border: 1px solid #bbb; border-radius: 2px; text-align: left; }
body.dark #gd .gd-root { background: #000; color: #eee; border-color: #4b4b4b; }
/* Related loading shapes: the name box, a trunk line and faint shimmer cards (same shimmer as the other skeletons). */
#gd .gd-skel .related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 72px; row-gap: 24px; }
#gd .gd-skel-card { display: block; height: 112px; border-radius: 2px; background: linear-gradient(90deg, var(--skeleton-base) 35%, var(--skeleton-shine) 50%, var(--skeleton-base) 65%) 100% 0 / 300% 100%; animation: skeleton-shimmer .9s linear infinite; }
#gd .gd-skel-trunk { position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px solid #ddd; }
body.dark #gd .gd-skel-trunk { border-left-color: #444; }
/* The real cards fade in; the loading shapes fade out (same .skeleton-leaving fade the site already uses). */
@keyframes gd-in { from { opacity: 0; } to { opacity: 1; } }
#gd #related-companies { position: relative; }
#gd #related-companies.gd-fade .related-map:not(.skeleton-leaving) { animation: gd-in .2s linear; }
#gd #related-companies .gd-skel.skeleton-leaving { top: var(--gd-root-h, 0px); }
/* Room for the name box above the lines (its height is measured by the script; margins would collapse). */
#gd #related-companies.open { padding-top: var(--gd-root-h, 0px); }
/* Phones: the side lines go and the words may wrap. */
@media (max-width: 600px) {
  #gd .gd-line { flex-wrap: wrap; justify-content: center; gap: 6px 14px; }
  #gd .gd-line::before, #gd .gd-line::after, #gd .gd-dot { display: none; }
  #gd .gd-skel .related-grid { column-gap: 28px; row-gap: 12px; }
}