/* /Components/Account/Pages/Manage/EnableAuthenticator.razor.rz.scp.css */ .qr-panel[b-etdr48pc72] { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; } /* White plate, always: the code is black-on-white so scanners keep their contrast, and in dark mode a bare SVG would sit on a near-black page with no quiet zone the camera can see. */ .qr-code[b-etdr48pc72] { flex: 0 0 auto; width: 13.5rem; padding: .5rem; background: #fff; border: 1px solid var(--cosmyre-card-border); border-radius: var(--cosmyre-card-radius); } /* The SVG is injected as a MarkupString, so it never carries this component's scope attribute — ::deep is what lets the rule reach it. It ships a viewBox and no width/height by design. */ .qr-code[b-etdr48pc72] svg { display: block; width: 100%; height: auto; } .qr-key[b-etdr48pc72] { display: inline-block; font-size: 1rem; letter-spacing: .05em; user-select: all; } /* /Components/Account/Pages/Warp.razor.rz.scp.css */ /* Opaque overlay above the auth layout so the warp owns the whole viewport. */ .warp-shell[b-6x91ot6apu] { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; overflow: hidden; background: #000; } .warp-stars[b-6x91ot6apu] { position: absolute; inset: 0; pointer-events: none; } /* Each streak is a thin line anchored at the viewport centre, rotated to its own angle and thrown outward past the edges. Bright head, tail fading back toward the centre. */ .warp-star[b-6x91ot6apu] { position: absolute; left: 50%; top: 50%; width: 90px; border-radius: 999px; background: linear-gradient(90deg, transparent, #fff); transform-origin: left center; opacity: 0; animation: warp-fly-b-6x91ot6apu var(--dur) cubic-bezier(.45, 0, .85, .5) var(--delay) infinite; } .warp-star:nth-child(3n)[b-6x91ot6apu] { background: linear-gradient(90deg, transparent, #9db4ff); } .warp-star:nth-child(7n)[b-6x91ot6apu] { background: linear-gradient(90deg, transparent, #c9a6ff); } @keyframes warp-fly-b-6x91ot6apu { 0% { transform: rotate(var(--angle)) translateX(3vmax) scaleX(.15); opacity: 0; } 12% { opacity: .95; } 100% { transform: rotate(var(--angle)) translateX(85vmax) scaleX(3.5); opacity: 1; } } /* The logo sits in the calm eye of the warp, easing forward as if approached. */ .warp-logo[b-6x91ot6apu] { position: relative; z-index: 1; width: 340px; max-width: 70%; height: auto; animation: warp-approach-b-6x91ot6apu 2.2s ease-out forwards; } @keyframes warp-approach-b-6x91ot6apu { from { transform: scale(.85); opacity: .6; } to { transform: scale(1.08); opacity: 1; } } .warp-skip[b-6x91ot6apu] { position: relative; z-index: 1; color: #6c757d; font-size: .85rem; text-decoration: none; } .warp-skip:hover[b-6x91ot6apu] { color: #adb5bd; text-decoration: underline; } @media (prefers-reduced-motion: reduce) { .warp-star[b-6x91ot6apu], .warp-logo[b-6x91ot6apu] { animation: none; } .warp-logo[b-6x91ot6apu] { opacity: 1; } } /* /Components/Layout/AuthLayout.razor.rz.scp.css */ /* Black to match the logo's background exactly (#000000), so the PNG blends in. */ .auth-shell[b-ge9ppst932] { position: relative; overflow: hidden; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.75rem; padding: 2rem 1rem; background: #000; /* data-bs-theme=dark swaps the variables but only sets the base text colour, so apply it here for the scoped dark theme to take effect. */ color: var(--bs-body-color); } .auth-stars[b-ge9ppst932] { position: absolute; inset: 0; pointer-events: none; } .auth-star[b-ge9ppst932] { position: absolute; border-radius: 50%; background: #fff; opacity: .15; animation: auth-twinkle-b-ge9ppst932 3s ease-in-out infinite; } @keyframes auth-twinkle-b-ge9ppst932 { 0%, 100% { opacity: .15; transform: scale(1); } 50% { opacity: .9; transform: scale(1.4); } } .auth-logo[b-ge9ppst932] { position: relative; z-index: 1; width: 340px; max-width: 90%; height: auto; } .auth-body[b-ge9ppst932] { position: relative; z-index: 1; width: 100%; max-width: 24rem; } #blazor-error-ui[b-ge9ppst932] { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss[b-ge9ppst932] { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } /* /Components/Layout/CaseNavigator.razor.rz.scp.css */ /* Mission Console navigator. Fixed "space" palette in both light and dark app themes — it is a window into space, so it is deliberately not driven by the page theme. Viewport-fixed and a SIBLING of .sidebar (MainLayout renders it after
), docked over the empty strip that is the sidebar grid's third row (NavMenu's .sidebar-dock). The box is sized to that strip exactly — same --cosmyre-navdock-h, same width as .sidebar, no background of its own so the sidebar's gradient shows through — which is what makes it read as the sidebar's own last row while the tree above ends at the strip and never runs under the orb. Living outside .sidebar is also what keeps the popover clear of its overflow clip. The rail width and the below-641px visibility are in app.css, next to the sidebar collapse rules they mirror. */ .nav-dock[b-ho8201nfda] { position: fixed; left: 0; bottom: 0; width: 250px; /* tracks .sidebar in MainLayout.razor.css */ height: var(--cosmyre-navdock-h); z-index: 1040; display: flex; align-items: center; --navdock-pad: .75rem; padding: var(--navdock-pad); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; --sky-grad: radial-gradient(130% 130% at 18% 0%, #22306a 0%, #10173d 55%, #080b22 100%); --sky-border: rgba(150, 170, 255, .24); --sky-glow: 0 12px 40px rgba(30, 22, 80, .5), inset 0 1px 0 rgba(255, 255, 255, .06); --sky-text: #d6dcff; --sky-muted: #8f97c8; --sky-v: #a888f6; --sky-b: #5f8cf6; } /* ---- Orb trigger (resting) ---- */ .nav-orb-btn[b-ho8201nfda] { position: relative; width: 100%; display: inline-flex; align-items: center; gap: .6rem; padding: .4rem 1rem .4rem .4rem; border-radius: 999px; background: var(--sky-grad); border: 1px solid var(--sky-border); box-shadow: var(--sky-glow); cursor: pointer; } .nav-orb-btn:hover[b-ho8201nfda] { filter: brightness(1.06); } .nav-orb[b-ho8201nfda] { position: relative; width: 2.6rem; height: 2.6rem; flex: 0 0 2.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .nav-orb-ring[b-ho8201nfda] { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(150, 170, 255, .5); animation: navPulseRing-b-ho8201nfda 2.6s ease-out infinite; } .nav-orb-mark[b-ho8201nfda] { width: 1.7rem; height: 1.7rem; position: relative; z-index: 1; filter: drop-shadow(0 0 6px rgba(120, 110, 240, .7)); } .nav-orb-dot[b-ho8201nfda] { position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px #fff; animation: navOrbitDot-b-ho8201nfda 4s linear infinite; } .nav-orb-label[b-ho8201nfda] { flex: 1 1 auto; display: flex; flex-direction: column; text-align: left; line-height: 1.15; min-width: 0; } .nav-orb-eyebrow[b-ho8201nfda] { font-size: .58rem; letter-spacing: .13em; text-transform: uppercase; color: var(--sky-muted); } .nav-orb-current[b-ho8201nfda] { font-size: .9rem; font-weight: 600; color: var(--sky-text); max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-orb-caret[b-ho8201nfda] { display: flex; color: var(--sky-muted); font-size: .9rem; transition: transform .2s; } .nav-orb-caret.open[b-ho8201nfda] { transform: rotate(180deg); } /* ---- Console popover (opens upward) ---- */ .nav-console[b-ho8201nfda] { position: absolute; left: var(--navdock-pad); bottom: calc(100% - var(--navdock-pad) + 12px); width: 300px; border-radius: 16px; background: var(--sky-grad); border: 1px solid var(--sky-border); box-shadow: var(--sky-glow); padding: 14px 14px 12px; overflow: hidden; color: var(--sky-text); animation: navWarpIn-b-ho8201nfda .28s ease both; } .nav-stars[b-ho8201nfda] { position: absolute; inset: 0; pointer-events: none; } .nav-star[b-ho8201nfda] { position: absolute; border-radius: 50%; background: #e6ecff; box-shadow: 0 0 4px 1px rgba(190, 205, 255, .5); opacity: .5; animation-name: navTwk-b-ho8201nfda; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .nav-console-head[b-ho8201nfda] { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; } .nav-eyebrow[b-ho8201nfda] { font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sky-muted); } .nav-close[b-ho8201nfda] { width: 1.5rem; height: 1.5rem; border: none; background: rgba(255, 255, 255, .06); border-radius: 6px; color: var(--sky-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; } .nav-close:hover[b-ho8201nfda] { background: rgba(255, 255, 255, .12); } /* ---- Search bar (replaces the "you are here" text) ---- */ .nav-search[b-ho8201nfda] { position: relative; display: flex; align-items: center; gap: .45rem; padding: .45rem .6rem; border-radius: 9px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(150, 170, 255, .18); margin-bottom: .8rem; } .nav-search-icon[b-ho8201nfda] { display: flex; color: var(--sky-muted); font-size: .9rem; } .nav-search-input[b-ho8201nfda] { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--sky-text); font-size: .85rem; } .nav-search-input[b-ho8201nfda]::placeholder { color: var(--sky-muted); } .nav-search-clear[b-ho8201nfda] { border: none; background: transparent; color: var(--sky-muted); cursor: pointer; display: inline-flex; font-size: .7rem; padding: 0; } .nav-search-clear:hover[b-ho8201nfda] { color: var(--sky-text); } /* ---- Flight-log timeline (the relocated breadcrumb) ---- */ .nav-route[b-ho8201nfda] { position: relative; padding-left: 6px; margin-bottom: .2rem; } .nav-spine[b-ho8201nfda] { position: absolute; left: 12px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--sky-v), var(--sky-b)); } .nav-route-row[b-ho8201nfda] { position: relative; display: flex; align-items: center; gap: .6rem; width: 100%; padding: .4rem .5rem; margin-bottom: .1rem; border: none; border-radius: 9px; background: transparent; text-align: left; animation: navRisein-b-ho8201nfda .3s ease both; } .nav-route-row.clickable[b-ho8201nfda] { cursor: pointer; } .nav-route-row.clickable:hover[b-ho8201nfda] { background: rgba(255, 255, 255, .06); } .nav-route-row.current[b-ho8201nfda] { background: rgba(168, 131, 246, .14); } .nav-dot[b-ho8201nfda] { position: relative; z-index: 1; width: 14px; height: 14px; flex: 0 0 14px; border-radius: 50%; background: #4a5488; border: 2px solid #0f1638; } .nav-dot.current[b-ho8201nfda] { background: linear-gradient(135deg, #c3a8ff, #7ea0ff); box-shadow: 0 0 8px 2px rgba(150, 150, 255, .8); } .nav-route-icon[b-ho8201nfda] { display: flex; font-size: .9rem; color: var(--sky-muted); } .nav-route-row.current .nav-route-icon[b-ho8201nfda] { color: var(--sky-v); } .nav-route-label[b-ho8201nfda] { font-size: .85rem; font-weight: 500; color: var(--sky-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-route-row.current .nav-route-label[b-ho8201nfda] { font-weight: 700; color: #fff; } .nav-here[b-ho8201nfda] { margin-left: auto; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sky-v); } /* ---- Warp-to grid ---- */ .nav-warp-label[b-ho8201nfda] { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sky-muted); margin: .7rem 0 .5rem 6px; } .nav-warp-grid[b-ho8201nfda] { display: grid; grid-template-columns: repeat(2, 1fr); gap: .35rem; } .nav-chip[b-ho8201nfda] { display: flex; align-items: center; gap: .45rem; min-width: 0; padding: .4rem .5rem; border-radius: 8px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(150, 170, 255, .12); color: var(--sky-text); text-align: left; cursor: pointer; } .nav-chip:hover[b-ho8201nfda] { background: rgba(255, 255, 255, .08); } .nav-chip.active[b-ho8201nfda] { background: rgba(168, 131, 246, .16); border-color: rgba(168, 131, 246, .4); } .nav-chip-icon[b-ho8201nfda] { display: flex; font-size: .85rem; color: var(--sky-muted); } .nav-chip.active .nav-chip-icon[b-ho8201nfda] { color: var(--sky-v); } .nav-chip-label[b-ho8201nfda] { font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--sky-text); } .nav-chip.active .nav-chip-label[b-ho8201nfda] { color: #fff; } /* ---- Search results (replace the warp grid while typing) ---- */ .nav-results[b-ho8201nfda] { position: relative; max-height: 320px; overflow-y: auto; margin: 0 -2px; padding: 0 2px; } .nav-results-label[b-ho8201nfda] { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sky-muted); margin: .4rem 0 .35rem 6px; } .nav-result[b-ho8201nfda] { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .45rem .5rem; margin-bottom: .1rem; border: none; border-radius: 8px; background: transparent; color: var(--sky-text); text-align: left; cursor: pointer; } .nav-result:hover[b-ho8201nfda] { background: rgba(255, 255, 255, .06); } .nav-result-icon[b-ho8201nfda] { display: flex; flex: 0 0 auto; font-size: .9rem; color: var(--sky-muted); } .nav-result-label[b-ho8201nfda] { flex: 1; min-width: 0; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-result-pill[b-ho8201nfda] { flex: 0 0 auto; padding: .1rem .45rem; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: .68rem; color: var(--sky-muted); white-space: nowrap; } .nav-empty[b-ho8201nfda] { font-size: .8rem; color: var(--sky-muted); padding: .5rem .5rem 0; } /* ---- Keyframes (nav-prefixed to avoid colliding with global animations) ---- */ @keyframes navPulseRing-b-ho8201nfda { 0% { transform: scale(.55); opacity: .75; } 100% { transform: scale(2); opacity: 0; } } @keyframes navOrbitDot-b-ho8201nfda { from { transform: rotate(0) translateX(19px) rotate(0); } to { transform: rotate(360deg) translateX(19px) rotate(-360deg); } } @keyframes navWarpIn-b-ho8201nfda { 0% { opacity: 0; transform: translateY(12px) scale(.96); } 100% { opacity: 1; transform: none; } } @keyframes navRisein-b-ho8201nfda { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } } @keyframes navTwk-b-ho8201nfda { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.1); } } /* /Components/Layout/MainLayout.razor.rz.scp.css */ .page[b-dalpx7fg9q] { position: relative; display: flex; flex-direction: column; } main[b-dalpx7fg9q] { flex: 1; min-width: 0; display: flex; flex-direction: column; /* Containing block for .nav-throb below. */ position: relative; } /* The navigation throbber: covers the page body between a tab click and the new page landing. Inset from the top by the header's 3.75rem so the header, the section name and the user menu stay live and legible — you can still see where you are and where you are going. The sidebar is outside
entirely, so it is untouched. */ .nav-throb[b-dalpx7fg9q] { display: none; position: absolute; inset: 3.75rem 0 0 0; z-index: 1010; /* under the sticky header's 1020, over everything else */ align-items: center; justify-content: center; background: color-mix(in srgb, var(--cosmyre-page-bg) 72%, transparent); backdrop-filter: blur(1px); pointer-events: none; } /* Raised by js/tabs.js on the click and lowered once the new page has its own throbber up. Keyed on because that element survives enhanced navigation — see MainLayout.razor. */ :root.nav-busy .nav-throb[b-dalpx7fg9q] { display: flex; } /* Three rows: the brand/hamburger cell, the scrolling tree, then an empty strip at the foot (NavMenu's .sidebar-dock) that the viewport-fixed Navigator (CaseNavigator, a SIBLING of this element — see MainLayout.razor) is docked over, so the tree can never scroll underneath it. Declared here once rather than at each display site below so the three cannot drift; it is inert while display:none. The 1fr track is what sizes .sidebar-nav now — NavMenu.razor.css no longer measures 100vh against the header height. */ .sidebar[b-dalpx7fg9q] { background: linear-gradient(180deg, #141f4a 0%, #0b1330 100%); overflow: hidden; display: none; grid-template-rows: 3.75rem 1fr auto; } [data-bs-theme="dark"] .sidebar[b-dalpx7fg9q] { background: linear-gradient(180deg, #141f4a 0%, #090e26 100%); } /* The header-mounted toggle (a hidden checkbox in MainLayout) drives the sidebar. */ .sidebar-toggle-state[b-dalpx7fg9q] { display: none; } .sidebar-toggle-state:checked ~ .sidebar[b-dalpx7fg9q] { display: grid; position: fixed; top: 0; left: 0; width: 250px; height: 100vh; z-index: 1030; box-shadow: 0 0 30px rgba(0, 0, 0, .4); } /* ---- Top app-header ---- */ /* Three flex children: window chrome (hamburger fallback, Back), the centred title (.app-header-title — case name + section breadcrumb), then the chat + user controls. The title is the header's one elastic child and CENTRES its contents in the space between the two pinned groups, so a case name reads as the header's main subject rather than hugging the left edge. .app-header-right keeps margin-left:auto so it still pins right on a page with no title content. Height is fixed at 3.75rem and must stay so: app.css, NavMenu.razor.css, DocumentViewer.razor.css, Home.razor.css and CaseUserSelectionJob.razor.css all measure against it. */ .app-header[b-dalpx7fg9q] { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; justify-content: flex-start; gap: 1rem; height: 3.75rem; padding: 0 1.25rem; background-color: var(--bs-body-bg, #fff); border-bottom: 1px solid var(--bs-border-color, #e2e2e2); } .app-header-left[b-dalpx7fg9q], .app-header-right[b-dalpx7fg9q] { display: flex; align-items: center; gap: .75rem; min-width: 0; } /* Never shrinks: the case bubble and Back button are how you know where you are, and letting them squeeze crushed the bubble to an unreadable stub. */ .app-header-left[b-dalpx7fg9q] { flex: 0 0 auto; } /* The header's one elastic child: takes whatever room is left between the pinned window-chrome group and the pinned chat/account group, and centres its contents (the case name + breadcrumb) in it — the case name is now the header's main subject, not a left-hugging label. min-width: 0 is what lets .case-bubble ellipsise instead of forcing the header wide. */ .app-header-title[b-dalpx7fg9q] { display: flex; align-items: center; justify-content: center; gap: .5rem; flex: 1 1 auto; min-width: 0; } /* The quiet half of the breadcrumb — "what part of the case I'm in", after the name. Weight and colour drop to secondary, the same way a tab rail or a meta row marks anything as quiet; nothing in the app italicises, so this is not a font-style change. Fixed-size: the case NAME is what ellipsises when the header is tight (see .case-bubble below), not the section. */ .app-header-section[b-dalpx7fg9q] { flex: 0 0 auto; font-size: .9rem; font-weight: 400; color: var(--bs-secondary-color, #6b7280); white-space: nowrap; } /* The separator between name and section — replaces the old ::before hairline, which read as a divider between two unrelated things rather than a path through one. */ .app-header-crumb[b-dalpx7fg9q] { flex: 0 0 auto; font-size: .7rem; color: var(--bs-tertiary-color, #9aa1b4); } /* Below this the header has room for the case name or the section, not both — so the crumb gives way, and the sidebar's nested menu still names the section. Gated on there BEING a case name to fall back to: on an app-level page (/cases, /machines) the section is the header's only title, and hiding it unconditionally left the bar blank between the hamburger and the account menu. */ @media (max-width: 900px) { .app-header-title:has(.case-bubble) .app-header-section[b-dalpx7fg9q], .app-header-title:has(.case-bubble) .app-header-crumb[b-dalpx7fg9q] { display: none; } } /* Stays pinned right on pages that have no tab bar to take up the slack. */ .app-header-right[b-dalpx7fg9q] { flex: 0 0 auto; margin-left: auto; } .header-icon-btn[b-dalpx7fg9q] { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: .5rem; cursor: pointer; color: var(--bs-secondary-color, #555); font-size: 1.15rem; } .header-icon-btn:hover[b-dalpx7fg9q] { background-color: var(--bs-secondary-bg, #f0f0f0); } /* The case label — the header's main subject now, centred in .app-header-title. Deliberately NOT a pill: a 999px radius on a box holding a sentence-length case name reads as a lozenge with the text crammed into its flat middle. It is a flat label marked by a single bottom keyline — the same accent the tab rail uses, so "where I am" and "what section I am in" (the trailing .app-header-section) are marked the same way. flex: 0 1 auto + min-width: 0, no max-width cap: this is what makes the NAME the thing that ellipsises when the header is tight, rather than the fixed-size crumb/section beside it or the pinned Back/chat/account groups running off the edge. The case number is no longer shown here at all — it rides the title= tooltip, one hover away, rather than a chip next to the name. */ .case-bubble[b-dalpx7fg9q] { display: inline-flex; align-items: center; gap: .5rem; flex: 0 1 auto; min-width: 0; padding: .3rem .15rem .3rem; border-radius: 0; border-bottom: 2px solid var(--cosmyre-tab-accent, #845adf); background: none; color: inherit; font-size: .9rem; line-height: 1.2; } .case-bubble-name[b-dalpx7fg9q] { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The icon inherited white from the pill; now it carries the accent that marks the label. */ .case-bubble[b-dalpx7fg9q] .case-bubble-icon { color: var(--cosmyre-tab-accent, #845adf); flex-shrink: 0; } .back-btn[b-dalpx7fg9q] { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; } .content[b-dalpx7fg9q] { flex: 1; padding-top: 1.1rem; } @media (min-width: 641px) { .page[b-dalpx7fg9q] { flex-direction: row; } .sidebar[b-dalpx7fg9q] { display: grid; width: 250px; height: 100vh; position: sticky; top: 0; flex: 0 0 250px; } /* On wide screens checked never means the mobile overlay. */ .sidebar-toggle-state:checked ~ .sidebar[b-dalpx7fg9q] { display: grid; position: sticky; top: 0; width: 250px; height: 100vh; z-index: auto; box-shadow: none; } /* Icon-only rail: the toggle's collapsed state on normal pages; the DEFAULT on the document view, where .rail-default inverts the checkbox so one click expands. */ .page:not(.rail-default) > .sidebar-toggle-state:checked ~ .sidebar[b-dalpx7fg9q], .page.rail-default > .sidebar-toggle-state:not(:checked) ~ .sidebar[b-dalpx7fg9q] { width: 3.6rem; flex: 0 0 3.6rem; } .page:not(.rail-default) > .sidebar-toggle-state:checked ~ .sidebar[b-dalpx7fg9q] .brand-link span, .page.rail-default > .sidebar-toggle-state:not(:checked) ~ .sidebar[b-dalpx7fg9q] .brand-link span, .page:not(.rail-default) > .sidebar-toggle-state:checked ~ .sidebar[b-dalpx7fg9q] .sidebar-section-title, .page.rail-default > .sidebar-toggle-state:not(:checked) ~ .sidebar[b-dalpx7fg9q] .sidebar-section-title, .page:not(.rail-default) > .sidebar-toggle-state:checked ~ .sidebar[b-dalpx7fg9q] .section-link span, .page.rail-default > .sidebar-toggle-state:not(:checked) ~ .sidebar[b-dalpx7fg9q] .section-link span { display: none; } .page:not(.rail-default) > .sidebar-toggle-state:checked ~ .sidebar[b-dalpx7fg9q] .sidebar-brand, .page.rail-default > .sidebar-toggle-state:not(:checked) ~ .sidebar[b-dalpx7fg9q] .sidebar-brand { padding: 0; justify-content: center; } /* Collapsed, the rail's top cell is the toggle alone. The moon mark and the toggle will not both sit honestly in 3.6rem, and in the one state where space is scarcest the control that gets you out of it beats the decoration — the mark returns the moment you expand. */ .page:not(.rail-default) > .sidebar-toggle-state:checked ~ .sidebar[b-dalpx7fg9q] .brand-link, .page.rail-default > .sidebar-toggle-state:not(:checked) ~ .sidebar[b-dalpx7fg9q] .brand-link { display: none; } .page:not(.rail-default) > .sidebar-toggle-state:checked ~ .sidebar[b-dalpx7fg9q] .sidebar-menu-toggle, .page.rail-default > .sidebar-toggle-state:not(:checked) ~ .sidebar[b-dalpx7fg9q] .sidebar-menu-toggle { margin-left: 0; width: 2.4rem; height: 2.4rem; } /* The sidebar is permanent from here up, so its own toggle is always reachable and the header copy is redundant. Below this breakpoint .sidebar is display:none and the header button is the only way in — which is why it exists at all. */ .header-menu-fallback[b-dalpx7fg9q] { display: none; } .page:not(.rail-default) > .sidebar-toggle-state:checked ~ .sidebar[b-dalpx7fg9q] .sidebar-nav, .page.rail-default > .sidebar-toggle-state:not(:checked) ~ .sidebar[b-dalpx7fg9q] .sidebar-nav { padding: 1rem .3rem; } .page:not(.rail-default) > .sidebar-toggle-state:checked ~ .sidebar[b-dalpx7fg9q] .section-link, .page.rail-default > .sidebar-toggle-state:not(:checked) ~ .sidebar[b-dalpx7fg9q] .section-link { justify-content: center; padding: .55rem 0; } /* The nested tab group goes entirely — hiding only its labels would leave a column of orphan icons with nothing to say which parent they belong to. */ .page:not(.rail-default) > .sidebar-toggle-state:checked ~ .sidebar[b-dalpx7fg9q] .subsection-menu, .page.rail-default > .sidebar-toggle-state:not(:checked) ~ .sidebar[b-dalpx7fg9q] .subsection-menu { display: none; } } #blazor-error-ui[b-dalpx7fg9q] { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss[b-dalpx7fg9q] { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } /* ---- "Viewing as " chip ---- The escape hatch out of a SquadViewOverride impersonation. It is loud on purpose: while it is up, nothing on screen is what your own account would see, and every other header control is quiet chrome. Tertiary (the app's one non-purple accent) marks it as scaffolding rather than a feature, and both tokens flip with data-bs-theme so no dark override is needed. */ .view-as-chip[b-dalpx7fg9q] { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .5rem; border: 1px solid var(--cosmyre-tertiary); border-radius: 999px; background: rgba(var(--cosmyre-tertiary-rgb), .12); color: var(--cosmyre-tertiary); font-size: .75rem; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; } .view-as-chip:hover[b-dalpx7fg9q], .view-as-chip:focus-visible[b-dalpx7fg9q] { background: var(--cosmyre-tertiary); color: var(--cosmyre-tertiary-fg); text-decoration: none; } /* The label is the first thing a narrow header should drop — the icons alone still read as "something is overridden here", and the tooltip carries the rest. */ @media (max-width: 900px) { .view-as-chip-text[b-dalpx7fg9q] { display: none; } } /* /Components/Layout/NavMenu.razor.rz.scp.css */ /* Soft violet corner glow behind the sidebar content (the navy gradient itself is on .sidebar in MainLayout.razor.css). Stars live only in the Navigator's flight log, not here. */ .sidebar-glow[b-n59x3h2fnn] { position: absolute; top: -40px; left: -30px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(168, 131, 246, .32), transparent 70%); filter: blur(6px); pointer-events: none; z-index: 0; } .sidebar-brand[b-n59x3h2fnn] { position: relative; z-index: 1; height: 3.75rem; display: flex; align-items: center; padding: 0 1.25rem; background-color: rgba(0, 0, 0, .25); border-bottom: 1px solid rgba(255, 255, 255, .08); } .brand-link[b-n59x3h2fnn] { display: flex; align-items: center; gap: .55rem; color: #fff; font-size: 1.1rem; font-weight: 600; text-decoration: none; white-space: nowrap; } .brand-mark[b-n59x3h2fnn] { height: 1.75rem; width: auto; flex-shrink: 0; } /* Menu toggle, pushed to the sidebar's right edge so the brand row reads [moon] COSMYRE ......... [toggle] instead of leaving a dead gap after the label. */ .sidebar-menu-toggle[b-n59x3h2fnn] { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2rem; height: 2rem; border-radius: .4rem; cursor: pointer; /* Fallback only — see the fill below. Kept a real colour rather than transparent so a missing paint server degrades to a visible icon instead of an invisible one. */ color: #0045BD; } /* ::deep is required, not decorative: the comes from the Icon component and carries ITS scope attribute, so an ordinary descendant selector compiled with NavMenu's scope would never match it. Targeting the element directly is also necessary — `fill` is inherited, but the fill="currentColor" presentation attribute Icon puts on the beats an inherited value. The trailing colour is SVG's own fallback paint if the gradient id cannot be resolved. */ .sidebar-menu-toggle[b-n59x3h2fnn] svg { width: 1.35rem; height: 1.35rem; fill: url(#cosmyre-moon-grad) #0045BD; } .sidebar-menu-toggle:hover[b-n59x3h2fnn] { background: rgba(255, 255, 255, .08); } .sidebar-nav[b-n59x3h2fnn] { position: relative; z-index: 1; padding: 1rem .75rem; min-height: 0; overflow-y: auto; } /* Row 3: the strip the viewport-fixed Navigator is docked over. Empty — the orb itself is a sibling of .sidebar (MainLayout renders after
) whose fixed box is sized to exactly this strip, so it reads as the sidebar's own last row. */ .sidebar-dock[b-n59x3h2fnn] { height: var(--cosmyre-navdock-h); } /* ---- Primary menu (app-level links outside a case, case sections inside one) ---- */ .sidebar-section-title[b-n59x3h2fnn] { text-transform: uppercase; letter-spacing: .05em; font-size: .7rem; color: #8f9bb3; padding: 0 .5rem .35rem; } .section-menu[b-n59x3h2fnn] { list-style: none; margin: 0; padding: 0; } .section-menu li[b-n59x3h2fnn] { margin-bottom: .25rem; } .section-menu[b-n59x3h2fnn] .section-link { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; color: #8f9bb3; text-decoration: none; border-radius: 6px; font-size: .92rem; } .section-menu[b-n59x3h2fnn] .section-icon { font-size: 1.05rem; flex-shrink: 0; } .section-menu[b-n59x3h2fnn] .section-link:hover { background-color: rgba(255, 255, 255, .05); color: #fff; } .section-menu[b-n59x3h2fnn] .section-link.active { background-color: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 2px 0 0 var(--cosmyre-accent); } /* ---- Nested tab group ---- The TabRegistry group for the current route, indented under its parent item. Only the group you are in is expanded (Group is a single URL-derived value, so at most one menu renders); the app-header bar shows the same items from the same resolution. */ .subsection-menu[b-n59x3h2fnn] { position: relative; list-style: none; margin: .2rem 0 .45rem; padding: 0 0 0 1.65rem; /* clears the parent's 1.05rem icon + .6rem gap */ } /* Faint rail tying the children to their parent. */ .subsection-menu[b-n59x3h2fnn]::before { content: ""; position: absolute; left: .95rem; top: .15rem; bottom: .15rem; width: 1px; background: rgba(255, 255, 255, .1); } .subsection-menu li[b-n59x3h2fnn] { margin-bottom: .1rem; } .subsection-link[b-n59x3h2fnn] { display: flex; align-items: center; gap: .5rem; padding: .32rem .6rem; color: #7d879c; text-decoration: none; border-radius: 5px; font-size: .82rem; /* one step down from .section-link */ } .subsection-link:hover[b-n59x3h2fnn] { background-color: rgba(255, 255, 255, .05); color: #fff; } /* Same violet keyline as an active section link, so both levels read as one system. */ .subsection-link.active[b-n59x3h2fnn] { background-color: rgba(255, 255, 255, .06); color: #fff; box-shadow: inset 2px 0 0 var(--cosmyre-accent); } .subsection-link[b-n59x3h2fnn] .subsection-icon { font-size: .9rem; flex-shrink: 0; } /* /Components/Layout/ReconnectModal.razor.rz.scp.css */ .components-reconnect-first-attempt-visible[b-fgns2l8l2h], .components-reconnect-repeated-attempt-visible[b-fgns2l8l2h], .components-reconnect-failed-visible[b-fgns2l8l2h], .components-pause-visible[b-fgns2l8l2h], .components-resume-failed-visible[b-fgns2l8l2h], .components-rejoining-animation[b-fgns2l8l2h] { display: none; } #components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-fgns2l8l2h], #components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-fgns2l8l2h], #components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-fgns2l8l2h], #components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-fgns2l8l2h], #components-reconnect-modal.components-reconnect-retrying[b-fgns2l8l2h], #components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-fgns2l8l2h], #components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-fgns2l8l2h], #components-reconnect-modal.components-reconnect-failed[b-fgns2l8l2h], #components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-fgns2l8l2h] { display: block; } #components-reconnect-modal[b-fgns2l8l2h] { background-color: white; width: 20rem; margin: 20vh auto; padding: 2rem; border: 0; border-radius: 0.5rem; box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3); opacity: 0; transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete; animation: components-reconnect-modal-fadeOutOpacity-b-fgns2l8l2h 0.5s both; &[open] { animation: components-reconnect-modal-slideUp-b-fgns2l8l2h 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-fgns2l8l2h 0.5s ease-in-out 0.3s; animation-fill-mode: both; } } #components-reconnect-modal[b-fgns2l8l2h]::backdrop { background-color: rgba(0, 0, 0, 0.4); animation: components-reconnect-modal-fadeInOpacity-b-fgns2l8l2h 0.5s ease-in-out; opacity: 1; } @keyframes components-reconnect-modal-slideUp-b-fgns2l8l2h { 0% { transform: translateY(30px) scale(0.95); } 100% { transform: translateY(0); } } @keyframes components-reconnect-modal-fadeInOpacity-b-fgns2l8l2h { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes components-reconnect-modal-fadeOutOpacity-b-fgns2l8l2h { 0% { opacity: 1; } 100% { opacity: 0; } } .components-reconnect-container[b-fgns2l8l2h] { display: flex; flex-direction: column; align-items: center; gap: 1rem; } #components-reconnect-modal p[b-fgns2l8l2h] { margin: 0; text-align: center; } #components-reconnect-modal button[b-fgns2l8l2h] { border: 0; background-color: #6b9ed2; color: white; padding: 4px 24px; border-radius: 4px; } #components-reconnect-modal button:hover[b-fgns2l8l2h] { background-color: #3b6ea2; } #components-reconnect-modal button:active[b-fgns2l8l2h] { background-color: #6b9ed2; } .components-rejoining-animation[b-fgns2l8l2h] { position: relative; width: 80px; height: 80px; } .components-rejoining-animation div[b-fgns2l8l2h] { position: absolute; border: 3px solid #0087ff; opacity: 1; border-radius: 50%; animation: components-rejoining-animation-b-fgns2l8l2h 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite; } .components-rejoining-animation div:nth-child(2)[b-fgns2l8l2h] { animation-delay: -0.5s; } @keyframes components-rejoining-animation-b-fgns2l8l2h { 0% { top: 40px; left: 40px; width: 0; height: 0; opacity: 0; } 4.9% { top: 40px; left: 40px; width: 0; height: 0; opacity: 0; } 5% { top: 40px; left: 40px; width: 0; height: 0; opacity: 1; } 100% { top: 0px; left: 0px; width: 80px; height: 80px; opacity: 0; } } /* /Components/Pages/CargoBay.razor.rz.scp.css */ /* Cargo Bay: a two-pane blob manager. Left = drop zone + transfer queue, right = Azurite browser. Same pane-container contract as .search-workspace / .term-workspace (app.css "fill-and-scroll"): flex: 1 1 auto + min-height: 0 divides the page-fill's height between the two fill-cards, and the panes touch across with a hairline down rather than a 1rem gutter (see CLAUDE.md → "Card panes"; .cargo-panes is already in app.css's detached-seam lists). */ .cargo-panes[b-bq4pzsjon0] { flex: 1 1 auto; min-height: 0; align-items: stretch; column-gap: 0; row-gap: 2px; } .cargo-transfer[b-bq4pzsjon0] { flex: 0 0 320px; width: 320px; } /* The drop zone stays its natural size; the transfer queue below it is what scrolls (.fill-card-body in the markup). */ .cargo-dropzone[b-bq4pzsjon0] { flex-shrink: 0; } /* min-width:0 lets the browser pane shrink so its wide table can scroll instead of overflowing. */ .cargo-browser[b-bq4pzsjon0] { min-width: 0; } /* The real