/* overlay.css — shared overlay/dialog primitive (BB1).
*
* Phase 1, Task A (foundations — no behavior change): CSS only. These rules
* mirror the CURRENT visuals of .modal/.modal__backdrop and
* .sheet/.sheet__backdrop (components.css) 1:1, so that when js/lib/overlay.js
* lands (Task B) and modal.js/bottom-sheet.js are migrated onto it (Task C),
* swapping markup to these classes is a no-op visually. Nothing references
* these classes yet.
*
* See docs/superpowers/specs/2026-07-12-overlay-primitive-design.md
* ("CSS + tokens") and docs/superpowers/plans/2026-07-12-overlay-phase1.md
* (Task A).
*
* Structure:
*/
.overlay {
position: fixed;
inset: 0;
z-index: var(--z-modal);
display: flex;
align-items: center;
justify-content: center;
}
.overlay__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(4px);
}
.overlay__surface {
position: relative;
width: min(480px, calc(100% - var(--space-32)));
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-12);
padding: var(--space-24);
box-shadow: var(--shadow-lg);
}
/* Close button — the one place every overlay variant gets a real ≥44px tap
* target (spec: existing close buttons across the panel are 18-22px). Holds
* the icon("i-x") markup from js/lib/icons.js. */
.overlay__close {
position: absolute;
top: var(--space-8);
right: var(--space-8);
display: grid;
place-items: center;
min-width: 44px;
min-height: 44px;
background: transparent;
border: 0;
border-radius: var(--radius-8);
color: var(--text-tertiary);
cursor: pointer;
}
.overlay__close:hover {
color: var(--text-primary);
background: var(--bg-input);
}
.overlay__close svg {
display: block;
}
/* Footer — one core-owned action row for every modal-type variant. Mirrors the
(retiring) components.css `.modal__footer`; the `.modal__footer` class stays
only as a cycle.js querySelector hook with no CSS of its own after Task 8. */
.overlay__footer {
display: flex;
gap: var(--space-12);
justify-content: flex-end;
margin-top: var(--space-24);
}
/* Multi-action footer (≥3 buttons, e.g. the conflict resolver): allow wrap,
tighter gap. Mirrors the retiring `.modal__footer--multi`. */
.overlay__footer--multi {
flex-wrap: wrap;
gap: var(--space-8);
}
/* ---------- Modal variant — centered dialog (mirrors .modal / .modal__backdrop) ---------- */
.overlay--modal {
z-index: var(--z-modal);
}
/* ---------- Sheet variant — pinned to the bottom edge, slide-up affordance
(mirrors .sheet / .sheet__backdrop) ---------- */
.overlay--sheet {
align-items: flex-end;
}
.overlay--sheet .overlay__surface {
width: 100%;
max-width: 480px;
border-radius: var(--radius-12) var(--radius-12) 0 0;
/* the 0px is the var() fallback default for --bottom-tab-height (zero when the bar is
absent), not a spacing literal — leave */
padding: var(--space-12) var(--space-16) calc(var(--bottom-tab-height, 0px) + var(--space-16));
}
/* Mirrors .sheet__body (components.css) — the sheet body reads slightly
* smaller/secondary vs. the modal body's default text styling. */
.overlay--sheet .overlay__body {
font-size: var(--fs-secondary);
color: var(--text-secondary);
}
/* ---------- Danger variant (Task C) ----------
* Mirrors components.css's `.modal--danger .modal__footer .btn--primary` /
* `.modal__warn-banner` 1:1. Added here (rather than left unstyled) because
* Task C is what actually activates `danger` through openOverlay on BOTH the
* modal and sheet variants — without this rule the destructive-confirm
* signal (red primary button + warning banner) would silently disappear on
* every openConfirmDanger() call, desktop included, defeating the whole
* point of the migration ("mobile keeps trap AND danger"). */
.overlay--danger .overlay__footer .btn--primary {
background: linear-gradient(135deg, var(--danger), color-mix(in srgb, var(--danger) 70%, #000));
border-color: var(--danger);
color: #fff;
}
.overlay--danger .overlay__footer .btn--primary:hover {
filter: brightness(0.92);
}
.overlay__warn-banner {
padding: var(--space-12);
background: color-mix(in srgb, var(--danger) 12%, transparent);
border-left: 3px solid var(--danger);
border-radius: var(--radius-6);
color: var(--danger);
font-size: var(--fs-label);
margin-bottom: var(--space-12);
}
/* ---------- Slide-in variant — right-pinned, full-height panel
(mirrors the old .slide-in / .slide-in--wide in pages.css, adapted to the
shared .overlay__surface markup: the is the header bar, .overlay__body
scrolls, and the core's ≥44px .overlay__close sits top-right). The old
pages.css .slide-in* blocks go dead once slide-in.js emits these classes;
Phase 5 deletes them. ---------- */
.overlay--slide-in {
align-items: stretch;
justify-content: flex-end;
}
.overlay--slide-in .overlay__surface {
width: 380px;
max-width: 100%;
height: 100%;
padding: 0; /* header + body own their own padding */
border: 0;
border-left: 1px solid var(--border-subtle);
border-radius: 0;
box-shadow: -8px 0 24px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
}
/* Wide modifier (vacancy mapping + step editor). slide-in.js maps the caller's
legacy "slide-in--wide" class onto this overlay-owned name so the dead
pages.css `.slide-in--wide { width: 480px }` rule can't hijack the
full-viewport .overlay root. */
.overlay--slide-in-wide .overlay__surface {
width: 480px;
}
.overlay--slide-in .overlay__title {
margin: 0;
padding: var(--space-16);
padding-right: calc(var(--space-16) + 44px); /* clear the ≥44px close button */
border-bottom: 1px solid var(--border-subtle);
font-size: var(--fs-section);
font-weight: var(--fw-bold);
color: var(--text-primary);
}
.overlay--slide-in .overlay__body {
flex: 1;
overflow: auto;
padding: var(--space-16);
}
/* Mobile: full-width panel, no left border/shadow (the surface covers the
backdrop). Placed AFTER the wide rule so it overrides both widths. */
@media (max-width: 640px) {
.overlay--slide-in .overlay__surface,
.overlay--slide-in-wide .overlay__surface {
width: 100%;
border-left: 0;
box-shadow: none;
}
}
/* ---------- Popover variant — non-modal, anchor-positioned (JS sets fixed top/left).
The shell: elevated surface, border, shadow, rounded; width/inner styling come from the
caller's content class (e.g. .dd-menu / .workspace-picker / .hh-limits-popover, retired in
Phase 5). No backdrop element exists for popovers. ---------- */
.overlay--popover {
/* The root carries the bare `.overlay` class too (see overlay.js's markup
contract), whose own rule (top of file) is a full-viewport flex-center
wrapper for the modal/sheet/slide-in backdrop+surface pair. A popover has
no wrapper — the root IS the surface — so `inset`/`display` are reset
here or the popover would stretch edge-to-edge instead of hugging its
content at the JS-computed top/left. */
inset: auto;
display: block;
position: fixed; /* JS sets top/left against the anchor rect */
z-index: var(--z-popover); /* 1400, above modals per the Phase 1 token ladder */
min-width: 200px;
max-width: min(420px, calc(100vw - var(--space-16)));
max-height: 70vh;
overflow: auto;
background: var(--bg-elevated);
border: 1px solid var(--border-default);
border-radius: var(--radius-12);
box-shadow: var(--shadow-lg);
padding: var(--space-8);
color: var(--text-primary);
}
/* stretch align → width is set inline by JS to the anchor width; let it grow past min. */
.overlay--popover.overlay--popover-stretch { max-width: none; }
/* le-history: a wide, scrollable version dialog. Re-homed from live-editor.js
inline styles (Phase 5) — was surface width/max-height + a flex scroll body. */
.overlay--le-history .overlay__surface { width: min(960px, 92vw); max-height: 86vh; display: flex; flex-direction: column; }
.overlay--le-history .overlay__body { flex: 1; min-height: 0; overflow: auto; }