/* 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}
  .map3d-brand-mark{display:grid; place-items:center; width:26px; height:26px; border:1px solid #b7f34a; color:#b7f34a; font-size:10px}
  .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; }
  .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; } }
  @media(max-width:600px){ .map-exit-focus{ top:auto; bottom:112px; right:12px; left:12px; justify-content:center; font-size:12.5px; padding:9px 12px; } }
  #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; }
  }
  @media(max-width:600px){
    .chaos-banner{top:auto; bottom:118px; left:12px; right:12px; width:auto; gap:10px; padding:12px}
    .chaos-sub{display:none}
    .map3d-shell.is-chaos #map3d{inset:64px 0 110px 0}
    /* A vertical stack would cover the map on a phone, so the tools become a scrollable row. */
    .map-tools {
      position:absolute; top:auto; bottom:64px; left:12px; right:12px; width:auto;
      display:flex; gap:6px; overflow-x:auto; z-index:26;
    }
    .map-tool { flex:0 0 auto; font-size:12px; padding:7px 11px; }
    .sector-context { right:14px; }
    .map3d-shell:has(#map3dPanelBackdrop.open) .map-tools,
    .map3d-shell:has(#map3dPanelBackdrop.open) .chaos-banner { transform:none; }
  }
  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; }
    .map3d-shell:has(#map3dPanelBackdrop.open) .map-exit-focus { transform:none; z-index:90; }
    .map3d-shell:has(#map3dPanelBackdrop.open) .sector-context { right:14px; }
    .map3d-brand > span:last-child,.map3d-back { display:none; }
    .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}
    .sector-sidebar { top:64px; bottom:auto; width:100%; height:68px; padding:9px 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; }
    #sectorNav { display:flex; gap:5px; }
    #sectorNav button { width:175px; padding:7px; font-size:13px; }
    #map3d { inset:220px 0 110px 0; }
    .sector-context { top:145px; left:14px; right:14px; gap:8px; }
    .sector-context h2 { font-size:17px; }.sector-context p { font-size:12px; max-width:250px; }
    #sectorCompanies { flex-wrap:nowrap; overflow-x:auto; max-width:100%; }
    .sector-company { flex-shrink:0; }
    .map-statusbar { left:12px; right:12px; bottom:12px; font-size:11px; gap:7px; }
    .map-statusbar label { font-size:12px; }.map-statusbar legend { display: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; } }