/** * overrides.css — deliberate overrides of the vendored app stylesheets. * ============================================================================ * * LOAD LAST. That is not a style preference, it is the mechanism. * * The rules here re-style elements that the two vendored sheets also style, at * the SAME specificity: * * shell.css .pi-panel .nav-links a (0,2,1) * mlstack.css .pi-panel--mlstack .nav-links a (0,2,1) * * With equal specificity the last sheet wins, and the scoped app sheets are * emitted after shell.css. The parity rules therefore lost silently — the navs * still rendered at each app's own size and colour, and nothing errored. Rather * than win that fight with a specificity hack (`.pi-panel.pi-panel ...`), which * is invisible to the next reader and escalates the next time it is edited, * these rules live in their own sheet loaded after the app sheets. * * Everything here exists because two independently-designed apps now share a * page and have to read as one product. See docs/DESIGN-SYSTEM.md. * * Written here rather than edited into the vendored sheets so src/vendor/ stays * byte-identical to upstream — the same rule the rest of this merge follows. */ /* ========================================================================== * Section navigation — parity between the two tabs * * The two study guides arrived with visibly different in-page navs on what is * meant to read as one product: * * AI Architect .topbar nav a — 14px, #3e3932 warm grey, underline hover * ML Stack Lab .nav-links a — its own sizing, cool grey, no underline * * Both are now re-expressed against the shared tokens * (shared/purple-tokens.css, .pi-subnav). Written here as overrides rather * than edited into the vendored sheets so src/vendor/ stays byte-identical to * upstream — the same rule the rest of this merge follows. * ======================================================================= */ .pi-panel .topbar nav, .pi-panel .nav-links { display: flex; align-items: center; gap: var(--pi-space-5); flex-wrap: wrap; } .pi-panel .topbar nav a, .pi-panel .nav-links a { font-family: var(--pi-font-sans); font-size: var(--pi-text-base); font-weight: var(--pi-weight-medium); color: var(--pi-muted); text-decoration: none; padding: var(--pi-space-1) 0; border-bottom: 2px solid transparent; transition: color var(--pi-transition-fast), border-color var(--pi-transition-fast); } .pi-panel .topbar nav a:hover, .pi-panel .nav-links a:hover, .pi-panel .topbar nav a:focus-visible, .pi-panel .nav-links a:focus-visible { color: var(--pi-ink); border-bottom-color: var(--pi-accent); /* The AI Architect sheet sets text-decoration:underline on hover; the border-bottom is the shared treatment, so suppress the underline rather than showing both. */ text-decoration: none; } .pi-panel .topbar nav a.is-active, .pi-panel .nav-links a.active, .pi-panel .nav-links a[aria-current] { color: var(--pi-accent-text); border-bottom-color: var(--pi-accent); } /* "Go home" / brand-ish leading link in the AI Architect bar. */ .pi-panel .home-link { font-family: var(--pi-font-sans); font-size: var(--pi-text-base); font-weight: var(--pi-weight-semibold); color: var(--pi-ink); text-decoration: none; } .pi-panel .home-link:hover { color: var(--pi-accent-text); } /* Both apps' "My Progress" control. AI Architect renders it as an underlined text link (.signin-link), ML Stack Lab as a pill button (.button-quiet). One treatment for one function. */ .pi-panel .signin-link, .pi-panel .nav-actions .button-quiet { font-family: var(--pi-font-sans); font-size: var(--pi-text-base); font-weight: var(--pi-weight-semibold); color: var(--pi-ink); background: transparent; border: 1px solid var(--pi-line); border-radius: var(--pi-radius-pill); padding: 7px 15px; text-decoration: none; cursor: pointer; transition: background var(--pi-transition-fast), border-color var(--pi-transition-fast); } .pi-panel .signin-link:hover, .pi-panel .nav-actions .button-quiet:hover { background: var(--pi-accent-wash); border-color: var(--pi-accent); } .pi-panel .signin-link:focus-visible, .pi-panel .nav-actions .button-quiet:focus-visible { outline: var(--pi-focus-ring); outline-offset: var(--pi-focus-offset); } /* Keep the two header bars themselves identical in height and rhythm. */ .pi-panel .topbar-inner, .pi-panel .nav-shell { max-width: var(--pi-max-width); gap: var(--pi-space-6); padding: var(--pi-space-3) var(--pi-space-6); } /* -------------------------------------------------------------------------- * Theme-qualified colour overrides * * Load order alone is not enough here. Both vendored sheets carry dark-theme * rules that the scoping transform rewrote into: * * [data-theme="dark"] .pi-panel--aiarch .topbar nav a -> (0,3,1) * * while the parity rules above are: * * .pi-panel .topbar nav a -> (0,2,1) * * A higher-specificity rule wins no matter which sheet loads last, so in dark * mode the two navs kept their original, different greys — #9b8ab0 on one and * #c7d2df on the other — even though font, size and weight had already been * unified. Everything else about the two navs matched, which made the * remaining colour difference look like a token problem rather than a * specificity one. * * Matching the (0,3,1) shape and relying on this sheet loading last is the * fix. `:root[data-theme=...]` is used rather than a bare attribute selector * so the intent — "this is the themed variant of the rule above" — is legible. * ----------------------------------------------------------------------- */ :root[data-theme="dark"] .pi-panel .topbar nav a, :root[data-theme="light"] .pi-panel .topbar nav a, :root[data-theme="dark"] .pi-panel .nav-links a, :root[data-theme="light"] .pi-panel .nav-links a { color: var(--pi-muted); } :root[data-theme="dark"] .pi-panel .topbar nav a:hover, :root[data-theme="light"] .pi-panel .topbar nav a:hover, :root[data-theme="dark"] .pi-panel .nav-links a:hover, :root[data-theme="light"] .pi-panel .nav-links a:hover { color: var(--pi-ink); } :root[data-theme="dark"] .pi-panel .home-link, :root[data-theme="light"] .pi-panel .home-link, :root[data-theme="dark"] .pi-panel .signin-link, :root[data-theme="light"] .pi-panel .signin-link { color: var(--pi-ink); } /* -------------------------------------------------------------------------- * Sub-nav gutter alignment * * The parity rules above unified how the sub-nav links LOOK. They also, by * setting one shared max-width and padding on both bars, broke where the rows * SIT: the links no longer started on the same gutter as the page content * beneath them, on either tab. * * The two apps use different content columns, and neither is --pi-max-width: * * AI Architect .hero-wrap / .content-section max-width 1220px, padding 0 26px * ML Stack Lab main > section max-width 1180px (--max), padding 0 16px * * So a single shared value cannot align both — each bar has to match its OWN * app's column. Overriding the earlier rule rather than editing it keeps the * appearance change and the alignment change separately reviewable. * * Verify by comparing getBoundingClientRect().x of the first sub-nav link * against the panel's H1; they should agree within a pixel. * ----------------------------------------------------------------------- */ .pi-panel--aiarch .topbar-inner { max-width: 1220px; padding-left: 26px; padding-right: 26px; } .pi-panel--mlstack .nav-shell { max-width: 1180px; padding-left: 16px; padding-right: 16px; } /* Both bars keep the shared vertical rhythm and gap from the parity rules; only the horizontal box is per-app. */ .pi-panel--aiarch .topbar-inner, .pi-panel--mlstack .nav-shell { margin-left: auto; margin-right: auto; gap: var(--pi-space-5); padding-top: var(--pi-space-3); padding-bottom: var(--pi-space-3); }