/* ── Layout ────────────────────────────────────────────────────────── */ .wrap { max-width: var(--content-max-width, 1120px); margin: 0 auto; padding: var(--space-2xl) var(--space-xl); } /* ── Full-width variant ─────────────────────────────────────────── Add .full-width to or a parent element to make both header and content span the full viewport. Used by external services (Projects, Warehouse) that run as standalone pages. ──────────────────────────────────────────────────────────────── */ .full-width .header-inner, .full-width .wrap { max-width: 100%; } /* ── Full-width Header Bar ───────────────────────────────────────── Wraps app-header + main-tabs. Background/border span viewport; inner content is constrained to --content-max-width. ──────────────────────────────────────────────────────────────────── */ .app-header-bar { position: sticky; top: 0; z-index: 100; background-color: var(--color-bg); } .app-header-bar .header-inner { max-width: var(--content-max-width, 1120px); margin: 0 auto; padding: var(--space-md) var(--space-xl) 0; } /* ── App Header ────────────────────────────────────────────────────── */ .app-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-lg); margin-bottom: 0; padding-bottom: 0; border-bottom: 1px solid var(--color-border); } .app-header .header-left h1 { margin: 0 0 0.25rem 0; font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); letter-spacing: -0.02em; } .app-header .header-left h1 a { color: inherit; text-decoration: none; } .app-header .header-left h1 a:hover { color: var(--color-accent); } .app-header .tagline { color: var(--color-text-muted); font-size: var(--font-size-lg); margin: 0; } .app-header .header-right { display: flex; align-items: center; gap: var(--space-md); flex-shrink: 0; } .app-header .header-right .header-user-name { font-size: var(--font-size-md); color: var(--color-danger); } .app-header .header-right a, .app-header .header-right button { font-size: var(--font-size-md); color: var(--color-text-muted); text-decoration: none; background: none; border: 1px solid var(--color-border); padding: 0.4rem 0.75rem; border-radius: var(--radius-md); cursor: pointer; font-family: inherit; } .app-header .header-right a:hover, .app-header .header-right button:hover { color: var(--color-accent); border-color: var(--color-accent); } /* ── Subpage Layout ──────────────────────────────────────────────── Used for detail/edit views that reuse the full-width header pattern but have their own sticky header and scrollable content area. Structure:
...
...
...
──────────────────────────────────────────────────────────────────── */ .subpage-wrap { max-width: 100%; padding: 0; } .subpage-fixed-header { position: sticky; top: 0; z-index: 100; background-color: var(--color-bg); padding: var(--space-md) var(--space-xl) 0.25rem; } .subpage-scroll-content { padding: 0 var(--space-xl) 3rem; } /* ── Page Toolbar ──────────────────────────────────────────────────── */ .page-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-lg); margin-bottom: 0; } .page-toolbar h1 { font-size: var(--font-size-3xl); margin: 0; }