/* Map application shell (V3.17). Extracted from map.html so the full AI map and the sector lenses (space.html) share one stylesheet instead of two copies that drift apart. Nothing here changed in the move. */ html,body{margin:0; height:100%; overflow:hidden; background:#05070a} .map3d-shell{height:100vh; width:100vw; position:relative} #map3d{position:absolute; inset:0} #map3d canvas{outline:none} .map3d-topbar{ position:absolute; top:0; left:0; right:0; z-index:20; display:flex; align-items:center; gap:18px; padding:16px 22px; background:linear-gradient(to bottom, rgba(5,7,6,.85), rgba(5,7,6,0)); pointer-events:none; } .map3d-topbar > *{pointer-events:auto} .map3d-brand{display:flex; align-items:center; gap:10px; font-size:12px; font-weight:800; letter-spacing:.12em; color:#f3f4ef; text-decoration:none; text-transform:uppercase} .map3d-brand-mark{display:block; width:165px; height:60px; border:0; color:transparent; background:url("/brand/lockup-horizontal-on-navy.png") 53.14% 52.61% / 178.09% auto no-repeat} .map3d-brand-mark::before{content:none} .map3d-brand > span:last-child{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0)} .map3d-back{display:flex; align-items:center; gap:6px; color:#b4bbb5; text-decoration:none; font-size:12.5px; white-space:nowrap} .map3d-back:hover{color:#fff} .map3d-titleblock{display:none} @media (min-width:720px){ .map3d-titleblock{display:block; margin-right:auto} } .map3d-title{font-size:13px; font-weight:800; color:#eef1ee; margin:0} .map3d-sub{font-size:10.5px; color:#8a938c; margin:2px 0 0} .map3d-search-wrap{position:relative; flex:1 1 260px; max-width:340px} .map3d-sig-btns{display:flex; gap:8px; margin-left:auto} .map-top-btn{display:flex; align-items:center; gap:7px; cursor:pointer; font:inherit; font-size:13px; font-weight:700; color:#e8eef4; background:#101a25; border:1px solid #394e63; border-radius:8px; padding:8px 12px; white-space:nowrap} .map-top-btn:hover{border-color:#b7f34a} .map-top-btn .count{font-size:11px; background:#223043; border-radius:999px; padding:1px 7px; color:#cfe0f0} .pulse-dot{width:8px; height:8px; border-radius:50%; background:#b7f34a; box-shadow:0 0 0 0 rgba(183,243,74,.6); animation:pulse 2.2s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(183,243,74,.55)}70%{box-shadow:0 0 0 8px rgba(183,243,74,0)}100%{box-shadow:0 0 0 0 rgba(183,243,74,0)}} @media (prefers-reduced-motion: reduce){ .pulse-dot{animation:none} } .map3d-search{ width:100%; padding:9px 12px; border-radius:8px; border:1px solid #3a453e; background:rgba(17,23,20,.9); color:#f3f4ef; font-size:13px; font-family:inherit; } .map3d-search::placeholder{color:#7c867f} .map3d-search:focus{outline:2px solid #b7f34a; outline-offset:1px} .aimap-search-results{ position:absolute; top:38px; left:0; right:0; background:#141b17; border:1px solid #3a453e; border-radius:8px; max-height:240px; overflow-y:auto; z-index:40; display:none; box-shadow:0 10px 30px rgba(0,0,0,.4); } .aimap-search-results.show{display:block} .aimap-search-row{padding:8px 12px; font-size:12.5px; color:#dfe3e0; cursor:pointer; display:flex; align-items:center; gap:8px; border-bottom:1px solid #232b26} .aimap-search-row:last-child{border-bottom:none} .aimap-search-row:hover{background:#1c2620} .aimap-swatch{width:9px; height:9px; border-radius:50%; flex:none} .map3d-legend{ position:absolute; left:18px; bottom:18px; z-index:20; background:rgba(17,23,20,.85); border:1px solid #3a453e; border-radius:10px; padding:12px 14px; font-size:12px; color:#dfe3e0; backdrop-filter:blur(6px); } .map3d-legend .lg-title{font-size:10px; font-weight:800; letter-spacing:.08em; color:#8a938c; text-transform:uppercase; margin-bottom:7px} .map3d-legend .lg-row{display:flex; align-items:center; gap:8px; padding:2px 0} .map3d-legend .lg-row i{width:10px; height:10px; border-radius:50%; display:inline-block; flex:none} .map3d-hint{ position:absolute; right:18px; bottom:18px; z-index:20; font-size:11px; color:#7c867f; background:rgba(17,23,20,.7); border:1px solid #2c352f; border-radius:8px; padding:8px 11px; max-width:200px; line-height:1.5; } .panel-backdrop{ background:rgba(4,6,5,.55) } @media (max-width:720px){ .map3d-legend{display:none} .map3d-hint{display:none} .map3d-search-wrap{max-width:none} } #map3d { inset:130px 0 88px 260px; } .map3d-topbar { background:#080d12; border-bottom:1px solid #25303b; height:72px; box-sizing:border-box; z-index:30; } .map3d-brand { font-size:11px; } .map3d-sub { font-size:12px; } .map3d-search { font-size:14px; } .aimap-search-row { width:100%; background:transparent; text-align:left; font:inherit; border:0; padding:10px; } .sector-sidebar { position:absolute; z-index:21; left:0; top:72px; bottom:0; width:260px; box-sizing:border-box; padding:24px 14px; background:#090f15; border-right:1px solid #25303b; overflow:auto; color:#edf3f9; } .sector-intro { padding:0 10px 18px; } .sector-eyebrow { font-size:12px; letter-spacing:.15em; color:#b7f34a; margin:0 0 10px; } .sector-intro h1 { font-size:22px; margin:0 0 7px; } /* map.html's sidebar title is an h2 since the SEO pass (one h1 per page); keep the old h1 look. */ .sector-intro .sector-intro-title { font-size:22px; margin:0 0 7px; font-weight:750; line-height:.95; letter-spacing:-.05em; } .sector-intro p:last-child { font-size:14px; color:#a0adbb; margin:0; } .sector-sidebar button { cursor:pointer; font-family:inherit; } .sector-overview { width:100%; background:#19261a; color:#d9f7aa; border:1px solid #435933; padding:12px; text-align:left; font-size:14px; margin-bottom:14px; border-radius:6px; } .sector-overview span { float:right; } #sectorNav { display:grid; gap:5px; } #sectorNav button { display:flex; align-items:center; gap:10px; background:transparent; color:#b7c3cf; border:1px solid transparent; border-radius:6px; width:100%; text-align:left; padding:12px 9px; font-size:15px; font-weight:600; line-height:1.35; } #sectorNav button:hover,#sectorNav button[aria-pressed=true] { background:#192532; border-color:#394e63; color:#fff; } #sectorNav small { margin-left:auto; color:#99a9bb; font-size:12px; font-weight:400; } .sector-number { font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; } .sector-footnote { color:#8e9ba9; font-size:12px; padding:14px 10px 0; line-height:1.6; } .sector-context { position:absolute; left:284px; top:89px; right:196px; z-index:20; display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px; pointer-events:none; } .sector-context h2 { font-size:30px; font-weight:800; color:#eef4fa; margin:0 0 6px; letter-spacing:-.01em; } .sector-context p { font-size:14px; color:#9dabbb; margin:0; max-width:660px; } /* The map's view controls, top right, stacked. They stay put in every mode -- including chaos, where the sector sidebar and heading step out of the way -- because they are how you get back out of it. */ .map-tools { position:absolute; z-index:24; top:89px; right:24px; display:grid; gap:7px; width:148px; pointer-events:auto; } .map-tool { cursor:pointer; font:inherit; font-size:13px; font-weight:600; text-align:left; text-decoration:none; color:#e1e9f1; border:1px solid #425264; background:rgba(16,26,37,.94); border-radius:6px; padding:9px 12px; backdrop-filter:blur(6px); display:block; } .map-tool:hover { border-color:#b7f34a; color:#fff; } .map-tool:focus-visible { outline:2px solid #b7f34a; outline-offset:2px; } .map-exit-focus{ position:absolute; z-index:23; top:262px; right:24px; pointer-events:auto; display:flex; align-items:center; gap:8px; cursor:pointer; font-family:inherit; background:#101a25; border:1px solid #b7f34a; color:#eafccb; padding:9px 15px; border-radius:999px; font-size:13px; font-weight:700; box-shadow:0 10px 28px rgba(0,0,0,.5); } .map-exit-focus:hover{ background:#16241a; } .map-exit-focus[hidden]{ display:none; } @media(max-width:900px){ .map-exit-focus{ right:14px; top:240px; } } /* On a phone the exit pill sits in the strip below the map, not stretched across it. */ @media(max-width:600px){ .map-exit-focus{ top:auto; bottom:44px; right:12px; left:auto; font-size:12.5px; padding:8px 13px; } } #sectorCompanies { display:flex; flex-wrap:wrap; gap:6px; width:100%; max-width:900px; pointer-events:auto; /* A layer with 30 companies used to push its own chip list over most of the map. */ max-height:132px; overflow-y:auto; align-content:flex-start; } .sector-company { cursor:pointer; font-family:inherit; border:1px solid #344558; background:rgba(12,21,31,.94); color:#dde8f3; border-radius:6px; padding:7px 10px 7px 8px; font-size:13px; display:flex; align-items:center; gap:8px; text-align:left; } .sector-company .rank-num { flex:none; width:20px; text-align:center; font-size:11px; font-weight:800; color:#7c8a97; font-variant-numeric:tabular-nums; } .sector-company:nth-child(1) .rank-num,.sector-company:nth-child(2) .rank-num,.sector-company:nth-child(3) .rank-num { color:#b7f34a; } .sector-company .company-info { display:flex; flex-direction:column; gap:3px; } .sector-company .company-name { font-weight:600; } .sector-company .tier-dots { display:flex; gap:2px; } .sector-company .tier-dot { width:6px; height:6px; border-radius:50%; background:#2c3946; display:inline-block; } .sector-company .tier-dot.filled { background:#b7f34a; } .sector-company:hover,.sector-company[aria-pressed=true] { border-color:#b7f34a; } .map-statusbar { position:absolute; z-index:20; left:280px; right:20px; bottom:14px; color:#bac7d3; font-size:12px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; background:#080e15e8; border-top:1px solid #24323f; padding-top:10px; } .map-statusbar fieldset { display:flex; gap:16px; border:0; padding:0; margin:0; } .map-statusbar legend { float:left; font-weight:600; margin-right:14px; } .map-statusbar label { display:flex; align-items:center; gap:6px; font-size:13px; cursor:pointer; } .map-statusbar input { accent-color:#b7f34a; } .map-statusbar i { width:17px; border-top:2px solid; display:inline-block; } .status-current { color:#b7f34a; }.status-dated { color:#8fa3ff; }.status-comparison { color:#c0c3ca; } .map-statusbar p { width:100%; margin:0; color:#91a1b2; } #map3dPanelBackdrop { background:transparent; pointer-events:none; top:72px; } /* V3.7.1: the open panel used to cover the top bar (search) and the "Back to full map" / "Reset view" buttons. The panel now starts below the top bar and the buttons shift left of it. */ /* While one company is selected, the sector heading and blurb give their space to the map -- the panel on the right already says what you're looking at (V3.8). */ .map3d-shell.is-company-focus #sectorHeading, .map3d-shell.is-company-focus #sectorDescription, .map3d-shell.is-company-focus #sectorSignal { display:none; } .map3d-shell.is-company-focus .sector-context { top:82px; } .map3d-shell:has(#map3dPanelBackdrop.open) .map-exit-focus { transform:translateX(calc(-1 * min(380px, 34vw) - 12px)); } .map3d-shell:has(#map3dPanelBackdrop.open) .map-tools, .map3d-shell:has(#map3dPanelBackdrop.open) .chaos-banner { transform:translateX(calc(-1 * min(380px, 34vw) - 12px)); } .map3d-shell:has(#map3dPanelBackdrop.open) .sector-context { right:calc(min(380px, 34vw) + 24px); } @media(max-width:900px){ .map3d-shell:has(#map3dPanelBackdrop.open) .map-exit-focus { transform:translateX(calc(-1 * min(380px, 90vw) - 12px)); } .map3d-shell:has(#map3dPanelBackdrop.open) .map-tools, .map3d-shell:has(#map3dPanelBackdrop.open) .chaos-banner { transform:translateX(calc(-1 * min(380px, 90vw) - 12px)); } .map3d-shell:has(#map3dPanelBackdrop.open) .sector-context { right:calc(min(380px, 90vw) + 24px); } } #map3dPanel { pointer-events:auto; width:min(380px,34vw); box-shadow:-16px 0 60px #0008; } @media(max-width:900px){ #map3dPanel { width:min(380px,90vw); } } /* On laptop-width windows the sidebar + panel left too little map between them (V3.8). */ @media(min-width:901px) and (max-width:1280px){ .sector-sidebar { width:212px; padding:20px 10px; } #map3d { left:212px; } .sector-context { left:230px; } .map-statusbar { left:230px; } .sector-context h2 { font-size:24px; } .sector-context p { font-size:13px; max-width:420px; } } .chaos-btn{background:#1b1226; border-color:#5b3d78; color:#e9dcff} .chaos-btn:hover{border-color:#c39bff} .chaos-btn.is-on{background:#2a1740; border-color:#c39bff; color:#fff} .chaos-banner{ position:absolute; z-index:25; right:24px; bottom:96px; width:320px; max-width:calc(100vw - 32px); display:flex; flex-direction:column; gap:12px; align-items:stretch; padding:16px; border-radius:12px; background:rgba(20,12,30,.94); border:1px solid #5b3d78; backdrop-filter:blur(6px); box-shadow:0 14px 40px rgba(0,0,0,.45); } .chaos-banner .button{ align-self:stretch; text-align:center; } /* [hidden] loses to the display:flex above, so the hidden banner kept swallowing clicks over the map. */ .chaos-banner[hidden]{display:none} .chaos-kicker{margin:0 0 4px; font-size:10px; letter-spacing:.18em; font-weight:800; color:#c39bff} /* The banner carries the page heading while chaos mode is on, because the sector sidebar that normally holds it is hidden. Styled to match the old line rather than to look like an h1. */ .chaos-line{margin:0; font-size:14.5px; font-weight:700; line-height:1.4; color:#f3f4ef; letter-spacing:0} .chaos-sub{margin:6px 0 0; font-size:12px; line-height:1.55; color:#b9b2c6} .chaos-banner .button{ white-space:nowrap; flex:none; align-self:center; cursor:pointer; font:inherit; font-size:12.5px; font-weight:700; background:#2a1740; border:1px solid #c39bff; color:#efe6ff; padding:9px 14px; border-radius:8px; text-decoration:none; } .chaos-banner .button:hover{background:#3a2057; color:#fff} /* In chaos mode the sector furniture describes a layout that is no longer on screen. */ .map3d-shell.is-chaos .sector-context,.map3d-shell.is-chaos .sector-sidebar,.map3d-shell.is-chaos .sig-legend{display:none} .map3d-shell.is-chaos .map-tools{top:89px} .map3d-shell.is-chaos #map3d{left:0} .map3d-shell.is-chaos .map-statusbar{left:18px} @media(max-width:900px){ .map-tools { width:126px; right:14px; } .map-tool { font-size:12px; padding:8px 10px; } .sector-context { right:152px; } } /* --- Phone layout ------------------------------------------------------------------------------- A phone has no room for furniture that floats over the map, so on ≤600px every piece of chrome gets a fixed horizontal band and the map gets the gap between the bands. Reading down the screen: 0 topbar (64) 70 view tools -- chaos mode only; in sector mode they sit under the sector strip 64 sector strip -- sector mode only (60 tall) 130 view tools 168 sector heading + company chips ---- map ---- 744 chaos caption / "back to full map" pill 800 status bar Bands are declared here and the map's inset is derived from them, so the two cannot drift. What went wrong before: .map-tools was given top:auto + bottom:64px here, but the chaos rule above sets top:89px with higher specificity, so on a phone the nav stretched from y89 to y780 -- a 366x691 box over the whole screen, with each button stretched to full height by the default align-items. Every band below therefore sets BOTH edges explicitly. */ @media(max-width:600px){ /* The caption is a single line and its button beside it; the paragraph is desktop-only already. */ .chaos-banner{ top:auto; bottom:44px; left:12px; right:12px; width:auto; max-width:none; flex-direction:row; align-items:center; gap:10px; padding:10px 12px; } .chaos-sub{display:none} .chaos-kicker{margin:0 0 2px; font-size:9px} .chaos-line{font-size:12.5px; line-height:1.35} .chaos-banner .button{align-self:center; padding:8px 11px; font-size:12px} /* Drilled into one company, the panel covers the screen and the caption has nowhere to go. */ .map3d-shell.is-company-focus .chaos-banner{display:none} .map3d-shell.is-chaos #map3d{inset:108px 0 106px 0} /* A vertical stack would cover the map, so the tools become one scrollable row under the chrome. Both edges are set so neither the chaos rule nor anything else can stretch the box. */ .map-tools { position:absolute; top:130px; bottom:auto; left:12px; right:12px; width:auto; height:auto; display:flex; align-items:center; gap:6px; overflow-x:auto; z-index:26; -webkit-overflow-scrolling:touch; } .map3d-shell.is-chaos .map-tools { top:70px; bottom:auto; } /* Sized so all four fit across a 390px phone without a cut-off button at the edge; the row still scrolls if a narrower device or larger text pushes one past the end. */ .map-tool { flex:0 0 auto; font-size:11.5px; padding:7px 9px; } .map3d-shell:has(#map3dPanelBackdrop.open) .map-tools, .map3d-shell:has(#map3dPanelBackdrop.open) .chaos-banner { transform:none; } } @media(max-width:380px){ .map-tools { gap:4px; } .map-tool { font-size:11px; padding:7px 7px; } } button:focus-visible { outline:2px solid #b7f34a; outline-offset:3px; } @media(max-width:900px) { .map3d-titleblock { display:none; } .sector-sidebar { width:220px; padding:16px 8px; } #map3d { left:220px; } .sector-context { left:238px; } .map-statusbar { left:238px; } .map-statusbar fieldset { flex-wrap:wrap; gap:8px; } } @media(max-width:600px) { .map3d-topbar { height:64px; padding:10px 12px; gap:10px; } #map3dPanelBackdrop { top:64px; } /* The panel covers the phone and carries its own close button, so the floating exit pill only lands on top of the evidence text. It comes back as soon as the panel is closed. */ .map3d-shell:has(#map3dPanelBackdrop.open) .map-exit-focus { display:none; } .map3d-shell:has(#map3dPanelBackdrop.open) .sector-context { right:14px; } .map3d-brand > span:last-child,.map3d-back { display:none; } .map3d-brand-mark { width:132px; height:48px; } .map-top-btn{padding:7px 8px; font-size:12px} #openThesis{font-size:0} #openThesis::after{content:"Thesis"; font-size:12px} .sig-legend{display:none !important} /* Band 64–124: the sector strip. */ .sector-sidebar { top:64px; bottom:auto; width:100%; height:60px; padding:8px 10px; display:flex; gap:8px; overflow-x:auto; border-right:0; border-bottom:1px solid #25303b; } .sector-intro,.sector-footnote { display:none; } .sector-overview { width:110px; min-width:110px; margin:0; padding:8px 10px; } #sectorNav { display:flex; gap:5px; } #sectorNav button { width:175px; padding:6px 7px; font-size:12.5px; } /* Band 168–~236: what you are looking at, then its companies. The description is clamped rather than dropped -- two lines is enough to say what a layer is, and the rest is in the panel. */ .sector-context { top:168px; left:12px; right:12px; gap:6px; } .sector-context > div { width:100%; } .sector-context h2 { font-size:16px; margin:0 0 4px; } .sector-context p { font-size:11.5px; line-height:1.45; max-width:100%; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* Focused on a company the heading is hidden, but the chips keep their band so nothing jumps. */ .map3d-shell.is-company-focus .sector-context { top:168px; } .sector-context .sig-pill { font-size:11px; padding:4px 9px; } #sectorSignal { margin-top:4px; } #sectorCompanies { flex-wrap:nowrap; overflow-x:auto; max-width:100%; max-height:none; } .sector-company { flex-shrink:0; padding:6px 9px 6px 7px; font-size:12px; } /* The heading block is an overlay on the map's top edge, as it is on a desktop -- it has no background of its own and the graph's centre sits well below it. The inset only has to clear the bands that are solid: topbar, sector strip and tools. */ #map3d { inset:212px 0 106px 0; } /* Band 800–834: one scrollable row. It used to wrap to 95px -- a quarter of the screen -- and the tools row landed on top of it. The hint line goes: on a touch screen you already know to drag. */ .map-statusbar { left:12px; right:12px; bottom:10px; font-size:11px; gap:12px; padding-top:8px; flex-wrap:nowrap; white-space:nowrap; overflow-x:auto; } .map-statusbar fieldset { flex-wrap:nowrap; gap:12px; } .map-statusbar label { font-size:11.5px; }.map-statusbar legend { display:none; } .map-statusbar p { display:none; } #mapConnectionCount { flex:none; } #mapReset { font-size:12px; } } /* The two sector maps are found from inside the main map, not from the site's top bar: they are a second look at this database, not a second destination. */ .sector-more { margin:18px 10px 0; padding-top:16px; border-top:1px solid #25303b; } .sector-more-label { font-size:10px; letter-spacing:.16em; font-weight:800; color:#7c8a97; margin:0 0 10px; } .sector-more a { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 10px; margin-bottom:6px; border:1px solid #2b3a48; border-radius:6px; color:#cfe0f0; font-size:13px; font-weight:600; text-decoration:none; background:#0d1620; } .sector-more a:hover { border-color:#b7f34a; color:#fff; } .sector-more a span { color:#8e9ba9; font-size:12px; font-variant-numeric:tabular-nums; } .sector-more-note { font-size:11.5px; line-height:1.5; color:#7f8d9b; margin:8px 0 0; } @media(max-width:600px){ .sector-more { display:none; } } /* "About this map" / "About this lens": a short plain-text guide at the foot of the sector sidebar (SEO pass, Sep 2026). Collapsed by default so it never competes with the sector list. */ .map-about { margin:18px 10px 0; padding-top:14px; border-top:1px solid #25303b; } .map-about summary { cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:8px; } .map-about summary::-webkit-details-marker { display:none; } .map-about summary::after { content:"+"; color:#8e9ba9; font-size:14px; } .map-about[open] summary::after { content:"\2212"; } .map-about summary h2 { font-size:10px; letter-spacing:.16em; font-weight:800; color:#7c8a97; margin:0; text-transform:uppercase; } .map-about summary:hover h2 { color:#cfe0f0; } .map-about p { font-size:12px; line-height:1.6; color:#a0adbb; margin:10px 0 0; } .map-about a { color:#b7f34a; text-decoration:none; } .map-about a:hover { text-decoration:underline; } .map-about-list b { color:#dbe6f1; font-weight:700; } @media(max-width:600px){ .map-about { display:none; } } /* The company / layer / relationship table is in the initial HTML for readers that do not run JavaScript. The class is set only when JavaScript runs, and the table is then removed. */ html.js .map-facts { display: none; } html:not(.js), html:not(.js) body { height: auto; overflow: auto; } .map-facts { padding: 24px 18px 72px; background: #05070a; }