/* ================================================================================================
DESIGN SYSTEM
Modernization pass over the existing studiojaed.com-derived palette (white ground, near-black
ink, the brand's brick red used as a sparing accent) - the brand identity is kept as-is (it was
deliberately matched to the real firm's site earlier in this project), but the execution around
it is tightened: a real type/spacing scale, subtle elevation instead of flat 1px borders
everywhere, consistent status-badge language, and new components (project cards, richer clash
test cards, empty states) built ON these same tokens rather than one-off styles. Restrained on
purpose - a construction-coordination tool, not a marketing site: no gradients, no neon, no
decorative motion.
================================================================================================ */
:root {
/* Brand (unchanged values, see header comment) */
--brand-red-bright: #E2364A;
--brand-red-deep: #A51724;
--brand-red-action: #C41230;
--brand-red-secondary: #7A121C;
--brand-red-tint: #FBEAEC;
/* Company-pill palette (see .company-pill-0..7 below, and companyColorClass in app.js) -
deliberately its own set of hues, distinct from the semantic status colors (--status-*
below / .badge-status--*) so a company tag can never be misread as a review-status color.
8 is enough headroom for a real project's actual number of trades/consultants without
colors repeating in practice. */
--company-pill-0-bg: #EDE9FE; --company-pill-0-ink: #6D28D9; /* violet */
--company-pill-1-bg: #CCFBF1; --company-pill-1-ink: #0F766E; /* teal */
--company-pill-2-bg: #DBEAFE; --company-pill-2-ink: #1D4ED8; /* blue */
--company-pill-3-bg: #FCE7F3; --company-pill-3-ink: #BE185D; /* pink */
--company-pill-4-bg: #E0E7FF; --company-pill-4-ink: #4338CA; /* indigo */
--company-pill-5-bg: #FFEDD5; --company-pill-5-ink: #C2410C; /* orange */
--company-pill-6-bg: #FAE8FF; --company-pill-6-ink: #A21CAF; /* fuchsia */
--company-pill-7-bg: #E2E8F0; --company-pill-7-ink: #334155; /* slate */
/* Wash used by the stat/project "glass" cards (see DASHBOARD section) - a light neutral grey
here, since a red-tinted wash read as odd in light mode; dark mode keeps the red-maroon
version (redefined below) since that one wasn't flagged and still fits the darker ground. */
--card-glass-tint: var(--card-bg-inner);
/* Surfaces & ink */
--bg: #F7F7F8;
--card-bg: #FFFFFF;
--card-bg-inner: #F3F4F6;
--text-primary: #1A1A1A;
--text-secondary: #6B7280;
--text-heading: #101114;
--track-bg: #E5E7EB;
--border: #E5E7EB;
--border-strong: #D1D5DB;
--heatmap-bg: #0B0F1A; /* a fixed "night view" panel by design - not overridden for dark mode */
/* Left icon nav rail - intentionally fixed dark in BOTH themes (not redefined below), same
reasoning as --heatmap-bg: it's meant to read as a constant dark anchor for navigation,
like the rail in the Dribbble task-management reference this was modeled on, not a surface
that should flip white in light mode. */
--rail-bg: #1B1D22;
--rail-icon: #8B92A0;
/* Status language - used everywhere via .badge-status, never one-off colors per page */
--status-green-bg: #DCFCE7; --status-green-ink: #15803D;
--status-red-bg: #FEE2E2; --status-red-ink: #B91C1C;
--status-amber-bg: #FEF3C7; --status-amber-ink: #92400E;
--status-blue-bg: #DBEAFE; --status-blue-ink: #1D4ED8;
/* Was #41FDFE (a near-white neon cyan) - unreadable as text on the equally pale --status-cyan-bg
below. Swapped for a saturated teal that keeps the "cyan" identity but actually passes contrast
as ink, matching how every other status-*-ink here is a solid AA-legible color on its own pale
bg (see --status-blue-ink/--status-green-ink etc.) - this one was the sole exception. */
--status-cyan-bg: #CFFAFE; --status-cyan-ink: #0E7490;
--status-gray-bg: #F1F5F9; --status-gray-ink: #475569;
/* Vivid orange/yellow, distinct from the muted --status-amber-ink (that one's tuned as
readable text-on-pale-fill; this one's meant to read as a bright highlight color, same job
--status-cyan-ink already does) - added for the clash gallery's In Progress review stage. */
--status-orange-bg: #FEF3C7; --status-orange-ink: #F59E0B;
/* Two more for the clash lifecycle's Deferred/Closed stages (see ClashReviewStatus
server-side) - purple and slate, distinct from every other stage's color. */
--status-purple-bg: #F3E8FF; --status-purple-ink: #7E22CE;
--status-slate-bg: #E2E8F0; --status-slate-ink: #334155;
/* Coordinator-set clash priority (see ClashPriority server-side) - a separate palette from
the status language above so priority and status never look like the same kind of thing. */
--priority-low-bg: #F1F5F9; --priority-low-ink: #64748B;
--priority-medium-bg: #DBEAFE; --priority-medium-ink: #1D4ED8;
--priority-high-bg: #FEF3C7; --priority-high-ink: #B45309;
--priority-critical-bg: #FEE2E2; --priority-critical-ink: #B91C1C;
/* Type scale */
/* Phase 1 design-system pass: one new tier above 2xl, for the genuine "Display" role
(.text-display below) - a rare hero number, not a page title (.page-title stays --text-2xl). */
--text-3xl: 32px;
--text-2xl: 22px;
--text-xl: 17px;
--text-lg: 14px;
--text-md: 13px;
--text-sm: 12px;
--text-xs: 11px;
--text-2xs: 10px;
/* Spacing scale (4px base) */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
/* Elevation & shape */
/* Phase 1 design-system pass: the smallest tier several components independently invented
their own value for (.hint code, progress bars, ...) - see the pass's own audit notes. */
--radius-xs: 3px;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-pill: 999px;
--shadow-sm: 0 1px 2px rgba(16, 17, 20, 0.05), 0 1px 1px rgba(16, 17, 20, 0.03);
--shadow-md: 0 4px 14px rgba(16, 17, 20, 0.08), 0 1px 3px rgba(16, 17, 20, 0.04);
--shadow-lg: 0 20px 60px rgba(16, 17, 20, 0.20);
color-scheme: light; /* native form controls/scrollbars render light-appropriate */
}
/* ================================================================================================
DARK MODE
Same token set redefined - every component below already reads these variables instead of a
literal color, so it themes automatically with no per-component dark CSS. Two blocks on purpose:
the media-query one follows the OS setting for anyone who's never touched the toggle (see
#theme-toggle-btn in app.js); the [data-theme="dark"] one is what that toggle actually flips, and
wins over the OS setting either direction because of the plain :root it's compared against.
Brand red (--brand-red-bright/action/secondary) is left as-is in both themes - already vivid
enough to read on a dark surface; only --brand-red-tint/--brand-red-deep (a pale pink fill + a
dark ink meant to sit on top of it) need dark-appropriate counterparts. --heatmap-bg and
.trade-view-report-frame's white are deliberately NOT overridden - see their own comments.
================================================================================================ */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #18191D;
--card-bg: #212328;
--card-bg-inner: #2A2D33;
--text-primary: #E8E9EB;
--text-secondary: #9AA0AC;
--text-heading: #FFFFFF;
--track-bg: #363940;
--border: #2F323A;
--border-strong: #40444D;
--brand-red-tint: #3A1820;
--brand-red-deep: #FF7E90;
--card-glass-tint: #3A1820;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.25);
--shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55);
color-scheme: dark;
--company-pill-0-bg: #2E1B4D; --company-pill-0-ink: #C4B5FD;
--company-pill-1-bg: #0F2E2A; --company-pill-1-ink: #5EEAD4;
--company-pill-2-bg: #1E2A47; --company-pill-2-ink: #93C5FD;
--company-pill-3-bg: #3A1830; --company-pill-3-ink: #F9A8D4;
--company-pill-4-bg: #241F42; --company-pill-4-ink: #A5B4FC;
--company-pill-5-bg: #3A2412; --company-pill-5-ink: #FDBA74;
--company-pill-6-bg: #341530; --company-pill-6-ink: #F0ABFC;
--company-pill-7-bg: #262E3B; --company-pill-7-ink: #CBD5E1;
/* Phase 1 design-system pass: the status/priority language was the one token category left
un-themed - a pale pastel bg (e.g. --status-green-bg's light mint) sits with much lower
contrast against a dark #18191D ground than it does against white. Same "deep saturated
bg + bright ink" recipe already used for the company-pill palette above, one hue per
existing status/priority meaning - never a new color, never a renamed one. */
--status-green-bg: #14311F; --status-green-ink: #4ADE80;
--status-red-bg: #3A1517; --status-red-ink: #FCA5A5;
--status-amber-bg: #3A2D0E; --status-amber-ink: #FBBF24;
--status-blue-bg: #1E2A47; --status-blue-ink: #93C5FD;
--status-cyan-bg: #0E3A3D; --status-cyan-ink: #67E8F9;
--status-gray-bg: #262B33; --status-gray-ink: #CBD5E1;
--status-orange-bg: #3A2D0E; --status-orange-ink: #FDBA74;
--status-purple-bg: #2E1B4D; --status-purple-ink: #C4B5FD;
--status-slate-bg: #262E3B; --status-slate-ink: #CBD5E1;
--priority-low-bg: #262B33; --priority-low-ink: #94A3B8;
--priority-medium-bg: #1E2A47; --priority-medium-ink: #93C5FD;
--priority-high-bg: #3A2D0E; --priority-high-ink: #FBBF24;
--priority-critical-bg: #3A1517; --priority-critical-ink: #FCA5A5;
}
}
:root[data-theme="dark"] {
--bg: #18191D;
--card-bg: #212328;
--card-bg-inner: #2A2D33;
--text-primary: #E8E9EB;
--text-secondary: #9AA0AC;
--text-heading: #FFFFFF;
--track-bg: #363940;
--border: #2F323A;
--border-strong: #40444D;
--card-glass-tint: #3A1820;
--brand-red-tint: #3A1820;
--brand-red-deep: #FF7E90;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.25);
--shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55);
color-scheme: dark;
--company-pill-0-bg: #2E1B4D; --company-pill-0-ink: #C4B5FD;
--company-pill-1-bg: #0F2E2A; --company-pill-1-ink: #5EEAD4;
--company-pill-2-bg: #1E2A47; --company-pill-2-ink: #93C5FD;
--company-pill-3-bg: #3A1830; --company-pill-3-ink: #F9A8D4;
--company-pill-4-bg: #241F42; --company-pill-4-ink: #A5B4FC;
--company-pill-5-bg: #3A2412; --company-pill-5-ink: #FDBA74;
--company-pill-6-bg: #341530; --company-pill-6-ink: #F0ABFC;
--company-pill-7-bg: #262E3B; --company-pill-7-ink: #CBD5E1;
/* See the @media block above's own comment - kept identical here, same reasoning as every
other token this file already duplicates across both dark-mode blocks. */
--status-green-bg: #14311F; --status-green-ink: #4ADE80;
--status-red-bg: #3A1517; --status-red-ink: #FCA5A5;
--status-amber-bg: #3A2D0E; --status-amber-ink: #FBBF24;
--status-blue-bg: #1E2A47; --status-blue-ink: #93C5FD;
--status-cyan-bg: #0E3A3D; --status-cyan-ink: #67E8F9;
--status-gray-bg: #262B33; --status-gray-ink: #CBD5E1;
--status-orange-bg: #3A2D0E; --status-orange-ink: #FDBA74;
--status-purple-bg: #2E1B4D; --status-purple-ink: #C4B5FD;
--status-slate-bg: #262E3B; --status-slate-ink: #CBD5E1;
--priority-low-bg: #262B33; --priority-low-ink: #94A3B8;
--priority-medium-bg: #1E2A47; --priority-medium-ink: #93C5FD;
--priority-high-bg: #3A2D0E; --priority-high-ink: #FBBF24;
--priority-critical-bg: #3A1517; --priority-critical-ink: #FCA5A5;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
background: var(--bg);
color: var(--text-primary);
font-size: var(--text-md);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* ---------- Typography utilities ---------- */
.page-title { font-size: var(--text-2xl); font-weight: 700; color: var(--text-heading); margin: 0; letter-spacing: -0.01em; }
.section-title {
font-size: var(--text-2xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-secondary);
margin: 0 0 var(--space-3) 0;
}
.text-meta { font-size: var(--text-2xs); color: var(--text-secondary); }
.text-muted { color: var(--text-secondary); }
/* One per tab-panel (see index.html) - the actual textual "you are here" confirmation the nav rail's
icon-only buttons can't provide on their own (only a hover tooltip names them). Kept to a title
alone, no subtitle/description row - the breadcrumb below the header already carries the current
project, and every tab's own first card explains itself; a second explanatory line here would
just be duplicate vertical space on a page whose whole job is showing real coordination data
without scrolling. */
.page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.page-header .page-title { margin: 0; }
/* ================================================================================================
APP SHELL - left icon nav rail (full height, sticky) + a right column holding the header,
tab content, and footer. See index.html's #app-shell comment for why the rail's buttons are
still plain .nav-item/#sidebar elements under the hood.
================================================================================================ */
#app-shell { display: flex; align-items: stretch; }
/* Phase 2: widened from a 72px icon-only rail into a real labeled sidebar (brand + Org/Project
switcher + grouped nav) - align-items:stretch (was center) so those full-width children can
actually fill it; each one still controls its own internal padding rather than relying on the
rail's own padding for horizontal spacing, since the switcher/nav-group-labels/nav-items all
want slightly different edge-to-edge treatments. */
/* overflow-y is deliberately NOT set here (found during live testing - see #sidebar's own comment
for why: a non-visible overflow-y forces the browser to also treat overflow-x as auto instead of
visible, per the CSS overflow spec's own "one axis visible, one not -> the visible one computes
as auto too" rule - that silently clipped the project switcher popover below, which is 320px
wide and meant to overflow past this rail's own 244px into the content area). Any vertical
scrolling this rail's contents need is scoped to #sidebar alone instead, a sibling of the
switcher/popover, not a container they sit inside. */
#nav-rail {
width: 244px;
flex-shrink: 0;
background: var(--rail-bg);
position: sticky;
top: 0;
height: 100vh;
align-self: flex-start;
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--space-2);
padding: var(--space-4) var(--space-3);
box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
z-index: 30;
}
.rail-brand { padding: 0 var(--space-1) var(--space-2); }
/* Width-based, not height-based - the Collision Suite wordmark is a wide horizontal lockup
(~11:1), not the old roughly-square mark this rule was originally sized for. Fixed to fit
within .rail-brand's own content width (rail 244px - its own padding - this padding) with
room to spare, rather than height:Npx, which would blow past the rail's edge at this aspect
ratio. .rail-logo-icon (the cropped icon mark, no wordmark) takes over at the narrow collapsed
rail below - see its own rule in the 560px breakpoint. */
.rail-logo { width: 190px; height: auto; display: block; }
.rail-logo-icon { display: none; }
#shell-main {
flex: 1;
min-width: 0; /* lets flex children shrink below their content's natural width instead of overflowing */
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* ================================================================================================
HEADER
================================================================================================ */
header {
background: var(--card-bg);
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 20;
}
/* Phase 2: brand moved into the rail (see .rail-brand) - this row now holds only .header-utility
(notifications/account/login), still anchored to the header's true right edge via that element's
own margin-left:auto rather than floating centered. */
.header-row {
display: flex;
align-items: center;
gap: var(--space-6);
padding: var(--space-3) var(--space-6);
}
.brand {
display: flex;
align-items: center;
flex-shrink: 0;
text-decoration: none;
}
/* Light/dark logo swap - still used by the login modal's two tags (see login.html markup), one hidden via these rules depending on theme, same three-
state pattern as the color tokens above (system preference, then the explicit toggle overriding
it either direction). The rail's own brand mark (.rail-logo) deliberately does NOT use this
swap - see its own comment in index.html for why. */
img.logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .logo-light { display: none; }
:root:not([data-theme="light"]) .logo-dark { display: block; }
}
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; }
.header-utility {
display: flex;
align-items: center;
gap: var(--space-4);
margin-left: auto;
flex-shrink: 0;
}
/* Labeled sidebar nav (lives in #nav-rail, its own full-height column - see the APP SHELL section
above). Admin-only items sit under their own "Administration" label (see .nav-group-label /
#nav-admin-divider) instead of a bare divider line. min-height:0 + overflow-y:auto scoped HERE
(not on #nav-rail itself - see that rule's own comment on why) so a viewport too short to fit
every nav item scrolls just this list, without clipping the switcher popover above it, which
needs to overflow past the rail's own width, not be contained by it. */
#sidebar {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 2px;
min-height: 0;
overflow-y: auto;
}
/* Phase 2: full-width, icon + label rows (was a centered 44x44 icon-only square). Specificity
(#nav-rail .nav-item = an id + a class) beats the bare .nav-item rules (NAVIGATION ITEMS,
further below - written for an even earlier horizontal-row iteration) regardless of source
order, so this doesn't need !important. Fixed rail-appropriate colors throughout (--rail-icon,
literal white/rgba), not theme tokens - the rail's own background is intentionally dark in both
themes (see --rail-bg's comment), so a theme-adaptive color like --text-secondary would go
dark-on-dark and vanish in light mode. */
#nav-rail .nav-item {
width: 100%;
height: auto;
padding: 9px 10px;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
border-left: none;
border-radius: var(--radius-md);
color: var(--rail-icon);
font-size: var(--text-sm);
font-weight: 500;
text-align: left;
}
#nav-rail .nav-item svg { flex-shrink: 0; }
#nav-rail .nav-item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#nav-rail .nav-item:hover { background: rgba(255, 255, 255, 0.08); color: #FFFFFF; }
#nav-rail .nav-item.active { background: var(--brand-red-action); color: #FFFFFF; font-weight: 600; }
/* Author-origin display:flex above always beats the browser's built-in [hidden] default regardless
of specificity - without this, applyRoleGating's navAdmin.hidden/navViewer.hidden (app.js) never
actually hid the Admin/3D Viewer items for a non-Admin role; they just kept rendering as normal
flex items. Only ever surfaced when actually testing a non-Admin account, since an Admin session
is supposed to see both anyway. */
#nav-rail .nav-item[hidden] { display: none; }
/* The "Workspace"/"Administration" section labels above each nav group - #nav-admin-divider is the
exact same element applyRoleGating already shows/hides (see its own JS comment), just rendering
as a real label now instead of a thin divider line, so the role boundary carries information
instead of only implying one. */
.nav-group-label {
font-size: var(--text-2xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.35);
padding: var(--space-3) var(--space-2) 4px;
}
.nav-group-label:first-child { padding-top: 4px; }
/* Same display:flex-vs-[hidden] cascade note as #nav-rail .nav-item[hidden] above. */
.nav-group-label[hidden] { display: none; }
/* Pinned to the bottom of the rail's own full-height flex column (#nav-rail is display:flex;
flex-direction:column, sitting outside #sidebar's own nav so it's a direct flex child of the
rail, not competing with #sidebar's tab buttons for space) - out of the way of the actual
navigation above it, but still always reachable.
Kept compact/circular (unlike the full-width nav-item rows above it) - the same "icon inside a
ring" look it had as a pill button in the original header design, so it still reads as a
distinct control (a setting/preference) rather than another tab to click; align-self:flex-start
overrides #sidebar-adjacent stretch behavior now that #nav-rail's own children default to
filling the rail's width.
NOTE the doubled-up #nav-rail #theme-toggle-btn selector (two IDs, not one) - #nav-rail
.nav-item's own `border-left: none` above is an ID+class selector, which OUTRANKS a plain
#theme-toggle-btn (a single ID) on that one property specifically - the border rendered on 3
sides but not the left, which is exactly what a per-property (not per-rule) cascade loss looks
like. Two IDs beats one ID+class outright. */
#nav-rail #theme-toggle-btn {
width: 40px; height: 40px; align-self: flex-start; justify-content: center;
margin-top: auto; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 50%;
}
#nav-rail #theme-toggle-btn:hover { border-color: rgba(255, 255, 255, 0.4); }
/* ---------- Current user badge / logout ---------- */
.current-user-badge {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-xs);
color: var(--text-secondary);
}
/* Author-origin display:flex above always beats the browser's built-in [hidden] default regardless
of specificity - this explicit override is required, not decorative. Same pattern as .login-overlay. */
.current-user-badge[hidden] { display: none; }
#current-user-name { font-weight: 700; color: var(--text-primary); }
.role-pill {
background: var(--card-bg-inner);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
padding: 3px 10px;
font-size: var(--text-2xs);
font-weight: 600;
color: var(--text-primary);
}
/* Opens the My Account modal - just the avatar + name, kept visually part of the same
.current-user-badge cluster as the role pill/Log Out next to it, not its own separate control. */
.my-account-trigger {
display: flex; align-items: center; gap: 6px;
background: none; border: none; padding: 0; cursor: pointer;
font: inherit; color: var(--text-secondary);
}
.my-account-trigger:hover #current-user-name { text-decoration: underline; }
.header-avatar {
width: 22px; height: 22px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: var(--card-bg-inner); border: 1px solid var(--border); color: var(--text-secondary);
}
.header-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* max-height/overflow-y - this card grew past a typical viewport's height once the password and
notification-preferences sections were added below the original profile form; .login-card
itself has no scroll handling (fine for the shorter login/forgot-password cards that reuse it),
so without this the bottom of the card - and, worse, the close button up top once you've
scrolled the page under it - become unreachable. Scoped to .account-card specifically rather
than widening .login-card's own rule, so the shorter modals that share that class are untouched. */
.account-card { width: 360px; text-align: left; max-height: 85vh; overflow-y: auto; }
.account-card h2 { margin: 4px 0 var(--space-4) 0; font-size: var(--text-md); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-heading); }
.account-card input:disabled { background: var(--card-bg-inner); color: var(--text-secondary); cursor: not-allowed; }
/* width/resize only - border/padding/background/color already come from the shared
"select, input[...], textarea" rule earlier in this file. */
.account-card textarea { width: 100%; resize: vertical; margin-bottom: 2px; }
#account-bio-count { text-align: right; margin: 0 0 var(--space-3) 0; }
/* Divider between the profile form and the password-change form below it - see the Change
Password section in index.html. */
.account-section-rule { border: none; border-top: 1px solid var(--border); margin: var(--space-4) 0; }
.notification-pref-row {
display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs);
color: var(--text-primary); padding: 6px 0; cursor: pointer;
}
/* .login-card's own bare `input` rule (width:100%; margin-bottom:...) is meant for the text
fields elsewhere in this same card - with no [type] qualifier it also caught these checkboxes,
stretching each one to the row's full width and pushing its label text down/off to the side.
Checkboxes need their natural size back, not the text-field treatment. */
.notification-pref-row input[type="checkbox"] { width: auto; margin-bottom: 0; flex-shrink: 0; }
.account-avatar-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.account-avatar {
width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: var(--card-bg-inner); border: 1px solid var(--border); color: var(--text-secondary);
}
.account-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-avatar-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.account-avatar-actions label.btn-secondary { display: inline-block; cursor: pointer; padding: 8px 14px; }
.link-btn {
background: none;
border: none;
color: var(--brand-red-bright);
font-size: var(--text-xs);
font-weight: 600;
cursor: pointer;
padding: 0;
}
.link-btn:hover { text-decoration: underline; }
.delete-btn { color: var(--status-red-ink); }
.login-btn {
background: transparent;
border: 1px solid var(--text-primary);
border-radius: var(--radius-sm);
color: var(--text-primary);
padding: 8px 16px;
font-size: var(--text-2xs);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
}
.login-btn:hover { border-color: var(--brand-red-deep); color: var(--brand-red-deep); }
/* ---------- Notifications (see Services/NotificationService.cs) ---------- */
.notifications-wrap { position: relative; }
.notifications-btn {
background: transparent; border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
color: var(--text-secondary); width: 34px; height: 34px;
display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
position: relative;
}
.notifications-btn:hover { border-color: var(--brand-red-bright); color: var(--brand-red-bright); }
.notifications-badge {
position: absolute; top: -4px; right: -4px;
background: var(--brand-red-action); color: #fff;
border-radius: var(--radius-pill); min-width: 16px; height: 16px; padding: 0 4px;
font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
border: 2px solid var(--bg);
}
.notifications-panel {
position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
width: 340px; max-height: 420px; display: flex; flex-direction: column;
background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
}
/* Author-origin display:flex above always beats the browser's built-in [hidden] default regardless
of specificity - same required-not-decorative override as .current-user-badge/.lightbox-details. */
.notifications-panel[hidden] { display: none; }
.notifications-panel-header {
display: flex; align-items: center; justify-content: space-between;
padding: var(--space-3) var(--space-3) var(--space-2); border-bottom: 1px solid var(--border);
}
.notifications-panel-header h3 { margin: 0; font-size: var(--text-sm); }
.notifications-panel-actions { display: flex; align-items: center; gap: var(--space-2); }
.notifications-panel-actions-sep { width: 1px; height: 12px; background: var(--border); }
.notifications-list { overflow-y: auto; padding: var(--space-2); }
/* ---------- Project switcher (rail) - Organization -> Project browser (see
#project-switcher-wrap in index.html, app.js's "Header project switcher popover" section, name
kept even though it lives in the rail now - Phase 2 moved it here so "who am I working for,
which project" is visible on every tab, not just ones that happen to restate it - see the
Phase 0 UX audit's own findings on both counts). Same position:relative anchor + absolutely-
positioned panel toggled via [hidden] as the Notifications popover; the POPOVER itself
(.project-switcher-panel below) is unchanged from before the move - still a plain light card
regardless of the rail's own fixed-dark background, same as how it always looked. Only the
TRIGGER button is restyled here, with fixed rail-appropriate colors (not theme tokens) for the
same reason #nav-rail .nav-item uses them - see that rule's own comment. */
.project-switcher-wrap { position: relative; display: block; margin-bottom: var(--space-2); }
.project-switcher-btn {
width: 100%; background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.14); padding: 9px 10px;
border-radius: var(--radius-md); cursor: pointer; font: inherit;
display: flex; align-items: center; justify-content: space-between; gap: 6px;
text-align: left; transition: background-color 0.12s ease, border-color 0.12s ease;
}
.project-switcher-btn:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.22); }
.project-switcher-btn:focus-visible { outline: 2px solid var(--brand-red-bright); outline-offset: 1px; }
.project-switcher-btn svg { color: rgba(255, 255, 255, 0.45); flex-shrink: 0; }
.project-switcher-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#header-current-org {
font-weight: 600; color: rgba(255, 255, 255, 0.5); font-size: var(--text-2xs);
letter-spacing: 0.02em; text-transform: uppercase;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#header-current-project {
font-weight: 700; color: #FFFFFF; font-size: var(--text-sm);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.project-switcher-panel {
position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
width: 320px; max-height: 440px; overflow-y: auto;
background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md);
box-shadow: var(--shadow-lg); padding: var(--space-3);
}
/* Author-origin display:block (the default for a bare