/* Side global navigation (#global-nav-side). * * Everything global-nav related lives in THIS file. Every selector is * namespaced: #global-nav-side, .gns-*, body[data-global-nav], * body.gns-collapsed. * * The rail is built to work exactly like the workspaces app's * .workspace-tabs column: a TRANSPARENT floating icon column, * SUPERIMPOSED on top of the app canvas (no panel, no border, no * content displacement). #app-space / #portal stay at left: 0; instead * the app content clears the rail the same way workspace content * clears its tabs column: * - sidebars get the workspace-style left padding * (--sidebar-padding with the 50px rail inset); * - document bodies get --document-body-left-distance, consumed by * the stock .document-body rules in all.css. * * Mode is a body state: , rendered * server-side so there is no flash of the wrong nav. The rail is * expanded (--workspace-tabs-home-width) on Home only: whenever an app * is on screen (#app-space.state-on, matched via :has, plus the * body.gns-collapsed class KikaronGlobalNav mirrors) it collapses to * the 50px icon column — desktop only; under 768px the bottom tab bar * takes over. */ /* Registered as a real so app-to-app switches interpolate — * the collapsed rail's wash then fades between app colours instead of * snapping (the var is stamped on by KikaronGlobalNav). */ @property --gns-active-app-colour { syntax: ''; inherits: true; initial-value: transparent; } :root { /* Favourites runs as a rail app but has no App registry row, so its * colour isn't in the generated apps.css — give it the accent. */ --app-colour-favourites: var(--colour-accent, #ea6c1a); /* 20px narrower than the workspace-tabs column: the expanded rail's * labels don't need the full 250px, and the dashboard feed (which * clears the rail via this var) gets the reclaimed width. */ --gns-width: calc(var(--workspace-tabs-home-width, 250px) - 20px); --gns-width-collapsed: 50px; --gns-mobile-height: 64px; /* Corner radius of the active-app tile and the Home brandmark tile on * the mobile rail — shared so the two stay visually identical. */ --gns-mobile-active-tile-radius: 13px; /* same x/y inset the workspace-tabs column uses */ --gns-left: calc(var(--sidebar-margin-left, 15px) + 0.5 * var(--sidebar-padding-right, 25px)); --gns-top: calc(var(--sidebar-margin-top, 15px) + 0.5 * var(--sidebar-padding-top, 25px)); --gns-background: #fff; --gns-hairline: var(--colour-separation-lines, #eae2d6); --gns-ink: var(--colour-text, #1a1a1a); --gns-muted: var(--colour-discreet, #6b6560); --gns-accent: var(--colour-accent, #ea6c1a); /* One speed/curve for every rail transition (width morph, logo, labels, * fades, colour washes) so expand/collapse and all their parts move * together. */ --gns-transition: var(--base-animation-duration, 0.3s); /* ONE SQUARE, ONE CORNER for every icon on the global nav — the launcher * tile, a pinned app's tile, the active app's filled tile, the search * launcher and the hover wash that lands behind any of them. They were * each carrying their own 36px/6px pair, so the hover square came out a * different size and a different corner from the tile it sat under * (Daniel, 2026-08-19). The corner follows the brand's middle radius, * like every other tile-shaped thing on the header row * (--kal-corner-radius, themes/usugami/style/all.css). The rail's own * icons are 38px — a rail measure, not a header one — but they take the * same corner. */ --kik-global-nav-icon-size: 36px; /* The CORNER moved to :root (libraries/quaive/settings/artefacts/ variables.css, 2026-08-22): it is a shape the whole product shares, and deriving it from --kal-corner-radius — which only usugami declares — let it drift between themes. Only the size is a rail measurement and stays here. */ } /* ------------------------------------------------------------------ */ /* The rail itself — workspace-tabs look: transparent floating column */ /* ------------------------------------------------------------------ */ #global-nav-side { display: none; position: fixed; top: var(--gns-top); bottom: calc(var(--sidebar-margin-bottom, 15px) + 0.5 * var(--sidebar-padding-bottom, 25px)); left: var(--gns-left); width: var(--gns-width); /* transparent while expanded; the collapsed state paints it white */ border: 1px transparent solid; border-radius: calc(0.7 * var(--border-radii, 8px)); padding-top: 22px; box-sizing: border-box; flex-direction: column; background: transparent; /* zero-size, zero-alpha shadow so the collapsed state's * --default-box-shadow fades in instead of popping */ box-shadow: 0 0 0 rgba(0, 0, 0, 0); color: var(--gns-ink); z-index: 999; /* above #portal (10) / #app-space (11) and any sidebar chrome, below modals/tooltips */ transition: all var(--gns-transition); will-change: width; overflow-x: hidden; /* No scrollbar in the vertical rail: anything that doesn't fit moves into * the "More apps" candy box instead (global-nav-side.js * syncAppsOverflow / syncSpacesOverflow measure and mark). A scrolling * rail hides its own contents behind a gesture — the overflow menu is the * affordance, so clip rather than scroll. */ overflow-y: hidden; } /* One and Pro get the SAME bottom bar on phones (Daniel, 2026-08-11). * * Compact mode's own rail (cloud_nav_rail.html) is desktop-only, so below * 769px those faces had no rail at all — the app carousel used to stand in * for it, and that is gone. The markup needs nothing: global_nav_side.html is * already included on every authenticated full page regardless of mode (it is * this `display` rule, and nothing else, that keeps it off the other faces). * So show it here, and the ≤768px bottom-bar section at the foot of this file * matches [data-global-nav="compact"] alongside "side" for the styling. * * Above the breakpoint compact keeps its own rail and this stays hidden. */ @media only screen and (max-width: 768px) { body[data-global-nav="compact"] #global-nav-side { display: flex; } } /* Header: platform identity + the user (personal-menu trigger). * interpolate-size lets the auto height animate to the collapsed 31px. */ #global-nav-side .gns-header { flex: 0 0 auto; height: 120px; padding: 0px 0 6px 10px; interpolate-size: allow-keywords; transition: all var(--gns-transition); } /* Platform logo: full wordmark expanded, brandmark (swirl) collapsed — * the two images sit stacked and crossfade with the width animation */ #global-nav-side .gns-platform-logo { display: block; position: relative; height: 67px; cursor: default; /* The logo tile box morphs between the full and collapsed states — * transition everything on the same rail speed so it eases instead of * snapping while the wordmark img morphs. */ transition: all var(--gns-transition); } #global-nav-side .gns-platform-logo img { display: block; /* On the base (not just the collapsed state) so the morph uses the same * origin collapsing and expanding — keeps the two directions symmetric. */ transform-origin: left; transition: all var(--gns-transition); } #global-nav-side .gns-logo-full { /* Rail width minus the header's 10px left padding, so the wordmark * tracks --gns-width instead of baking in the old 250px rail. */ width: calc(var(--gns-width) - 10px); } #global-nav-side .gns-logo-mark { position: absolute; top: 0; left: 0; height: 28px; width: 28px; opacity: 0; } #global-nav-side .gns-platform-name { display: block; font-weight: 700; font-size: 1.1em; color: var(--gns-ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all var(--gns-transition); } #global-nav-side .gns-hub { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; margin-left: -8px; padding: 6px 8px; border-radius: 12px; box-sizing: border-box; max-height: 56px; overflow: hidden; min-width: 0; text-decoration: none; cursor: default; /* Collapse via opacity (linear fade) + max-height (linear clip) rather * than zoom: scaling to ~0 reads as "gone" almost instantly one way but * grows in gradually the other, so collapse and expand looked * lopsided. A fade + clip looks the same in both directions. */ transition: all var(--gns-transition); } /* Hover wash + rounded corners matching the app rows (.gns-link:hover). */ @media (hover: hover) { #global-nav-side .gns-hub:hover { background: color-mix(in srgb, var(--gns-ink) 5%, transparent); } } body[dir="rtl"] #global-nav-side .gns-hub { margin-left: 0; margin-right: -8px; } /* The small round avatar left of the name — stock .pat-avatar shape * (50% radius, initials fallback), just sized down */ #global-nav-side .gns-user-avatar { flex: 0 0 auto; width: 29px; height: 29px; margin-left: -2px; margin-right: 1px; padding: 0; font-size: 0.68em; font-weight: 700; } /* Name stacked above the current-hub byline, to the right of the avatar. */ #global-nav-side .gns-hub-text { display: flex; flex-direction: column; min-width: 0; transition: all var(--gns-transition); } /* Name + down-arrow on one line; the arrow (the personal-menu dropdown * affordance) sits right after the name and never gets clipped. */ #global-nav-side .gns-hub-name { display: flex; align-items: center; min-width: 0; font-size: 0.85em; line-height: 1.2; color: var(--gns-ink); transition: all var(--gns-transition); } #global-nav-side .gns-hub-name-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #global-nav-side .gns-hub-name::after { flex: 0 0 auto; font-family: fontello; content: var(--glyph-down-open); font-size: 0.8em; color: var(--gns-muted); margin-left: 4px; transition: all var(--gns-transition); } /* The hub the user is currently in — a small muted byline under the name. */ #global-nav-side .gns-hub-byline { font-size: 0.7em; line-height: 1.2; color: var(--gns-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all var(--gns-transition); } /* Item lists */ #global-nav-side ul { list-style: none; margin: 0; padding: 0; } #global-nav-side .gns-apps { flex: 0 0 auto; } #global-nav-side .gns-spaces { /* Directly BELOW the apps, not parked at the bottom: the spaces are the * apps' near neighbours — you move between an app and a space constantly — * and a column-length gap between them made them read as unrelated * furniture. A dim hairline above keeps the two groups distinct. */ /* 0 0 auto, NOT 0 1 auto: this section is never silently squeezed. It * either shows its spaces at natural height or collapses wholesale to the * single Team spaces icon (.gns-spaces-overflow) — shrinking just clipped * the list against the rail's hidden overflow, hiding spaces with no * affordance to reach them. The collapse order lives in * global-nav-side.js refresh(): spaces first, then apps into the candy * box. */ flex: 0 0 auto; margin-top: 0; /* No padding-top: the rule below owns the air above the first space, so * the open-apps group has the same 8px under it as the separator above it * gives it. */ padding: 0 0 8px; min-height: 0; /* Clipped, not scrolled — see the rail's own overflow note above. Too many * spaces collapse to the single Team spaces icon (.gns-spaces-overflow). */ overflow-y: hidden; } /* The rule between the apps and the spaces — the SAME line the apps list * draws between its pinned and its open rows (.gns-apps-separator): 2px at * 10% ink, inset 5px to the tile edge, 8px of air either side. Drawn here * rather than as a border on the section so the inset matches; hidden when * there are no spaces, since a rule under the last app with nothing below it * reads as a mistake (same reasoning as the separator's own :has gate). */ #global-nav-side .gns-spaces::before { content: ""; display: block; height: 0; margin: 8px 5px; border-top: 2px solid color-mix(in srgb, var(--gns-ink) 10%, transparent); } #global-nav-side .gns-spaces:not(:has(.gns-item.gns-space))::before { display: none; } /* The app-launcher (candy-box) entry, between Team spaces and the personal * menu. It carries the margin-top:auto that .gns-spaces used to — the spaces * now sit straight under the apps, so this row and the personal menu are what * hold the bottom of the column; never squeezed, for the same reason * .gns-spaces isn't. (The list is .gns-app-launcher; the unqualified * .gns-launcher is the launcher CONTROL inside every app row — see the close * swap below.) */ #global-nav-side .gns-app-launcher { flex: 0 0 auto; margin-top: auto; } /* Mobile bottom bar: the launcher already lives there as the "More apps" * popover, so this desktop row stays out of the bar (same treatment the * personal menu gets). */ @media only screen and (max-width: 768px) { body:is([data-global-nav="side"], [data-global-nav="compact"]) #global-nav-side .gns-app-launcher { /* Both faces: the bar has its own launcher control at the right rim, and the rail's separate app-launcher entry is a SECOND waffle beside it (seen on Pro, 2026-08-12 — One's app set happens not to carry the entry, which is why it only showed there). */ display: none; } } /* Personal cloud — the row between the app launcher and the personal menu. * No margin-top:auto of its own: the launcher above already holds the bottom * group down, and this list rides along under it. Never squeezed, same as its * two neighbours. */ #global-nav-side .gns-personal-cloud { flex: 0 0 auto; } /* Mobile bottom bar: out of the bar, like the launcher and the personal menu — * the More popover carries this entry there. */ @media only screen and (max-width: 768px) { body:is([data-global-nav="side"], [data-global-nav="compact"]) #global-nav-side .gns-personal-cloud { display: none; } } /* Close-on-hover for the ACTIVE app — the pro/One rail's behaviour * (cloud-nav-rail.css). Every app row carries a third control alongside its * two launcher flavours; it hides until the generated :has() rules * (global_nav_side.html) swap it in for the launcher while its app is the * on-screen one. The compound .gns-link.gns-close is deliberate: the plain * .gns-close form ties with .gns-link's own display and would lose on source * order, so the control would never hide. */ /* The candy-box entry (global_nav_side.html) is the COMPACT MOBILE BAR's * alone — the desktop rail has the Apps launcher row, and hub's bar has its * More popover. Revealed in the ≤768px block at the foot of this file. */ #global-nav-side .gns-candy-item { display: none; } #global-nav-side .gns-link.gns-close { display: none; } /* The close control carries TWO glyphs: the app icon (default) and the × * (.gns-close-glyph, a fontello icon-cancel span). Hover swaps them, so the * active app's row reads "this closes the app" before the click. No hover * media query around the base hide: on touch a tap on the active row closes * too, and the × simply never previews. */ #global-nav-side .gns-close .gns-close-glyph { display: none; font-size: 15px; color: #fff; } #global-nav-side .gns-close .gns-close-glyph::before { margin: 0; width: auto; } /* The × is white, so the tile under it must be the app's colour whenever the * close control is on screen. The .current painting further up can't do it: it * keys off a SERVER snapshot (prefs_active_app), while this control is swapped * in by live :has() state — after a pane switch the two disagreed and the × * painted white on the rail's own background, i.e. invisible. The control only * ever displays while its app is the active one, so painting it unconditionally * here is the same statement, made where it can't drift. --app-colour is * stamped inline per row. */ #global-nav-side .gns-close .gns-icon.app-icon { background-color: var(--app-colour, var(--gns-accent)); } #global-nav-side .gns-close .gns-icon.app-icon * { fill: #fff !important; } #global-nav-side .gns-close .gns-icon.rail-icon * { fill: none !important; stroke: #fff !important; } @media (hover: hover) { #global-nav-side .gns-close:hover .gns-icon:not(.gns-close-glyph) { display: none; } #global-nav-side .gns-close:hover .gns-close-glyph { display: inline-flex; align-items: center; justify-content: center; } } #global-nav-side .gns-section-title { display: none; margin: 4px 4px 6px; font-size: 0.7em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gns-muted); transition: all var(--gns-transition); } /* One nav entry — workspace-tabs row metrics: 50px rows, 42px icon * block, bold label */ #global-nav-side .gns-link { display: flex; align-items: center; gap: 4px; /* 2px on the left in BOTH rail states, which is what the collapsed rail * needs to centre a 44px slot in its 48px content box. The expanded rail * doesn't need it for anything — it is here so the icon does not move at * all between the two states. Carried on the row rather than the icon so * the hover wash, which paints the padding box, keeps the full row width. */ padding: 0 10px 0 2px; height: 44px; border-radius: 12px; box-sizing: border-box; color: #6B6560; font-weight: bold; text-decoration: none; white-space: nowrap; cursor: default; position: relative; transition: all var(--gns-transition); } @media (hover: hover) { #global-nav-side .gns-link:hover { background: color-mix(in srgb, var(--gns-ink) 5%, transparent); } } /* The active item's link has no background at all — its state shows * through the coloured icon tile and accent label, not a row wash */ @media (hover: hover) { #global-nav-side .gns-item.current > .gns-link:hover, #global-nav-side .gns-link[aria-current="page"]:hover { background: transparent; } /* …except a SPACE row, which keeps the wash even when it is the open one. * An app's active state is carried by a filled tile across the whole row's * height, so a wash on top adds nothing; a space's is a 38px filled circle * with a long row beside it, and dropping the wash left the open space as * the one row on the rail that didn't react to the pointer at all. In the * collapsed rail the rail-wide "no wash" rule still wins (2 ids) and the * hover square takes over. */ #global-nav-side .gns-item.gns-space.current > .gns-link:hover { background: color-mix(in srgb, var(--gns-ink) 5%, transparent); } } #global-nav-side .gns-item.current > .gns-link, #global-nav-side .gns-link[aria-current="page"] { color: var(--gns-accent); font-weight: 600; } #global-nav-side .gns-icon { flex: 0 0 auto; width: 38px; height: 38px; margin: 3px; display: inline-flex; align-items: center; justify-content: center; } #global-nav-side .gns-icon svg { width: 100%; height: 100%; } /* App icons: borderless transparent tiles, every SVG shape painted in * the muted ink (#6B6560), matching the label colour. !important beats * fill attributes baked into the source SVGs. */ #global-nav-side .gns-icon.app-icon { border: none; box-shadow: none; border-radius: var(--kik-global-nav-icon-radius); background-color: transparent; box-sizing: border-box; width: 38px; height: 38px; padding: 7px; overflow: hidden; transition: all var(--gns-transition); } #global-nav-side .gns-icon.app-icon * { fill: #6B6560 !important; } #global-nav-side .gns-icon.app-icon svg #dots { fill: transparent !important; } /* Active app: icon tile fills with the app's own colour, glyph in * white — the 42px rounded square the workspace tabs paint behind * their active icon */ #global-nav-side .gns-item.current .gns-icon.app-icon, #global-nav-side .gns-link[aria-current="page"] .gns-icon.app-icon { background-color: var(--app-colour, var(--gns-accent)); } #global-nav-side .gns-item.current .gns-icon.app-icon *, #global-nav-side .gns-link[aria-current="page"] .gns-icon.app-icon * { fill: #fff !important; } #global-nav-side .gns-item.current .gns-icon.app-icon svg #dots, #global-nav-side .gns-link[aria-current="page"] .gns-icon.app-icon svg #dots { fill: transparent !important; } /* Rail line icons (.rail-icon — an app icon the is_stroke_icon filter * sniffed as an outline; there is no separate rail-icons set): the * glyph is an outline, so the lines are COLOURED via stroke and the fill * stays empty. Each rule mirrors the filled-icon rule above at equal * specificity, later in source, so it wins for .rail-icon elements while * leaving fallback (filled) app icons on their fill rules. */ #global-nav-side .gns-icon.rail-icon * { fill: none !important; stroke: #6B6560 !important; } #global-nav-side .gns-icon.rail-icon svg #dots { fill: transparent !important; stroke: transparent !important; } /* Active app, line icons: the glyph rides the app-colour tile (from the * .app-icon rule above) with a white outline — the coloured-outline * treatment is reserved for the tooltip menu. */ #global-nav-side .gns-item.current .gns-icon.rail-icon *, #global-nav-side .gns-link[aria-current="page"] .gns-icon.rail-icon * { fill: none !important; stroke: #fff !important; } #global-nav-side .gns-label { flex: 1 1 auto; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; /* flex-grow is NOT transitioned — animating it forced a layout pass * per frame on every row; it snaps while the fade carries. The label * collapses via max-width (a cheap clip) rather than zoom — zoom * re-rasterised the label text every frame and was the main collapse * stutter on a rail full of rows. */ transition: all var(--gns-transition); } /* Team-space avatar — the space's first letter on its own colour * (--gns-space-colour, set inline per entry; accent fallback). * Inactive: transparent, a small outlined circle (see below). * Active workspace: solid colour, white letter, full 38px. */ #global-nav-side .gns-space-avatar { /* The ink themes pin --app-icon-contrast-colour (black) so space * avatars join the ink palette; other brands fall through to the * per-space colour. */ background: color-mix(in srgb, var(--app-icon-contrast-colour, var(--gns-space-colour, var(--gns-accent))) 10%, white); color: var(--app-icon-contrast-colour, var(--gns-space-colour, var(--gns-accent))); border: 1px solid var(--app-icon-contrast-colour, var(--gns-space-colour, var(--gns-accent))); box-sizing: border-box; /* The space's letter mark stays a perfect circle — the CONTAINER around * it is what matches the apps (the hover tile is the app tile's 38px / * 10px square), not the mark itself. */ border-radius: 50%; font-size: 0.75em; font-weight: 700; line-height: 1; } /* A space you are NOT in reads as a small outlined circle: the ring shrinks * and empties out, while the LETTER keeps its size — that is what you scan * the list by, and shrinking it too would just make the rail harder to read. * The open space grows back into the filled 38px avatar below, so the one * space you're in is the only weight in the section. * * The slot is unchanged in both states — box + margin is 44px either way — * so the labels never shift as the circle grows and shrinks, and the two * states can simply animate into each other. */ #global-nav-side .gns-item.gns-space .gns-space-avatar { width: 26px; height: 26px; margin: 9px; background: transparent; /* The hover tile is an ::after at z-index -1 (it has to sit behind the * letter). Without a stacking context of its own here, that negative * layer sinks past every ancestor to the rail's own background and never * shows — which is exactly what happened. isolate keeps it in this box. */ position: relative; isolation: isolate; transition: width var(--gns-transition), height var(--gns-transition), margin var(--gns-transition), background-color var(--gns-transition), color var(--gns-transition); } /* The current workspace stays remembered (li.current) but only reads * as highlighted while the Workspaces pane is in the foreground — on * Home or in any other app it renders like the rest. */ #global-nav-side .gns-item.gns-space.current > .gns-link { color: #6B6560; font-weight: bold; } body:has(#app-space.state-on:is(.active-app-workspaces, .active-app-team-spaces)) #global-nav-side .gns-item.gns-space.current > .gns-link { color: var(--gns-accent); font-weight: 600; } /* The OPEN space: the full-size filled avatar — the state every space used * to render in, now reserved for the one you're actually looking at. */ body:has(#app-space.state-on:is(.active-app-workspaces, .active-app-team-spaces)) #global-nav-side .gns-item.gns-space.current .gns-space-avatar { width: 38px; height: 38px; margin: 3px; background: var(--app-icon-contrast-colour, var(--gns-space-colour, var(--gns-accent))); color: #fff; } /* The "+" entry above the space list (opens the New team space modal): * a dashed neutral tile so it reads as an action, not another space. */ #global-nav-side .gns-space-add .gns-space-avatar { background: transparent; border-style: dashed; border-color: #6B6560; color: #6B6560; font-size: 1.1em; font-weight: 600; } @media (hover: hover) { #global-nav-side .gns-space-add .gns-link:hover .gns-space-avatar { border-color: var(--gns-ink); color: var(--gns-ink); } } /* Too many spaces to fit without scrolling: KikaronGlobalNav flags the * rail with .gns-spaces-overflow and the per-space list collapses into * the single Team spaces app icon (the .gns-spaces-all entry). * * UNLESS Team spaces is PINNED. A pinned Team spaces already has its own * icon up among the apps (global-nav-mobile-order.css keys that off the same * data-gns-pinned marker), so collapsing would trade every direct space entry * for a SECOND copy of an icon the rail is already showing — losing the * spaces and gaining nothing. Pinned, the list stays and scrolls instead. */ #global-nav-side .gns-spaces .gns-spaces-all { display: none; } #global-nav-side.gns-spaces-overflow:not(:has(.gns-apps .gns-app-team-spaces [data-gns-pinned])) .gns-spaces .gns-spaces-all { display: block; } #global-nav-side.gns-spaces-overflow:not(:has(.gns-apps .gns-app-team-spaces [data-gns-pinned])) .gns-spaces > ul:not(.gns-spaces-all), #global-nav-side.gns-spaces-overflow:not(:has(.gns-apps .gns-app-team-spaces [data-gns-pinned])) .gns-spaces .gns-section-title { display: none; } /* Unread badge — keeps working in the collapsed rail (rides the icon) */ #global-nav-side .gns-badge { flex: 0 0 auto; background: var(--gns-accent); color: #fff; border-radius: 999px; font-size: 0.7em; line-height: 1; padding: 3px 6px; top: 0; } /* Favourites-as-app pane visibility — no App registry row means no * generated show-rule in automations/apps.css, so it lives here. */ #app-space.active-app-favourites.state-on #application-body-favourites { display: block; } /* RTL (Hebrew/Arabic): rail rides the right edge; the var-driven * margins/distances are consumed by all.css's own RTL swaps, but the * physical insets declared above (padding shorthands, left/right * coordinates) need explicit mirrors. */ body[dir="rtl"] #global-nav-side { left: auto; right: var(--gns-left); } /* Header/logo: the 10px inline inset moves to the right edge (the * wordmark right-aligns by itself — block replaced element under * direction: rtl) and the stacked brandmark anchors right too. */ body[dir="rtl"] #global-nav-side .gns-header { padding: 0 10px 10px 0; } body[dir="rtl"] #global-nav-side .gns-logo-mark { left: auto; right: 0; } /* Row insets: the 10px end-padding sits before the label, not the icon, * so the icons line up under the logo like they do in LTR. */ body[dir="rtl"] #global-nav-side .gns-link { padding: 0 0 0 10px; } /* The mobile bottom bar's leading Home button (the brandmark) — the * desktop rail uses the .gns-header logo instead, so hide it here. */ #global-nav-side .gns-mobile-home { display: none; } /* "More apps" overflow entry — hidden by default, and on the DESKTOP rail it * now stays that way: the Apps launcher has its own rail entry and lists every * app, so global-nav.js no longer sets .gns-apps-overflow there — it just * marks what didn't fit .gns-overflowed and lets it drop off. Only the mobile * bar still reveals a More entry, via the breakpoint rules further down. */ #global-nav-side .gns-more-item { display: none; } #global-nav-side.gns-apps-overflow .gns-more-item { display: block; } #global-nav-side .gns-apps .gns-item.gns-overflowed { display: none; } /* The trigger is a