` components. Because the styling lives here (not per app), it can
never drift apart — the exact fix pattern of the shared token layer.
Markup contract (keep in lockstep across all four surfaces):
========================================================================== */
.pai-shell {
display: flex;
align-items: center;
gap: var(--space-4);
flex-wrap: wrap;
min-height: 56px;
padding: 9px clamp(16px, 4vw, 40px);
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
/* Sit above app chrome (e.g. the Explorer hero) and never scroll away with a
tall page's content region; individual apps keep their own layout below. */
position: relative;
z-index: 20;
}
.pai-shell-brand {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
text-decoration: none;
}
.pai-shell-brand .brand-logo { height: 28px; width: auto; display: block; }
/* The product switcher — the heart of the unification. Marked-active link uses
the accent role color + a pale accent fill so "you are here" reads at a glance
in both themes. */
.pai-shell-nav {
display: flex;
align-items: center;
gap: 2px;
flex-wrap: wrap;
/* A hairline divider separating the cross-app switcher from the brand mark. */
padding-left: var(--space-4);
border-left: 1px solid var(--color-border);
}
.pai-shell-nav a {
font-family: var(--font);
font-size: 14px;
font-weight: 600;
color: var(--color-text-muted);
text-decoration: none;
padding: 7px 12px;
border-radius: var(--radius-sm);
transition: color 0.15s ease, background 0.15s ease;
white-space: nowrap;
}
.pai-shell-nav a:hover { color: var(--color-accent); background: var(--color-hover); }
.pai-shell-nav a[aria-current='page'] {
color: var(--color-accent);
background: var(--color-accent-subtle);
}
.pai-shell-right {
margin-left: auto;
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
}
/* Wrapper for the signed-in-user affordance (email + Sign out), used where the
two sit together as a toggled unit (the Explorer's static header). */
.pai-shell-userbox {
display: inline-flex;
align-items: center;
gap: var(--space-3);
}
/* Signed-in user label (folded in from the per-app top bars). */
.pai-shell-user {
font-size: 13px;
color: var(--color-text-muted);
max-width: 240px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pai-shell-user strong { color: var(--color-text); font-weight: 600; }
.pai-shell-signout {
font-family: var(--font);
font-size: 13px;
font-weight: 600;
color: var(--color-accent);
background: transparent;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
padding: 6px 12px;
cursor: pointer;
transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.pai-shell-signout:hover { border-color: var(--color-accent); background: var(--color-hover); }
/* The one theme toggle, now living in the shell's right side on every surface —
square ghost button; sun/moon swap via the shared [data-theme] icon rules
below. Scoped to .pai-shell so it wins over any per-app `.theme-toggle`. */
.pai-shell .theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border-radius: var(--radius-sm);
background: transparent;
border: 1px solid var(--color-border-strong);
color: var(--color-text-muted);
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease;
}
.pai-shell .theme-toggle:hover { color: var(--color-accent); border-color: var(--color-accent); }
/* Narrow widths: the switcher wraps under the brand and the right-side controls
drop to their own line — a clean collapse, no horizontal overflow, still
fully keyboard-reachable. */
@media (max-width: 640px) {
.pai-shell { gap: var(--space-2) var(--space-3); }
.pai-shell-nav {
order: 3;
width: 100%;
padding-left: 0;
border-left: 0;
}
.pai-shell-right { gap: var(--space-2); }
}
/* =============================================================================
SHARED THEME-TOGGLE ICON SWAP — each surface's toggle button marks its two
glyphs `.pai-theme-icon--sun` (shown in light) and `.pai-theme-icon--moon`
(shown in dark). This resolves the active theme exactly like the token blocks
above (explicit data-theme wins; otherwise the OS preference), so the glyph
always reflects the theme currently in effect.
========================================================================== */
.pai-theme-icon--moon { display: none; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) .pai-theme-icon--sun { display: none; }
:root:not([data-theme='light']) .pai-theme-icon--moon { display: inline-flex; }
}
:root[data-theme='dark'] .pai-theme-icon--sun { display: none; }
:root[data-theme='dark'] .pai-theme-icon--moon { display: inline-flex; }
:root[data-theme='light'] .pai-theme-icon--sun { display: inline-flex; }
:root[data-theme='light'] .pai-theme-icon--moon { display: none; }
/* =============================================================================
BRAND LOGO IN DARK MODE — the shared lockup is a dark-teal wordmark on a
transparent ground, which would vanish on a dark top bar. Render it as a crisp
white lockup in dark mode so it stays legible on every surface. (Every surface
marks its logo `![]()
` with `.brand-logo`.)
========================================================================== */
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) .brand-logo { filter: brightness(0) invert(1); }
}
:root[data-theme='dark'] .brand-logo { filter: brightness(0) invert(1); }
:root[data-theme='light'] .brand-logo { filter: none; }
