/* platform.css — shared theme + components for the platform pages. Matches dashboard.html so the new pages feel native. Load on every new page. */ :root{ --bg:#06070d; --bg2:#0b0e1a; --panel:rgba(255,255,255,.04); --panel-brd:rgba(255,255,255,.09); --txt:#e9ecff; --muted:#98a0c9; --brand:#6d5efc; --brand2:#22d3ee; --ok:#34d399; --warn:#fbbf24; --bad:#f87171; --radius:18px; --maxw:1180px; --grad:linear-gradient(120deg,#6d5efc,#22d3ee); } *{box-sizing:border-box;margin:0;padding:0} body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg);color:var(--txt);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} #app{display:none} #gate{min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px} .spinner-lg{width:34px;height:34px;border:3px solid var(--panel-brd);border-top-color:var(--brand2);border-radius:50%;animation:spin .8s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} #gate p{color:var(--muted);font-size:14.5px} header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(6,7,13,.6);border-bottom:1px solid var(--panel-brd)} /* --------------------------------------------------------------------------- THE HEADER — why it is built this way --------------------------------------------------------------------------- The old version used @media (max-width: …) to shrink the menu. That could never work here, and this is the trap to remember: the page container is capped at --maxw, so on ANY monitor wider than that the nav is the SAME width. A 1440px screen and a 1200px screen both give the nav 1132px. The media queries were asking about the WINDOW, which on a big screen is never small, so they never fired — while the menu was overflowing the whole time. That is why the bell sat on top of "Admin" for an admin account. Two changes make an overlap structurally impossible, at any width, with any number of menu items: 1. The menu row SCROLLS sideways instead of spilling. A flex row whose children cannot shrink will always overflow eventually; letting it scroll means the overflow is contained and every item stays reachable. This is what mobile app bars do. It also means adding a 9th item cannot break the header again. 2. The shrink steps are @container queries on the nav itself, so they react to the space the nav actually has — not to the size of the window. The platform header also gets a wider container than the page body: with 8 items plus a long email, 1180px is genuinely not enough room, and losing the email on a large monitor looked broken. --------------------------------------------------------------------------- */ header .wrap{max-width:1400px} nav{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px; container-type:inline-size;container-name:pfnav} .logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:23px;white-space:nowrap;flex-shrink:0} .logo img{width:40px;height:40px;border-radius:11px;object-fit:contain;flex-shrink:0} /* white-space:nowrap on the links is the reason labels never break in half ("My / Datasets"). min-width:0 lets the ROW shrink; overflow-x lets what does not fit scroll instead of landing on top of the user chip. */ .navlinks{display:flex;gap:3px;flex:1 1 auto;margin-left:16px;min-width:0; overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none} .navlinks::-webkit-scrollbar{display:none} .navlinks a{padding:8px 12px;border-radius:10px;font-size:14px;color:var(--muted);font-weight:600; white-space:nowrap;flex-shrink:0} .navlinks a:hover,.navlinks a.active{background:var(--panel);color:var(--txt)} /* flex-shrink:0 — the user chip must never be squashed into the menu. */ .user-chip{display:flex;align-items:center;gap:10px;min-width:0;flex-shrink:0} .avatar{width:34px;height:34px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#08111e;font-weight:800;font-size:14px;flex-shrink:0} /* The email trims with "…" rather than pushing anything out. Hover the avatar for the full address. */ .user-email{font-size:13.5px;color:var(--muted);white-space:nowrap; max-width:190px;overflow:hidden;text-overflow:ellipsis;min-width:0} /* Shrink steps, measured against the NAV's own width (not the window). Room needed, worst case (admin, 8 items, long email): ~1330px. Each step below removes the next least useful thing. */ @container pfnav (max-width:1330px){ .user-email{display:none} } @container pfnav (max-width:1130px){ .navlinks a{padding:8px 9px;font-size:13.5px} } @container pfnav (max-width:1090px){ .navlinks{gap:1px}.navlinks a{padding:7px 7px;font-size:13px} } /* Phone: drop the wordmark, keep the mark. font-size:0 hides the text node without needing a around it in platform.js. The menu still scrolls, so navigation is never lost — it used to disappear completely below 900px. */ @container pfnav (max-width:760px){ .logo{font-size:0;gap:0} } /* Fallback for a browser with no @container support: the old window-based steps. They fire late, but the scrolling menu above already prevents the overlap, so this is only about looking tidy. */ @supports not (container-type: inline-size){ @media(max-width:1400px){.user-email{display:none}} @media(max-width:1130px){.navlinks a{padding:8px 9px;font-size:13.5px}} @media(max-width:1090px){.navlinks{gap:1px}.navlinks a{padding:7px 7px;font-size:13px}} @media(max-width:760px){.logo{font-size:0;gap:0}} } /* Summary cards + key/value rows — used by the dashboard, shared so any future page gets the same look without copying styles into its own