/* ══════════════════════════════════════════════════════
Surf Shell v2 — Top bar + Drawer + Scrim + +New menu
Every rule is rooted under .surf-shell-v2 to prevent
leakage to non-surf pages.
══════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────── */
/* 0. Global accent token (shell-defined, app-wide) */
/* Phase 1 cohesion pass (2026-05-05): a single */
/* accent token that every Surf surface honors. */
/* Surfaces drifting onto literal #3b82f6 or the */
/* legacy --primary fallback should resolve through */
/* --surf-accent so theme + drift guards stay tight.*/
/* ─────────────────────────────────────────────────── */
:root {
--surf-accent: #2563eb;
}
/* ─────────────────────────────────────────────────── */
/* 0b. Global radius tokens (shape vocabulary) */
/* Phase 1 shape pass (2026-05-21): one place to */
/* flip Surf's roundedness. Chrome surfaces resolve */
/* through these tokens so future shape tweaks are */
/* a 1-line change here, not a sweep across files. */
/* */
/* To retune the whole brand: change --surf-radius- */
/* sharp. To undo just the pill→sharp flattening: */
/* point --surf-radius-pill at 999px instead of */
/* var(--surf-radius-sharp). */
/* ─────────────────────────────────────────────────── */
:root {
/* Primitives — these are the knobs */
--surf-radius-sharp: 2px; /* default chrome (buttons, inputs, badges, panels) */
--surf-radius-square: 0; /* full-bleed surfaces (topbar, drawer edges) */
--surf-radius-circle: 50%; /* genuine circular shapes (avatars, dots) */
/* Semantic alias — flip independently to revert one shape class */
--surf-radius-pill: var(--surf-radius-sharp); /* was 999px; set to 999px to restore pill aesthetic */
/* Legacy escape hatch — opt-in for surfaces not yet flattened */
--surf-radius-legacy-soft: 8px;
}
/* ─────────────────────────────────────────────────── */
/* 1. Tokens */
/* ─────────────────────────────────────────────────── */
.surf-shell-v2 {
/* Pure-black palette (re-tokenized 2026-05-21 — Chunk 2 of
deploy-signal-and-pure-black-theme PLAN). Body = #000, layered
surfaces are neutral dark grays (no blue cast), text is near-pure-white
(#fafafa default, #ffffff for emphasis), muted is neutral gray.
Accent stays at #2563eb — the only colored element in the shell. */
--surf-shell-page: #000000;
--surf-shell-sheet: #0a0a0a;
--surf-shell-soft: #161616;
--surf-shell-line: #262626;
--surf-shell-text: #fafafa;
--surf-shell-text-strong: #ffffff;
--surf-shell-muted: #a3a3a3;
--surf-shell-accent: var(--surf-accent);
--surf-shell-accent-soft: rgba(37,99,235,0.18);
--surf-shell-topbar-h: 65px;
--surf-shell-rail-w: 232px;
--surf-shell-overlay-w: 264px;
--surf-shell-rdrawer-w: 320px;
--surf-shell-z-topbar: 10;
--surf-shell-z-drawer: 70;
--surf-shell-z-scrim: 65;
--surf-shell-z-newmenu: 80;
/* Right drawer (Create / Mako History) is a MODAL overlay at all
breakpoints, so it + its scrim sit above the (non-modal) left rail. */
--surf-shell-z-rscrim: 85;
--surf-shell-z-rdrawer: 90;
}
/* ─────────────────────────────────────────────────── */
/* 2. Width neutralizer (defeats legacy .surf-shell) */
/* ─────────────────────────────────────────────────── */
.surf-shell-v2.surf-shell--full {
max-width: none;
margin: 0;
padding: 0;
width: 100%;
background: var(--surf-shell-page);
color: var(--surf-shell-text);
min-height: 100vh;
/* Belt-and-suspenders horizontal-overflow guard. Inner pages should
never push the shell past the viewport; if any descendant has an
intrinsic width that overflows, it gets clipped here instead of
producing a body-level scroll bar. */
overflow-x: clip;
}
/* min-width:0 must apply at ALL breakpoints — the rail/grid layout sets
its own at ≥1000px (section 8), but the overlay-mode body uses
display:block where flex-children inside .surf-shell-content can still
force horizontal overflow on phones if min-width isn't pinned. */
.surf-shell-v2 .surf-shell-content {
min-width: 0;
width: 100%;
box-sizing: border-box;
}
/* ─────────────────────────────────────────────────── */
/* 3. Top bar */
/* ─────────────────────────────────────────────────── */
.surf-shell-v2 .surf-shell-header {
position: sticky;
top: 0;
z-index: var(--surf-shell-z-topbar);
}
/* Topbar = flush row of full-height tiles. No padding, no gaps —
hamburger / brand / search / +New all touch edge-to-edge. Background
matches the page bg so the topbar blends into the body with no
visible band. */
.surf-shell-v2 .surf-shell-topbar {
display: flex;
align-items: stretch; /* tiles fill the topbar's full height */
gap: 0;
height: var(--surf-shell-topbar-h);
padding: 0;
background: var(--surf-shell-page);
}
.surf-shell-v2 .surf-shell-topbar-left {
display: flex;
align-items: stretch;
gap: 0;
flex-shrink: 0;
}
.surf-shell-v2 .surf-shell-topbar-right {
display: flex;
align-items: stretch;
gap: 0;
flex-shrink: 0;
margin-left: auto;
}
.surf-shell-v2 .surf-shell-hamburger {
width: var(--surf-shell-topbar-h);
height: var(--surf-shell-topbar-h);
border-radius: var(--surf-radius-square);
border: none;
border-right: 1px solid var(--surf-shell-line);
background: var(--surf-shell-sheet);
color: var(--surf-shell-text);
cursor: pointer;
display: grid;
place-items: center;
}
.surf-shell-v2 .surf-shell-hamburger:hover {
background: var(--surf-shell-soft);
}
.surf-shell-v2 .surf-shell-hamburger svg {
/* Override template's 18×18 icon — scale up for the 65×65 tile. */
width: 26px;
height: 26px;
stroke-width: 2;
}
.surf-shell-v2 .surf-shell-brand {
display: flex;
align-items: center;
padding: 0 16px;
text-decoration: none;
border-right: 1px solid var(--surf-shell-line);
}
.surf-shell-v2 .surf-shell-brand-logo {
display: block;
height: 26px;
width: auto;
}
/* ─────────────────────────────────────────────────── */
/* 4. Search bar — full-height, fills the middle */
/* ─────────────────────────────────────────────────── */
.surf-shell-v2 .surf-shell-search {
flex: 1;
height: 100%;
min-width: 0;
border-radius: var(--surf-radius-square);
background: var(--surf-shell-soft);
display: flex;
align-items: center;
gap: 10px;
padding: 0 16px;
}
.surf-shell-v2 .surf-shell-search-icon {
color: var(--surf-shell-muted);
flex-shrink: 0;
}
.surf-shell-v2 .surf-shell-search-input {
flex: 1;
border: none;
background: transparent;
outline: none;
color: var(--surf-shell-text);
font-size: 17px;
font-weight: 600;
line-height: 1.2;
}
.surf-shell-v2 .surf-shell-search-input::placeholder {
color: var(--surf-shell-muted);
font-size: 17px;
font-weight: 700;
opacity: 1;
}
@media (max-width: 599px) {
.surf-shell-v2 .surf-shell-brand { padding: 0 12px; }
.surf-shell-v2 .surf-shell-brand-logo { height: 22px; }
.surf-shell-v2 .surf-shell-search { padding: 0 12px; }
}
/* ─────────────────────────────────────────────────── */
/* 5. +New button — perfect square, glued to search */
/* ─────────────────────────────────────────────────── */
.surf-shell-v2 .surf-shell-newmenu-wrap {
position: relative;
display: flex;
}
.surf-shell-v2 .surf-shell-new-btn {
/* Mobile/medium: perfect 65×65 square, icon-only.
≥1000px: widens to fit the "Create" label (still full topbar height,
still glued to the search bar's right edge). */
width: var(--surf-shell-topbar-h);
height: var(--surf-shell-topbar-h);
padding: 0;
border-radius: var(--surf-radius-square);
border: none;
border-left: 1px solid var(--surf-shell-line);
background: var(--surf-shell-accent);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
cursor: pointer;
font-weight: 600;
letter-spacing: -0.1px;
}
.surf-shell-v2 .surf-shell-new-btn:hover { background: #1d4ed8; }
.surf-shell-v2 .surf-shell-new-btn svg {
/* Override template's small 14×14 icon — scale up for the 65×65 tile. */
width: 26px;
height: 26px;
stroke-width: 2;
}
.surf-shell-v2 .surf-shell-new-label { display: none; } /* icon-only by default */
/* Reveal the "Create" label on tablet+ (≥768px). Mobile stays icon-only. */
@media (min-width: 768px) {
.surf-shell-v2 .surf-shell-new-btn {
width: auto;
padding: 0 24px;
}
.surf-shell-v2 .surf-shell-new-label {
display: inline;
font-size: 0.95rem; /* bump from 14px so "Create" reads as a CTA, not a label */
font-weight: 700; /* stronger than the button's base 600 */
line-height: 1;
}
}
/* ─────────────────────────────────────────────────── */
/* 6. +New dropdown */
/* ─────────────────────────────────────────────────── */
.surf-shell-v2 .surf-shell-newmenu {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 232px;
padding: 6px;
background: var(--surf-shell-sheet);
border: 1px solid var(--surf-shell-line);
border-radius: var(--surf-radius-sharp);
box-shadow: 0 18px 40px rgba(0,0,0,0.4),
0 4px 12px rgba(0,0,0,0.3);
z-index: var(--surf-shell-z-newmenu);
display: flex;
flex-direction: column;
gap: 0;
}
.surf-shell-v2 .surf-shell-newmenu[hidden] { display: none; }
.surf-shell-v2 .surf-shell-newmenu-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px;
border-radius: var(--surf-radius-sharp);
background: transparent;
border: none;
cursor: pointer;
color: var(--surf-shell-text);
text-align: left;
text-decoration: none;
font: inherit;
width: 100%;
}
.surf-shell-v2 .surf-shell-newmenu-item:hover {
background: var(--surf-shell-soft);
}
.surf-shell-v2 .surf-shell-newmenu-icon {
width: 34px;
height: 34px;
border-radius: var(--surf-radius-sharp);
background: var(--surf-shell-soft);
display: grid;
place-items: center;
flex-shrink: 0;
color: var(--surf-shell-text);
}
.surf-shell-v2 .surf-shell-newmenu-text {
display: flex;
flex-direction: column;
gap: 1px;
flex: 1;
min-width: 0;
}
.surf-shell-v2 .surf-shell-newmenu-label {
font-size: 14px;
font-weight: 600;
letter-spacing: -0.15px;
}
.surf-shell-v2 .surf-shell-newmenu-sub {
font-size: 11.5px;
color: var(--surf-shell-muted);
}
/* ─────────────────────────────────────────────────── */
/* 7. Drawer — base */
/* ─────────────────────────────────────────────────── */
.surf-shell-v2 .surf-shell-drawer {
background: var(--surf-shell-sheet);
border-right: 1px solid var(--surf-shell-line);
display: flex;
flex-direction: column;
}
/* The nav itself is the flex column that holds the row strips + spacer +
bottom workspace switcher. Set flex:1 so it consumes the drawer's full
height (drawer is sticky 100vh on desktop), and display:flex so the
.surf-shell-drawer-spacer can push the workspace switcher + theme rows
to the bottom edge. Mirror in the overlay rule below. */
.surf-shell-v2 .surf-shell-drawer-nav {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
/* Drawer rows = full-width strips that span the drawer's left/right edges.
Horizontal inset gives the icon some breathing room from the viewport
edge without breaking the edge-to-edge paint of hover/active states
(the background fills the full strip via the row's box). Vertical
sizing is `min-height` rather than padding so the strip stays a clean
uniform-height tile regardless of label length. */
.surf-shell-v2 .surf-shell-drawer-row {
display: flex;
align-items: center;
gap: 12px;
padding: 0 16px;
min-height: 44px;
border-radius: var(--surf-radius-square);
color: var(--surf-shell-text);
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: background 120ms ease-out;
}
.surf-shell-v2 .surf-shell-drawer-row:hover {
background: var(--surf-shell-soft);
}
.surf-shell-v2 .surf-shell-drawer-row.is-active {
background: var(--surf-shell-accent-soft);
color: var(--surf-shell-accent);
font-weight: 600;
}
.surf-shell-v2 .surf-shell-drawer-icon {
flex-shrink: 0;
}
/* Brand/mono nav icons (Docs, Tasks, Mako, Repos, Cloud, Messages) rendered via
CSS mask so a single monochrome SVG recolors with currentColor — light on the
dark rail, accent when the row is .is-active — exactly like the inline line
icons (Wiki, More). The source SVG's own fill/stroke color is irrelevant; the
mask uses its shape. Each row sets the source via --surf-drawer-icon. */
.surf-shell-v2 .surf-shell-drawer-icon--img {
width: 18px;
height: 18px;
background-color: currentColor;
-webkit-mask: var(--surf-drawer-icon) center / contain no-repeat;
mask: var(--surf-drawer-icon) center / contain no-repeat;
}
.surf-shell-v2 .surf-shell-drawer-close { display: none; }
/* Workspace switcher — lives at the BOTTOM of the drawer nav (relocated
2026-05-23). Provides at-a-glance "which workspace am I in" without a
click, separated from the Docs/Tasks/Mako nav-mode rows by the flex
spacer above. The spacer alone does the separating — no divider line
(dividers removed shell-wide 2026-05-25; spacing carries the grouping). */
.surf-shell-v2 .surf-shell-drawer-spacer {
flex: 1 1 auto;
min-height: 12px;
}
.surf-shell-v2 .surf-shell-drawer-ws {
min-height: 52px;
padding-right: 12px;
flex-shrink: 0;
}
.surf-shell-v2 .surf-shell-drawer-ws-dot {
width: 10px;
height: 10px;
border-radius: var(--surf-radius-circle);
background: var(--surf-accent);
flex-shrink: 0;
margin-left: 3px;
}
.surf-shell-v2 .surf-shell-drawer-ws-text {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.surf-shell-v2 .surf-shell-drawer-ws-label {
font-size: 11px;
font-weight: 500;
color: var(--surf-shell-muted);
letter-spacing: 0.3px;
text-transform: uppercase;
line-height: 1.2;
}
.surf-shell-v2 .surf-shell-drawer-ws-name {
font-weight: 600;
font-size: 13.5px;
color: var(--surf-shell-text-strong);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.25;
}
.surf-shell-v2 .surf-shell-drawer-ws-chev {
color: var(--surf-shell-muted);
flex-shrink: 0;
}
/* Drawer brand (logo + close button row). Lives at the top of the drawer
when the drawer is in overlay mode — shown on every viewport when the
drawer-header is visible (mobile by default, plus /mako at desktop via
the mako-chat.css overlay override). Hoisted out of the <1000px media
query so the desktop overlay case styles correctly too. */
.surf-shell-v2 .surf-shell-drawer-brand {
display: flex;
align-items: center;
text-decoration: none;
}
/* The universal `img { height: auto }` rule in surf-ui.css/surfdoc.css
overrides the template's HTML `height="22"` attribute on the drawer
logo, so it would otherwise render at its natural 80px height. Pin
it explicitly so the drawer header stays compact. */
.surf-shell-v2 .surf-shell-drawer-brand img {
display: block;
height: 22px;
width: auto;
}
/* ─────────────────────────────────────────────────── */
/* 8. Drawer — toggleable overlay rail (≥1000px) */
/* */
/* The rail's width is reserved as a PERMANENT left */
/* gutter (padding-left on the body). Page content */
/* keeps that left offset whether the drawer is open */
/* or closed, so toggling the drawer NEVER shifts the */
/* content — the single hard requirement from the user.*/
/* The drawer itself is a fixed overlay that slides */
/* into (open, default) or out of (closed) that gutter.*/
/* Non-modal on desktop: no scrim, content stays fully */
/* interactive while the rail is open. Open/closed is */
/* persisted to localStorage by surf-shell.js. */
/* ─────────────────────────────────────────────────── */
@media (min-width: 1000px) {
.surf-shell-v2 .surf-shell-body {
display: block;
padding-left: var(--surf-shell-rail-w);
}
.surf-shell-v2 .surf-shell-drawer {
position: fixed;
top: var(--surf-shell-topbar-h);
left: 0;
bottom: 0;
width: var(--surf-shell-rail-w);
padding: 0; /* rows extend edge-to-edge */
overflow-y: auto;
z-index: var(--surf-shell-z-drawer);
transform: translateX(0); /* open by default on desktop */
transition: transform 200ms cubic-bezier(.2,.8,.2,1);
}
/* Explicitly closed (user toggled it shut; persisted). Slides out of the
reserved gutter; the empty gutter remains so content does not move. */
.surf-shell-v2 .surf-shell-drawer[data-rail-open="false"] {
transform: translateX(-100%);
}
.surf-shell-v2 .surf-shell-drawer-header { display: none; }
/* .surf-shell-content min-width:0 is now set unconditionally above. */
}
/* ─────────────────────────────────────────────────── */
/* 9. Drawer — overlay (<1000px) */
/* ─────────────────────────────────────────────────── */
@media (max-width: 999px) {
.surf-shell-v2 .surf-shell-body { display: block; }
.surf-shell-v2 .surf-shell-drawer {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: var(--surf-shell-overlay-w);
z-index: var(--surf-shell-z-drawer);
transform: translateX(-100%);
transition: transform 200ms cubic-bezier(.2,.8,.2,1);
box-shadow: 4px 0 24px rgba(0,0,0,0.4);
}
.surf-shell-v2 .surf-shell-drawer[data-rail-open="true"] {
transform: translateX(0);
}
.surf-shell-v2 .surf-shell-drawer-header {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
min-height: 56px;
}
.surf-shell-v2 .surf-shell-drawer-close {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: var(--surf-radius-sharp);
border: none;
background: transparent;
color: var(--surf-shell-muted);
cursor: pointer;
margin-left: auto;
}
.surf-shell-v2 .surf-shell-drawer-close:hover {
background: var(--surf-shell-soft);
color: var(--surf-shell-text);
}
.surf-shell-v2 .surf-shell-drawer-nav {
padding: 0; /* rows extend edge-to-edge */
overflow-y: auto;
flex: 1;
}
.surf-shell-v2 .surf-shell-drawer-row {
padding: 0 16px; /* mobile keeps the same inset rule */
min-height: 48px; /* slightly taller for finger taps */
font-size: 14px;
}
}
/* ─────────────────────────────────────────────────── */
/* 10. Scrim */
/* ─────────────────────────────────────────────────── */
.surf-shell-v2 .surf-shell-scrim {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.32);
z-index: var(--surf-shell-z-scrim);
opacity: 0;
pointer-events: none;
transition: opacity 180ms ease-out;
}
/* Mobile: the LEFT rail is modal — scrim shows when it's open. */
@media (max-width: 999px) {
.surf-shell-v2 .surf-shell-drawer[data-rail-open="true"] ~ .surf-shell-scrim {
opacity: 1;
pointer-events: auto;
}
}
/* Any breakpoint: a RIGHT drawer (Create / History) is modal, so the scrim
shows and is raised above the non-modal left rail. JS toggles
.surf-shell--rdrawer-open on the shell root. (Previously this section set
`display:none` on the scrim at ≥1000px; removed so the desktop right-drawer
can dim the page — the left rail's desktop non-modal behavior is unaffected
because its scrim trigger is scoped to the ≤999px block above.) */
.surf-shell-v2.surf-shell--rdrawer-open .surf-shell-scrim {
opacity: 1;
pointer-events: auto;
z-index: var(--surf-shell-z-rscrim);
}
/* ─────────────────────────────────────────────────── */
/* 11. Right drawer (Create / Mako History) */
/* */
/* A reusable MODAL panel that slides in from the */
/* right, mirroring the left rail's look. Multiple */
/* panels can coexist (Create on every page, History */
/* on /mako); each carries [data-rdrawer] + a unique */
/* id. surf-shell.js opens one at a time and toggles */
/* .surf-shell--rdrawer-open on the root to drive the */
/* shared scrim. Modal on ALL breakpoints — unlike the */
/* left rail, opening it dims the page. */
/* ─────────────────────────────────────────────────── */
.surf-shell-v2 .surf-shell-rdrawer {
position: fixed;
top: var(--surf-shell-topbar-h);
right: 0;
bottom: 0;
width: var(--surf-shell-rdrawer-w);
max-width: 92vw;
background: var(--surf-shell-sheet);
border-left: 1px solid var(--surf-shell-line);
box-shadow: -4px 0 24px rgba(0,0,0,0.4);
z-index: var(--surf-shell-z-rdrawer);
transform: translateX(100%);
transition: transform 200ms cubic-bezier(.2,.8,.2,1);
display: flex;
flex-direction: column;
overflow: hidden;
}
.surf-shell-v2 .surf-shell-rdrawer[data-rdrawer-open="true"] {
transform: translateX(0);
}
/* Mobile: full height so it reads as a sheet over the whole viewport. */
@media (max-width: 999px) {
.surf-shell-v2 .surf-shell-rdrawer { top: 0; }
}
.surf-shell-v2 .surf-shell-rdrawer-header {
display: flex;
align-items: center;
gap: 10px;
min-height: 56px;
padding: 0 8px 0 16px;
flex-shrink: 0;
}
.surf-shell-v2 .surf-shell-rdrawer-title {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--surf-shell-text-strong);
flex: 1;
}
.surf-shell-v2 .surf-shell-rdrawer-close {
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: var(--surf-radius-square);
border: none;
background: transparent;
color: var(--surf-shell-muted);
cursor: pointer;
flex-shrink: 0;
}
.surf-shell-v2 .surf-shell-rdrawer-close:hover {
background: var(--surf-shell-soft);
color: var(--surf-shell-text);
}
.surf-shell-v2 .surf-shell-rdrawer-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 8px 0;
}
/* Create-style rows inside a right drawer — full-width tappable rows with an
icon chip + label + optional sub-label. */
.surf-shell-v2 .surf-shell-rdrawer-item {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 10px 16px;
border: none;
background: transparent;
color: var(--surf-shell-text);
font-size: 13.5px;
font-weight: 500;
text-align: left;
text-decoration: none;
cursor: pointer;
font-family: inherit;
}
.surf-shell-v2 .surf-shell-rdrawer-item:hover {
background: var(--surf-shell-soft);
}
.surf-shell-v2 .surf-shell-rdrawer-item-icon {
flex-shrink: 0;
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: var(--surf-radius-square);
background: var(--surf-shell-soft);
color: var(--surf-shell-text);
}
.surf-shell-v2 .surf-shell-rdrawer-item:hover .surf-shell-rdrawer-item-icon {
background: var(--surf-shell-line);
}
.surf-shell-v2 .surf-shell-rdrawer-item-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.surf-shell-v2 .surf-shell-rdrawer-item-label {
font-weight: 600;
line-height: 1.25;
}
.surf-shell-v2 .surf-shell-rdrawer-item-sub {
font-size: 11.5px;
color: var(--surf-shell-muted);
line-height: 1.2;
}
.surf-shell-v2 .surf-shell-rdrawer-section {
padding: 12px 16px 4px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.4px;
text-transform: uppercase;
color: var(--surf-shell-muted);
}
/* ─────────────────────────────────────────────────── */
/* 10b. Page-title header — universal component */
/* */
/* The title row that sits directly under the topbar. */
/* Filled per-page via the {% block page_header %} in */
/* surf/base.html (empty by default, so unmigrated */
/* pages render nothing). */
/* */
/* Anatomy (two-row model — toolbar is a SEPARATE row): */
/* */
/* */
/* Contract (revised 2026-05-24, universal-nav-shell — */
/* supersedes the old "title only / one noun / never */
/* 'Surf Docs'" rule): */
/* - Icon (left) is REQUIRED for every page (E5). */
/* - Title is a short page name; "Surf Docs" is fine. */
/* - Right slot is supporting info copy (counts, */
/* status), configurable per page. NOT action */
/* buttons — those live in the Tool Bar row below. */
/* - Edge-to-edge: no divider line; the title's own */
/* weight + page spacing carry the boundary. Internal */
/* padding only. */
/* ─────────────────────────────────────────────────── */
.surf-shell-v2 .surf-page-header {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 24px;
background: var(--surf-shell-page);
}
.surf-shell-v2 .surf-page-header-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--surf-shell-accent);
}
.surf-shell-v2 .surf-page-header-icon svg {
display: block;
width: 22px;
height: 22px;
}
.surf-shell-v2 .surf-page-header-title {
margin: 0;
font-size: 24px;
font-weight: 700;
letter-spacing: -0.5px;
line-height: 1.2;
color: var(--surf-shell-text-strong, var(--surf-shell-text));
}
/* Supporting info copy — right-aligned, muted, secondary to the title. */
.surf-shell-v2 .surf-page-header-info {
margin-left: auto;
font-size: 13px;
font-weight: 500;
color: var(--surf-shell-muted);
white-space: nowrap;
}
.surf-shell-v2 .surf-page-header-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: var(--space-2);
}
/* ─────────────────────────────────────────────────── */
/* 10c. Tool Bar — universal component */
/* */
/* A SECOND row below the page-title header. Workspace */
/* switcher always on the LEFT (reuses ws-context- */
/* header.html), page-specific action buttons on the */
/* right. Filled per-page via {% block page_toolbar %} */
/* in surf/base.html (empty by default). */
/* ─────────────────────────────────────────────────── */
.surf-shell-v2 .surf-toolbar {
display: flex;
align-items: center;
gap: 8px;
min-height: 52px;
padding: 0 12px 0 16px;
background: var(--surf-shell-page);
}
.surf-shell-v2 .surf-toolbar .ws-context-header {
margin-right: auto; /* switcher pinned LEFT; actions flow to the right */
}
.surf-shell-v2 .surf-toolbar-actions {
display: flex;
align-items: center;
gap: 4px;
margin-left: auto;
}
.surf-shell-v2 .surf-toolbar-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 34px;
padding: 0 12px;
border: 1px solid var(--surf-shell-line);
border-radius: var(--surf-radius-square);
background: var(--surf-shell-sheet);
color: var(--surf-shell-text);
font-size: 13px;
font-weight: 500;
line-height: 1;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
font-family: inherit;
transition: background 120ms ease-out, border-color 120ms ease-out;
}
.surf-shell-v2 .surf-toolbar-btn:hover {
background: var(--surf-shell-soft);
border-color: var(--surf-shell-muted);
}
.surf-shell-v2 .surf-toolbar-btn.is-active {
background: var(--surf-shell-accent-soft);
border-color: var(--surf-shell-accent);
color: var(--surf-shell-accent);
font-weight: 600;
}
.surf-shell-v2 .surf-toolbar-btn--primary {
background: var(--surf-shell-accent, var(--surf-accent));
border-color: var(--surf-shell-accent, var(--surf-accent));
color: #fff;
font-weight: 600;
}
.surf-shell-v2 .surf-toolbar-btn--primary:hover {
filter: brightness(1.08);
background: var(--surf-shell-accent, var(--surf-accent));
}
.surf-shell-v2 .surf-toolbar-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
@media (max-width: 599px) {
.surf-shell-v2 .surf-toolbar { padding: 0 8px; min-height: 48px; }
.surf-shell-v2 .surf-toolbar-btn { padding: 0 9px; }
}
/* ── Full-height action buttons — "no wasted space" ──────────────────
When the actions slot uses the canonical .surf-page-header-btn, the
buttons fill the bar top-to-bottom and run flush to its right edge with
a full-bleed hover — exactly like the drawer nav rows
(.surf-shell-drawer-row). No padding pill, no rounded corners, no gaps.
Opt-in via :has() so existing pill/chip/status-pill headers (docs
toolbar, /surf/deploy) are untouched until they migrate to this class.
The header drops its vertical + right padding so the buttons reach the
edges; the title keeps its left inset and stays vertically centered, so
the row still reads the same as before. */
.surf-shell-v2 .surf-page-header:has(.surf-page-header-btn) {
align-items: stretch;
min-height: 56px;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
}
.surf-shell-v2 .surf-page-header:has(.surf-page-header-btn) .surf-page-header-title {
align-self: center;
}
.surf-shell-v2 .surf-page-header:has(.surf-page-header-btn) .surf-page-header-actions {
align-items: stretch;
gap: 0;
}
.surf-shell-v2 .surf-page-header-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 0 18px;
margin: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var(--surf-shell-text);
font-size: 13px;
font-weight: 500;
line-height: 1;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background 120ms ease-out;
}
.surf-shell-v2 .surf-page-header-btn:hover {
background: var(--surf-shell-soft);
}
.surf-shell-v2 .surf-page-header-btn.is-active {
background: var(--surf-shell-accent-soft);
color: var(--surf-shell-accent);
font-weight: 600;
}
/* Primary variant — the one emphasized action (e.g. "+ New"). Accent fill,
still full-height and flush; no left divider since the fill is the edge. */
.surf-shell-v2 .surf-page-header-btn--primary {
background: var(--surf-shell-accent, var(--surf-accent));
color: #fff;
font-weight: 600;
}
.surf-shell-v2 .surf-page-header-btn--primary:hover {
background: var(--surf-shell-accent, var(--surf-accent));
filter: brightness(1.08);
}
@media (max-width: 599px) {
.surf-shell-v2 .surf-page-header {
padding: 16px;
flex-wrap: wrap;
}
.surf-shell-v2 .surf-page-header:has(.surf-page-header-btn) {
min-height: 48px;
padding: 0 0 0 16px;
}
.surf-shell-v2 .surf-page-header-title {
font-size: 20px;
}
.surf-shell-v2 .surf-page-header-actions {
margin-left: 0;
width: 100%;
}
.surf-shell-v2 .surf-page-header:has(.surf-page-header-btn) .surf-page-header-actions {
width: auto; /* keep the buttons inline-flush, not stacked full-width */
}
.surf-shell-v2 .surf-page-header-btn {
padding: 0 14px;
}
}
/* ─────────────────────────────────────────────────── */
/* 11. Light theme overrides */
/* ─────────────────────────────────────────────────── */
[data-theme="light"] .surf-shell-v2 {
--surf-shell-page: #f7f8fc;
--surf-shell-sheet: #ffffff;
--surf-shell-soft: #eef1f7;
--surf-shell-line: #dde2ec;
--surf-shell-text: #0f1422;
--surf-shell-text-strong: #000000;
--surf-shell-muted: #6b7388;
--surf-shell-accent-soft: #e3ebff;
}
[data-theme="light"] .surf-shell-v2 .surf-shell-drawer {
box-shadow: 4px 0 24px rgba(15,23,42,0.18);
}
[data-theme="light"] .surf-shell-v2 .surf-shell-newmenu {
box-shadow: 0 18px 40px rgba(15,23,42,0.18),
0 4px 12px rgba(15,23,42,0.08);
}
@media (min-width: 1000px) {
[data-theme="light"] .surf-shell-v2 .surf-shell-drawer {
box-shadow: none;
}
}
/* ─────────────────────────────────────────────────── */
/* 12. Search dropdown (live HTMX suggest fragment) */
/* Anchored to .surf-shell-search (the pill form). */
/* z-index 81 sits one above the +New menu (80) */
/* so the dropdown wins when both are open. */
/* ─────────────────────────────────────────────────── */
.surf-shell-v2 .surf-shell-search { position: relative; }
.surf-shell-v2 .surf-shell-search-results {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
z-index: 81;
background: var(--surf-shell-sheet);
border: 1px solid var(--surf-shell-line);
border-radius: 12px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
padding: 6px;
max-height: 60vh;
overflow-y: auto;
}
.surf-shell-v2 .surf-shell-search-results[hidden] { display: none; }
.surf-shell-v2 .surf-shell-search-section { padding: 4px 0; }
.surf-shell-v2 .surf-shell-search-section + .surf-shell-search-section {
border-top: 1px solid var(--surf-shell-line);
}
.surf-shell-v2 .surf-shell-search-section-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--surf-shell-muted);
padding: 6px 10px 2px;
}
.surf-shell-v2 .surf-shell-search-row {
display: block;
padding: 8px 10px;
border-radius: 8px;
color: var(--surf-shell-text);
text-decoration: none;
}
.surf-shell-v2 .surf-shell-search-row:hover,
.surf-shell-v2 .surf-shell-search-row[aria-selected="true"] {
/* Was raw rgba(37, 99, 235, 0.12) — bumped to the accent-soft token
(0.18) for parity with the drawer is-active row and to read clearly
against the pure-black surface. */
background: var(--surf-shell-accent-soft);
color: var(--surf-shell-text);
}
.surf-shell-v2 .surf-shell-search-row-title {
display: block;
font-weight: 500;
}
.surf-shell-v2 .surf-shell-search-row-meta {
display: block;
font-size: 12px;
color: var(--surf-shell-muted);
margin-top: 2px;
}
.surf-shell-v2 .surf-shell-search-empty {
padding: 12px 10px;
color: var(--surf-shell-muted);
font-size: 13px;
}
/* ========================================================================
Workspace Context Header (E1 — 2026-05-23)
Reusable header strip placed at the top of pages that create/edit
workspace-scoped data (/surf/docs, /surf/tasks, /surf/code, /cloud,
/messages, /mako). Surfaces the active workspace + inline switcher.
Lives in surf-shell.css so the surf base template carries the styles
without each page needing its own .
See style guide section 12.6.
======================================================================== */
.ws-context-header {
position: relative;
display: flex;
align-items: center;
padding: 10px 16px;
background: var(--surf-shell-page, transparent);
font: inherit;
z-index: 5;
}
.ws-context-trigger {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
background: transparent;
border: 1px solid var(--surf-shell-line);
border-radius: var(--surf-radius-sharp, 0);
color: var(--surf-shell-text-strong);
font-size: 13px;
font-weight: 600;
cursor: pointer;
line-height: 1.2;
}
.ws-context-trigger:hover,
.ws-context-trigger[aria-expanded="true"] {
background: var(--surf-shell-hover, rgba(127,127,127,0.08));
}
.ws-context-trigger:focus-visible {
outline: 2px solid var(--surf-accent);
outline-offset: 2px;
}
.ws-context-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: var(--surf-radius-circle, 50%);
background: var(--color-primary, #3b82f6);
flex-shrink: 0;
}
.ws-context-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 220px;
}
.ws-context-chevron {
color: var(--surf-shell-muted);
flex-shrink: 0;
}
.ws-context-trigger[aria-expanded="true"] .ws-context-chevron {
transform: rotate(180deg);
}
.ws-context-menu {
position: absolute;
top: calc(100% - 1px);
left: 16px;
margin: 4px 0 0;
padding: 4px 0;
min-width: 240px;
max-width: 320px;
background: var(--surf-shell-page, #fff);
border: 1px solid var(--surf-shell-line);
border-radius: var(--surf-radius-sharp, 0);
box-shadow: var(--surf-shadow-md, 0 4px 12px rgba(0,0,0,0.12));
list-style: none;
z-index: 50;
}
.ws-context-menu[hidden] {
display: none;
}
.ws-context-loading {
padding: 8px 12px;
font-size: 12.5px;
color: var(--surf-shell-muted);
}
.ws-context-divider {
height: 1px;
background: var(--surf-shell-line);
margin: 4px 0;
border: 0;
padding: 0;
}
.ws-context-divider[hidden] {
display: none;
}
.ws-context-option-form {
margin: 0;
padding: 0;
}
.ws-context-option {
width: 100%;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: transparent;
border: 0;
border-radius: 0;
color: var(--surf-shell-text-strong);
font-size: 13px;
font-weight: 500;
text-align: left;
cursor: pointer;
line-height: 1.25;
}
.ws-context-option:hover,
.ws-context-option:focus-visible,
.ws-context-option[data-focused="true"] {
background: var(--surf-shell-hover, rgba(127,127,127,0.08));
outline: none;
}
.ws-context-option[aria-selected="true"] {
font-weight: 600;
}
.ws-context-option-dot {
width: 10px;
height: 10px;
border-radius: var(--surf-radius-circle, 50%);
background: var(--color-primary, #3b82f6);
flex-shrink: 0;
}
.ws-context-option-name {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ws-context-option-check {
color: var(--surf-accent, currentColor);
flex-shrink: 0;
}
.ws-context-option-check[hidden] {
display: none;
}
.ws-context-manage {
display: block;
padding: 8px 12px;
font-size: 12.5px;
color: var(--surf-shell-muted);
text-decoration: none;
}
.ws-context-manage:hover,
.ws-context-manage:focus-visible {
background: var(--surf-shell-hover, rgba(127,127,127,0.08));
color: var(--surf-shell-text-strong);
outline: none;
}
@media (max-width: 640px) {
.ws-context-header {
padding: 8px 12px;
}
.ws-context-menu {
left: 12px;
right: 12px;
min-width: 0;
max-width: none;
}
}