/* ============================================================ Something From Nothing — app layouts (the data-layout axis) ------------------------------------------------------------ Third appearance axis: shell/navigation arrangement, on top of data-theme (light/dark) and data-theme-name (colour themes). Applied as . Classic is the default and has NO block here — it is the base chrome in app.css (left sidebar + mobile bottom tabs). All restructuring is desktop-only (>=900px). Phones keep the bottom tab bar in every layout. Layouts publish two variables — --sidebar-width and --topnav-height — that docked action bars, sticky page headers and the notifications popover consume, so dependent chrome follows the active layout automatically. ============================================================ */ /* ============================================================ Layout: "Top Bar" (data-layout="topbar") Classic horizontal web-app navigation. Desktop only — mobile (<900px) keeps the base bottom tab bar untouched. ============================================================ */ @media (min-width: 900px) { [data-layout="topbar"] { --sidebar-width: 0px; /* no left chrome: docked bars + popovers follow */ --topnav-height: 58px; /* sticky page headers offset below the bar */ } /* Shell stacks vertically again: bar on top, content below */ [data-layout="topbar"] .app-shell { flex-direction: column; } /* The sidebar becomes a full-width horizontal bar */ [data-layout="topbar"] .app-sidebar { position: sticky; top: 0; z-index: 60; width: 100%; height: var(--topnav-height); flex-direction: row; align-items: center; border-right: none; border-bottom: 1px solid var(--nav-border); } /* Compact inline brand: suppress the stacked line break */ [data-layout="topbar"] .brand-mark { padding: 0 18px; font-size: 16px; line-height: 1.1; white-space: nowrap; flex-shrink: 0; } [data-layout="topbar"] .brand-mark br { display: none; } [data-layout="topbar"] .brand-mark .accent { display: inline; margin-left: 4px; } /* Nav runs horizontally, pushed to the right edge */ [data-layout="topbar"] .side-nav { flex-direction: row; align-items: stretch; gap: 2px; height: 100%; margin-left: auto; padding: 0 8px; } /* Items: underline affordance instead of left rail */ [data-layout="topbar"] .side-item { height: 100%; padding: 0 13px; border-left: none; border-bottom: 3px solid transparent; border-radius: 0; outline-offset: -3px; /* keep focus ring visible inside the bar */ } [data-layout="topbar"] .side-item.active { border-bottom-color: var(--accent); background: transparent; /* cleaner in a bar; keeps --nav-selected color */ } /* Badge pins to the item's top-right corner (item is position:relative) */ [data-layout="topbar"] .side-item .side-badge { position: absolute; top: 8px; right: 4px; margin-left: 0; } /* No room for the footer strapline in a bar */ [data-layout="topbar"] .side-foot { display: none; } /* Content centring comes from the base rules in app.css (content centres in whatever region the nav leaves — here, the full viewport). */ /* Notifications popover: right-anchored just below the bar */ [data-layout="topbar"] .app-shell .sidebar-notif-anchor .notif-panel { left: auto; right: 16px; top: calc(var(--topnav-height) + 10px); } /* CONCEPT — quiet inline search pill leading the nav row (disabled affordance: intentional but inert) */ [data-layout="topbar"] .side-nav .concept-search { display: flex; order: -1; align-self: center; height: auto; min-height: 40px; padding: 8px 14px; background: var(--surface-alt); border-bottom: none; border-radius: var(--radius-pill); color: var(--text-secondary); opacity: 0.85; cursor: default; transition: opacity 0.15s ease; } } /* 900–1279px: icons only — hide labels accessibly (names stay in the accessibility tree; icon, badge and glyph spans remain visible) */ @media (min-width: 900px) and (max-width: 1279.98px) { [data-layout="topbar"] .side-item > span:not(.icon):not(.side-badge):not(.concept-glyph) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } } /* >=1280px: labels return, search pill gets its resting width */ @media (min-width: 1280px) { [data-layout="topbar"] .side-item { font-size: 13px; } [data-layout="topbar"] .side-nav .concept-search { width: 200px; } } /* ========================================================================== Layout: "rail" — Icon Rail Compact 76px icon-only left rail (Linear/Discord-adjacent). Desktop only; mobile (<900px) keeps the stock bottom tab bar untouched. ========================================================================== */ @media (min-width: 900px) { /* Axis variables — downstream consumers (docked bars, notif popover, sticky page headers) follow these automatically. */ [data-layout="rail"] { --sidebar-width: 76px; --topnav-height: 0px; } /* Rail chrome stays a sticky column (base rules); assert nav z-order. */ [data-layout="rail"] .app-sidebar { z-index: 60; } /* Brand collapses to a monogram. The real anchor text shrinks to 0 but remains in the accessibility tree; ::before paints the visual "SFN". */ [data-layout="rail"] .brand-mark { font-size: 0; line-height: 0; padding: 20px 0 16px; text-align: center; } [data-layout="rail"] .brand-mark::before { content: "SFN"; display: block; font-family: var(--font-display); font-size: 15px; font-weight: 800; line-height: 1.2; letter-spacing: 0.06em; color: var(--accent); } /* Nav becomes a centered icon stack; flex:1 lets the concept button sink to the rail bottom via margin-top:auto. */ [data-layout="rail"] .side-nav { flex: 1; padding: 0 10px 14px; gap: 4px; } /* Icon-only items: 56px wide x 44px tall hit areas (>= 40px both). */ [data-layout="rail"] .side-item { justify-content: center; gap: 0; width: 100%; padding: 12px 0; border-left: none; border-radius: var(--radius-m); } [data-layout="rail"] .side-item.active { background: var(--accent-soft); color: var(--nav-selected); } /* Labels visually hidden, kept for screen readers. .icon and .concept-glyph are the visible glyphs; .side-badge stays. */ [data-layout="rail"] .side-item > span:not(.side-badge):not(.concept-glyph):not(.icon) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } /* Badge rides the top-right corner of its item (item is position:relative). */ [data-layout="rail"] .side-badge { position: absolute; top: 4px; right: 8px; margin-left: 0; min-width: 16px; height: 16px; font-size: 9.5px; line-height: 16px; } /* No room for the strapline on a 76px rail. */ [data-layout="rail"] .side-foot { display: none; } /* Concept affordance: collapse toggle pinned to the rail bottom. Disabled-looking but intentional; icon-only like its siblings. */ [data-layout="rail"] .concept-collapse { display: flex; margin-top: auto; opacity: 0.8; cursor: default; } [data-layout="rail"] .concept-collapse .concept-glyph { font-size: 18px; line-height: 20px; color: var(--nav-unselected); } } /* ============================================================ Layout: "dock" — Floating Dock Immersive full-bleed content; nav becomes a floating bottom-centre pill dock. Mobile (<900px) untouched. ============================================================ */ @media (min-width: 900px) { /* --- Axis variables: no left rail, no top bar ------------- */ [data-layout="dock"] { --sidebar-width: 0px; --topnav-height: 0px; } /* --- Sidebar becomes the floating dock -------------------- */ [data-layout="dock"] .app-sidebar { position: fixed; left: 50%; bottom: 18px; top: auto; transform: translateX(-50%); width: auto; height: auto; max-width: calc(100vw - 48px); flex-direction: row; align-items: center; gap: 2px; padding: 7px 10px; background: var(--nav-bg); border: 1px solid var(--nav-border); border-radius: var(--radius-pill); box-shadow: var(--shadow-overlay); backdrop-filter: blur(16px) saturate(1.2); z-index: 60; transition: bottom 0.25s ease; } /* Detail pages render a fixed bottom .docked-bar (Like/Nope): lift the dock clear of it. */ [data-layout="dock"] .app-shell:has(.docked-bar) .app-sidebar { bottom: 86px; } /* --- Chrome we don't need in a dock ----------------------- */ [data-layout="dock"] .brand-mark, [data-layout="dock"] .side-foot { display: none; } /* --- Nav row ----------------------------------------------- */ [data-layout="dock"] .side-nav { flex-direction: row; align-items: center; gap: 2px; padding: 0; } /* --- Items: icon-only pills (42x42 hit area) --------------- */ [data-layout="dock"] .side-item { justify-content: center; padding: 11px; border-left: none; border-radius: var(--radius-pill); } [data-layout="dock"] .side-item.active { background: var(--accent-soft); color: var(--nav-selected); } [data-layout="dock"] .side-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Accessibly hide text labels (kept in the a11y tree); :not(.icon) keeps the svg wrapper visible. */ [data-layout="dock"] .side-item > span:not(.side-badge):not(.concept-glyph):not(.icon) { width: 1px; height: 1px; position: absolute; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } /* --- Badge: corner-pinned mini pill ------------------------ */ [data-layout="dock"] .side-badge { position: absolute; top: 2px; right: 2px; margin: 0; min-width: 15px; height: 15px; padding: 0 4px; font-size: 9px; line-height: 15px; } /* --- Content: symmetric, clears the dock ------------------- */ /* Content must clear the floating dock (centring comes from app.css). */ [data-layout="dock"] .app-content { padding-bottom: 110px; } /* --- Notifications popover: rises above the dock ----------- */ [data-layout="dock"] .app-shell .sidebar-notif-anchor .notif-panel { left: 50%; right: auto; top: auto; bottom: 96px; transform: translateX(-50%); } /* --- Concept affordance: round accent "New" action --------- */ [data-layout="dock"] .side-nav .concept-create { display: flex; width: 40px; height: 40px; justify-content: center; align-items: center; padding: 0; margin: 0 4px; border: none; border-radius: 999px; background: var(--accent); color: var(--accent-text); opacity: 0.9; cursor: default; } [data-layout="dock"] .side-nav .concept-create .concept-glyph { font-size: 20px; line-height: 1; } } /* ========================================================================== Icon tooltips — Rail + Dock The icon-only layouts hide each nav item's label with the accessible clip pattern; on hover / keyboard focus the same span un-clips into a themed tooltip bubble (no extra markup, label text stays the single source of truth). Selector specificity intentionally out-ranks the hide rules. ========================================================================== */ @media (min-width: 900px) { /* Shared bubble chrome (position differs per layout below). */ [data-layout="rail"] .side-item:hover > span:not(.side-badge):not(.concept-glyph):not(.icon), [data-layout="rail"] .side-item:focus-visible > span:not(.side-badge):not(.concept-glyph):not(.icon), [data-layout="dock"] .side-item:hover > span:not(.side-badge):not(.concept-glyph):not(.icon), [data-layout="dock"] .side-item:focus-visible > span:not(.side-badge):not(.concept-glyph):not(.icon) { width: auto; height: auto; overflow: visible; clip: auto; padding: 6px 11px; background: var(--overlay-bg); color: var(--text); border: 1px solid var(--panel-stroke); border-radius: var(--radius-m); box-shadow: var(--shadow-overlay); backdrop-filter: blur(8px); /* keeps translucent glass themes legible */ font-size: 12px; font-weight: 600; letter-spacing: 0.01em; z-index: 70; pointer-events: none; /* never steal the hover from the item */ } /* Rail: bubble sits to the right of the icon, vertically centred. */ [data-layout="rail"] .side-item:hover > span:not(.side-badge):not(.concept-glyph):not(.icon), [data-layout="rail"] .side-item:focus-visible > span:not(.side-badge):not(.concept-glyph):not(.icon) { left: calc(100% + 10px); top: 50%; transform: translateY(-50%); } /* Dock: bubble floats above the icon, horizontally centred. */ [data-layout="dock"] .side-item:hover > span:not(.side-badge):not(.concept-glyph):not(.icon), [data-layout="dock"] .side-item:focus-visible > span:not(.side-badge):not(.concept-glyph):not(.icon) { bottom: calc(100% + 10px); top: auto; left: 50%; transform: translateX(-50%); } }