/**
 * Phase I Project Workspace — three-region shell (PROJECT_WORKSPACE_SPEC §4 sketch).
 * Spacing/color only via DS tokens.
 */

.pw-project {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  color: var(--s-color-fg-primary);
  font-family: var(--s-font-sans);
}

.pw-project__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-space-4);
  padding: var(--s-space-3) var(--s-space-5);
  border-bottom: 1px solid var(--s-color-border);
  flex-shrink: 0;
}

/* Single-row minimal header — title + lifecycle right */
.pw-project__header--single-row {
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--s-space-3);
}
.pw-project__header--single-row .pw-project__title {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pw-project__titles {
  flex: 1;
  min-width: 0;
}

.pw-project__title {
  font-weight: var(--s-font-weight-semibold);
  font-size: var(--s-font-size-2);
  color: var(--s-color-fg-primary);
}

/* Click-to-edit title pattern — DESIGN_LANGUAGE § typography.
   The title is plain text at rest; clicking it swaps in an input.
   No button-like container chrome (no border, no padding). */
.pw-project__title-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-2);
  flex-shrink: 1;
  min-width: 0;
}
.pw-project__title--editable {
  background: transparent;
  border: none;
  text-align: left;
  font: inherit;
  font-weight: var(--s-font-weight-semibold);
  font-size: var(--s-font-size-2);
  line-height: var(--s-font-line-height-tight);
  color: var(--s-color-fg-primary);
  padding: 0;
  margin: 0;
  cursor: pointer;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.pw-project__title--editable:hover {
  color: var(--s-color-status-info);
}
.pw-project__title--editable:focus-visible {
  outline: none;
  color: var(--s-color-status-info);
}
.pw-project__title--editable[disabled] {
  cursor: default;
  opacity: 0.85;
}
.pw-project__title-affordance {
  color: var(--s-color-fg-muted);
  opacity: 0;
  transition: opacity 0.15s;
  flex-shrink: 0;
  font-size: var(--s-icon-md);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pw-project__title-wrap:hover .pw-project__title-affordance {
  opacity: 0.65;
}
.pw-project__title-wrap:hover .pw-project__title-affordance:hover {
  opacity: 1;
}
.pw-project__title-wrap--editing .pw-project__title-affordance {
  visibility: hidden;
}
.pw-project__header-spacer {
  flex: 1;
}
.pw-project__title-input {
  font: inherit;
  font-weight: var(--s-font-weight-semibold);
  font-size: var(--s-font-size-2);
  line-height: var(--s-font-line-height-tight);
  color: var(--s-color-fg-primary);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--s-color-status-info);
  border-radius: 0;
  padding: 0;
  margin: 0;
  outline: none;
  min-width: 200px;
}

/* Settings gear — plain icon, no container chrome at rest. Hover-only affordance. */
.pw-project__settings-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--s-color-fg-muted);
  font-size: var(--s-icon-lg);
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: color 0.12s;
}

/* ── Three-zone shell header — workspace center widget ───────────
 * Mode picker + tag count + lifecycle + pin + settings. Lives inside
 * the shell header's center slot. The in-page title row is gone; the
 * breadcrumb (left zone of the shell header) carries the project name. */

.pw-headerc {
  display: flex;
  align-items: center;
  gap: var(--s-space-3);
  width: 100%;
  min-width: 0;
}

/* Center slot: lifecycle + settings only (mode picker is in header actions). */
.pw-headerc--meta-only {
  justify-content: flex-end;
}

/* Surface mode picker — segmented dark-pill, reuses Hub view-toggle vocabulary. */
.pw-headerc__modes {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-twohair);
  padding: var(--s-space-twohair);
  background: var(--s-color-bg-subtle);
  border-radius: var(--s-radius-2);
  flex-shrink: 0;
}

.pw-headerc__mode {
  height: 24px;
  padding: 0 var(--s-space-2);
  font-size: var(--s-font-size-condensed);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-muted);
  background: transparent;
  border: none;
  border-radius: var(--s-radius-1);
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease;
}

.pw-headerc__mode:hover:not(.pw-headerc__mode--active) {
  color: var(--s-color-fg-primary);
}

.pw-headerc__mode--active {
  background: var(--s-color-prominent-bg);
  color: var(--s-color-prominent-fg);
}

/* Mode picker — segmented dark-pill control, same vocabulary as the Hub
 * view-mode toggle. Disabled placeholders read as quiet outlines. */
.pw-headerc__modes {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-twohair);
  padding: var(--s-space-twohair);
  background: var(--s-color-bg-subtle);
  border-radius: var(--s-radius-2);
  flex-shrink: 0;
}

.pw-headerc__mode {
  height: 24px;
  padding: 0 var(--s-space-2);
  font-size: var(--s-font-size-condensed);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-muted);
  background: transparent;
  border: none;
  border-radius: var(--s-radius-1);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.pw-headerc__mode:hover:not([disabled]) {
  color: var(--s-color-fg-primary);
}

.pw-headerc__mode--active {
  background: var(--s-color-prominent-bg);
  color: var(--s-color-prominent-fg);
}

.pw-headerc__mode--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Tag count chip — quiet button until the popover lands. */
.pw-headerc__tags {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-tight-3);
  height: 24px;
  padding: 0 var(--s-space-2);
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  color: var(--s-color-fg-muted);
  background: transparent;
  border: 1px solid var(--s-color-border);
  border-radius: var(--s-radius-1);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.12s ease, color 0.12s ease;
}

.pw-headerc__tags:hover {
  color: var(--s-color-fg-primary);
  border-color: var(--s-color-fg-muted);
}

.pw-headerc__tags-n {
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
}

.pw-headerc__tags-label {
  letter-spacing: 0.04em;
}

/* Right cluster inside center zone — lifecycle + pin + settings. */
.pw-headerc__right {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-2);
  margin-left: auto;
  flex-shrink: 0;
}

.pw-headerc__pin,
.pw-headerc__settings {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--s-color-fg-muted);
  cursor: pointer;
  border-radius: var(--s-radius-1);
  transition: color 0.12s, background 0.12s;
}

.pw-headerc__pin:hover,
.pw-headerc__settings:hover {
  color: var(--s-color-fg-primary);
  background: color-mix(in oklch, var(--s-color-fg-muted) 12%, transparent);
}

.pw-headerc__pin[data-pinned="true"] {
  color: var(--s-color-status-info);
}

.pw-headerc__settings {
  font-size: var(--s-font-size-2);
  line-height: 1;
}

/* Title-bar tag pills — mono caps, low-weight, sit between title and lifecycle. */
.pw-project__tags {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-space-1);
  margin-left: var(--s-space-3);
}

.pw-project__tag {
  padding: var(--s-space-hair)
    calc(var(--s-space-tight-3) + var(--s-space-twohair));
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-min);
  font-weight: var(--s-font-weight-semibold);
  letter-spacing: 0.06em;
  font-variant-caps: all-small-caps;
  color: var(--s-color-fg-muted);
  background: color-mix(in oklch, var(--s-color-fg-muted) 7%, transparent);
  border-radius: var(--s-space-1);
}

/* Pin toggle in the title bar — neutral when unpinned, info-tinted when pinned. */
.pw-project__pin-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--s-color-fg-muted);
  cursor: pointer;
  border-radius: var(--s-radius-1);
  transition: color 0.12s, background 0.12s;
}

.pw-project__pin-btn:hover {
  color: var(--s-color-fg-primary);
  background: color-mix(in oklch, var(--s-color-fg-muted) 12%, transparent);
}

.pw-project__pin-btn[data-pinned="true"] {
  color: var(--s-color-status-info);
}
.pw-project__settings-btn:hover {
  color: var(--s-color-fg-primary);
}
.pw-project__settings-btn:focus-visible {
  outline: none;
  color: var(--s-color-status-info);
}

/* Project settings modal — large overlay, replaces the right-column panel pattern. */
.pw-modal-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in oklch, var(--s-color-fg-primary) 36%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: var(--s-space-5);
}
.pw-modal {
  width: min(720px, 100%);
  max-height: min(85vh, 800px);
  display: flex;
  flex-direction: column;
  background: var(--s-color-bg-panel);
  border-radius: var(--s-space-2);
  overflow: hidden;
}
.pw-modal__chrome {
  display: flex;
  align-items: center;
  gap: var(--s-space-3);
  padding: var(--s-space-3) var(--s-space-5);
  background: var(--s-color-bg-app);
  flex-shrink: 0;
}
.pw-modal__title {
  font-size: var(--s-font-size-2);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
  flex: 1;
  min-width: 0;
}
.pw-modal__subtitle {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--s-color-fg-muted);
}
.pw-modal__close {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--s-color-fg-muted);
  font-size: var(--s-icon-lg);
  line-height: 1;
  border-radius: var(--s-space-1);
  cursor: pointer;
}
.pw-modal__close:hover {
  color: var(--s-color-fg-primary);
  background: var(--s-color-bg-hover);
  border-color: var(--s-color-border);
}
.pw-modal__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0;
}

/* Settings panel sections — placeholder shape, sections fill in Phase II */
.pw-settings-section {
  padding: var(--s-space-3) var(--s-space-3);
}
.pw-settings-section:last-child {
  border-bottom: none;
}
.pw-settings-section__title {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--s-color-fg-muted);
  margin-bottom: var(--s-space-1);
}
.pw-settings-section__hint {
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-primary);
  margin: 0;
  line-height: 1.45;
}

/* Editable sections — name, tags. Real form controls live here. */
.pw-settings-section--editable .pw-settings-section__title {
  margin-bottom: var(--s-space-2);
}

.pw-settings-row {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
}

.pw-settings-input {
  flex: 1;
  padding: var(--s-space-1) var(--s-space-2);
  font-family: var(--s-font-sans);
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-primary);
  background: var(--s-color-bg-app);
  border: 1px solid var(--s-color-border);
  border-radius: var(--s-space-1);
  outline: none;
  transition: border-color 0.12s ease;
}

.pw-settings-input:focus-visible {
  border-color: var(--s-color-status-info);
}

.pw-settings-save {
  padding: var(--s-space-1) var(--s-space-3);
  font-family: var(--s-font-sans);
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-prominent-fg);
  background: var(--s-color-prominent-bg);
  border: none;
  border-radius: var(--s-space-1);
  cursor: pointer;
  flex-shrink: 0;
}

.pw-settings-save:hover {
  background: color-mix(in oklch, var(--s-color-prominent-bg) 94%, var(--s-color-fg-primary));
}

.pw-settings-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-space-1);
  margin-bottom: var(--s-space-2);
  min-height: 22px;
}

.pw-settings-tags__empty {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  color: var(--s-color-fg-muted);
  letter-spacing: 0.04em;
}

.pw-settings-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-tight-3);
  padding: var(--s-space-twohair) var(--s-space-tight-3) var(--s-space-twohair)
    var(--s-space-3);
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  letter-spacing: 0.04em;
  color: var(--s-color-fg-primary);
  background: color-mix(in oklch, var(--s-color-fg-muted) 10%, transparent);
  border-radius: var(--s-space-1);
}

.pw-settings-tag button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--s-color-fg-muted);
  cursor: pointer;
  border-radius: var(--s-space-1);
  font-size: var(--s-font-size-1);
  line-height: 1;
}

.pw-settings-tag button:hover {
  color: var(--s-color-fg-primary);
  background: color-mix(in oklch, var(--s-color-fg-muted) 18%, transparent);
}

.pw-project__subtitle {
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  margin-top: var(--s-space-1);
}

.pw-project__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-2);
  align-items: center;
}

.pw-badge {
  font-size: var(--s-font-size-0);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: var(--s-font-weight-semibold);
  padding: var(--s-space-1) var(--s-space-2);
  border-radius: var(--s-space-1);
  border: 1px solid var(--s-color-border);
  color: var(--s-color-fg-muted);
  background: var(--s-color-surface-subtle);
}

.pw-badge--live {
  color: var(--s-color-status-success);
  border-color: var(--s-color-status-success);
}

.pw-badge--draft {
  color: var(--s-color-status-warning);
  border-color: var(--s-color-status-warning);
}

.pw-badge--retired {
  color: var(--s-color-fg-muted);
  opacity: 0.85;
}

.pw-badge--ontology {
  cursor: pointer;
  font-style: normal;
  /* Ontology badge is quiet + ambient per DESIGN_LANGUAGE § ontology badge — lowercase mono chip, not a loud uppercase button */
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--s-font-weight-regular);
  font-family: var(--s-font-mono);
  border-color: transparent;
  color: var(--s-color-fg-muted);
}
.pw-badge--ontology:hover {
  color: var(--s-color-fg-primary);
  border-color: var(--s-color-border);
}

/* Decision alt-chip register — shared by the workspace-right info-panel
 * (decision events render their alternatives as choice chips). Originally
 * authored alongside the notebook-placeholder surface; the surface was
 * retired 2026-05-26 (notebook-converge-placeholder-and-cellular-primitive.md),
 * but the info-panel still uses these classes for decision-event detail.
 * The converged notebook surface mints its own `notebook-cell__alt*`
 * styles in admin-shell.css — kept separate so the two can diverge. */
.pw-nb-alts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-2);
  margin-top: var(--s-space-2);
}
.pw-nb-alt {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  padding: var(--s-space-twohair) var(--s-space-2);
  border: 1px solid var(--s-color-border);
  border-radius: var(--s-space-1);
  color: var(--s-color-fg-muted);
}
.pw-nb-alt--chosen {
  color: var(--s-color-status-info);
  border-color: var(--s-color-status-info);
  font-weight: var(--s-font-weight-semibold);
}
.pw-nb-alt--retired {
  opacity: 0.5;
  text-decoration: line-through;
}

/* Info panel — section-based layout per DESIGN_LANGUAGE § cross-view accent. */
.pw-info-module {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
}

/* ── Selection section (top of InfoPanel, issue 95 Phase A.1) ─────────── */
.pw-info-module__selection {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--s-color-border);
}
.pw-info-module__thumb {
  width: 100%;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s-space-2);
  background: var(--s-color-bg-app);
  border-radius: var(--s-space-1);
  overflow: hidden;
  border: 1px solid transparent;
}
.pw-info-module__thumb[data-tint="info"] {
  border-color: color-mix(in oklch, var(--s-color-status-info) 35%, transparent);
}
.pw-info-module__thumb[data-tint="warning"] {
  border-color: color-mix(in oklch, var(--s-color-status-warning) 35%, transparent);
}
.pw-info-module__thumb[data-tint="success"] {
  border-color: color-mix(in oklch, var(--s-color-status-success) 35%, transparent);
}
.pw-info-module__sel-id {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
  letter-spacing: 0.04em;
}
.pw-info-module__sel-id[data-tint="info"]    { color: var(--s-color-status-info); }
.pw-info-module__sel-id[data-tint="warning"] { color: var(--s-color-status-warning); }
.pw-info-module__sel-id[data-tint="success"] { color: var(--s-color-status-success); }
.pw-info-module__sel-sub {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  color: var(--s-color-fg-muted);
  margin-bottom: var(--s-space-2);
}
.pw-info-module__sel-note {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  color: var(--s-color-fg-secondary);
  line-height: 1.5;
  margin: 0;
}
.pw-info-module__sel-ids {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  color: var(--s-color-fg-muted);
  word-break: break-all;
  margin-top: var(--s-space-2);
}
.pw-info-module__section {
  padding: var(--s-space-3) var(--s-space-4);
  border-bottom: 1px solid var(--s-color-border);
}
.pw-info-module__section:last-child {
  border-bottom: none;
}
.pw-info-module__section-title {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--s-color-fg-muted);
  margin-bottom: var(--s-space-2);
}
.pw-info-module__grid {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--s-space-2) var(--s-space-3);
  font-size: var(--s-font-size-1);
  line-height: 1.45;
}
.pw-info-module__grid dt {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--s-color-fg-muted);
}
.pw-info-module__grid dd {
  margin: 0;
  color: var(--s-color-fg-primary);
  min-width: 0;
  overflow-wrap: anywhere;
}
.pw-info-module__grid dd.pw-info-module__val--info {
  color: var(--s-color-status-info);
}
.pw-info-module__basis-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-space-1);
}
.pw-info-module__basis-list li {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  color: var(--s-color-fg-muted);
  padding: var(--s-space-1) 0 var(--s-space-1) var(--s-space-2);
  border-left: 1px solid var(--s-color-border);
  overflow-wrap: anywhere;
}
.pw-info-module__empty {
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
}
.pw-info-module__payload {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  background: var(--s-color-bg-hover);
  padding: var(--s-space-2);
  border-radius: var(--s-space-1);
  max-height: 160px;
  overflow: auto;
  white-space: pre-wrap;
  color: var(--s-color-fg-primary);
  margin: 0;
}
.pw-info-module__library-stub {
  font-size: var(--s-font-size-condensed);
  color: var(--s-color-fg-muted);
  font-style: italic;
  margin: 0;
}

/** Ambient mono strip — DESIGN_LANGUAGE § footer strips.
    Phase 1: footer is a vertical stack of bands. Bottom-up order:
      1. status (existing single mono line)
      2. terminal-slot (placeholder, deferred)
      3. vignette (timeline lane-strip)
    Bands are rendered in DOM order top → bottom; CSS handles spacing. */
.pw-project__footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  letter-spacing: 0.06em;
  color: var(--s-color-fg-muted);
}

.pw-workspace-footer__band {
  flex-shrink: 0;
  border-top: 1px solid var(--s-color-border);
  min-height: 0;
}

.pw-workspace-footer__band--vignette {
  /* Tight band sized for the lane-strip vignette. Tunable per
     representation; the vignette component should respect this height
     as its outer canvas. Height is overridden inline by the drag-handle
     when the user resizes — falls back to this default. */
  height: 48px;
  min-height: 32px;
  max-height: 220px;
  display: flex;
  align-items: center;
  padding: 0 var(--s-space-3);
  background: var(--s-color-bg-app);
  overflow: hidden;
  position: relative;
}

/* Empty band → zero. The center area flexes to fill the freed space
   (Caitlin 2026-04-25 — "when anything is empty, the central content
   should fill the void vertically and horizontally"). The data-dt-family
   attribute is set by the dock when a family mounts here; absent →
   slot is empty → band collapses. overrides the inline
   height the resize handle persists. */
.pw-workspace-footer__band--vignette:not([data-dt-family]) {
  height: 0;
  min-height: 0;
  padding: 0;
  border-top: 0;
  overflow: hidden;
}
.pw-workspace-footer__band--vignette:not([data-dt-family]) > .pw-band-resize {
  display: none;
}

/* Drag handle on the vignette band's top edge — same visual language as
   the inter-panel split (hairline on hover/focus, transparent at rest). */
.pw-workspace-footer__band--vignette > .pw-band-resize {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--s-space-2);
  cursor: ns-resize;
  touch-action: none;
}
.pw-workspace-footer__band--vignette > .pw-band-resize::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: transparent;
  transition: background 0.12s ease;
  transform: translateY(-50%);
}
.pw-workspace-footer__band--vignette > .pw-band-resize:hover::before,
.pw-workspace-footer__band--vignette > .pw-band-resize:focus-visible::before {
  background: color-mix(in oklch, var(--s-color-status-info) 50%, transparent);
}

.pw-workspace-footer__band--terminal {
  /* Reserved slot for the future command-line strip. Hidden until a
     terminal mounts here. Black background per the whiteboard sketch. */
  display: none;
  height: 32px;
  background: var(--s-color-terminal-strip-bg);
  color: var(--s-color-terminal-strip-fg);
  align-items: center;
  padding: 0 var(--s-space-3);
}

.pw-workspace-footer__status-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* footer-cell — small dock zone in the bottom-right of the status row.
   Sized for the timeline at vignette tier (tiny landscape rect). The
   cell collapses to width:0 when empty, expanding when the dock mounts
   a family into it. The dock sets `data-dt-family` on the container
   when active. */
.pw-workspace-footer__cell {
  flex: 0 0 0;
  width: 0;
  height: 24px;
  min-width: 0;
  overflow: hidden;
  border-left: 1px solid transparent;
  transition: border-color 0.12s ease;
}
.pw-workspace-footer__cell[data-dt-family] {
  flex: 0 0 140px;
  width: 140px;
  border-left-color: var(--s-color-border);
  padding-left: var(--s-space-2);
}

/* ── Detail-tier dock — drop targets and grip ────────────────────────
   Shared visual language across slots that host detail-tier families
   (today: the timeline; future: any registered family). */

/* Cell label — the family identity badge that travels with the
   component (Caitlin 2026-04-25 — "expected the timeline label to come
   with me"). Mono caps, muted; sits in the top-left so it doesn't
   collide with the grip in the top-right. */
.dt-cell__label {
  position: absolute;
  top: var(--s-space-1);
  left: var(--s-space-2);
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--s-color-fg-muted);
  pointer-events: none;
  user-select: none;
  z-index: 3;
}

/* Drag-grip — small, always-visible drag affordance for full and
   compact cells. Resting opacity is low enough to stay calm but high
   enough to be discoverable; hover lifts it to full. Tiny tiers
   (wisp, vignette) use long-press anywhere on the cell instead — no
   grip needed there. */
.dt-grip {
  position: absolute;
  top: var(--s-space-1);
  right: var(--s-space-1);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: grab;
  color: var(--s-color-fg-muted);
  opacity: 0.45;
  transition: opacity 0.12s ease;
  z-index: 4;
}
.dt-grip:hover,
[data-dt-family]:hover > .dt-grip,
.dt-cell:hover > .dt-grip {
  opacity: 1;
}
.dt-grip:active {
  cursor: grabbing;
}
.dt-grip svg {
  pointer-events: none;
}

/* Edge-left pull-tab variant — slim vertical strip in the band's left
   padding zone, vertically centered. Used by compact-landscape and
   wisp-landscape where a corner grip would collide with year ticks.
   Defined after the base .dt-grip so its position properties win the
   cascade. */
.dt-grip--edge-left {
  /* Full-height pull-tab so the grip hit area matches the band's
     visual extent — chemists scrubbing the timeline shouldn't have to
     aim at a tiny center stripe. Top offset leaves the band-resize
     handle (vertical drag) its hit area; bottom flushes to the floor.
     Caitlin 2026-04-26. */
  top: var(--s-space-2);
  bottom: 0;
  left: 0;
  right: auto;
  width: 12px;
  height: auto;
  border-radius: 0;
  transform: none;
  margin-bottom: var(--s-space-1);
}
.dt-grip--edge-left:hover,
[data-dt-family]:hover > .dt-grip--edge-left,
.dt-cell:hover > .dt-grip--edge-left {
  background: var(--s-color-bg-hover);
}

/* Drop-target highlight — applied by the dock during a redock drag. */
.dt-dock__slot--drop-target {
  border: 2px dashed var(--s-color-status-info);
  outline: none;
  background: color-mix(
    in oklch,
    var(--s-color-status-info) 8%,
    transparent
  );
}

.dt-dock__cell--dragging {
  opacity: 0.65;
  cursor: grabbing;
}

.dt-dock__notice {
  padding: var(--s-space-3);
  font-size: var(--s-font-size-condensed);
  color: var(--s-color-fg-muted);
  text-align: center;
}

/* compact-landscape cell — when the timeline is in the footer-full
   slot at compact tier, the body fills the band. */
.dt-cell--compact-landscape {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  position: relative;
}
.dt-cell__body {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
}

/* wisp-landscape — same band, less height. Vignette draws into the
   container directly. */
.dt-cell--wisp-landscape {
  position: relative;
  height: 100%;
  width: 100%;
}

/* vignette-square / vignette-landscape — icon-tier rendering. The cell
   itself is just a positioning host; the .dt-icon button inside does
   the visual work. */
.dt-cell--vignette-square,
.dt-cell--vignette-landscape {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.dt-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--s-icon-xl);
  height: var(--s-icon-xl);
  border-radius: calc(var(--s-space-tight-3) + var(--s-space-twohair));
  border: 1px solid var(--s-color-border);
  background: transparent;
  color: var(--s-color-fg-muted);
  cursor: pointer;
  padding: 0;
  transition: background 0.12s ease, color 0.12s ease;
}
.dt-icon--landscape {
  width: 88px;
  height: var(--s-icon-xl);
  border-radius: var(--s-space-tight-3);
}
.dt-icon:hover,
.dt-icon:focus-visible {
  background: var(--s-color-bg-hover);
  color: var(--s-color-fg-primary);
  outline: none;
}
.dt-icon__obs {
  fill: var(--s-color-fg-muted);
}
.dt-icon__rec {
  fill: var(--s-color-status-info);
}
.dt-icon:hover .dt-icon__obs,
.dt-icon:hover .dt-icon__rec {
  fill: var(--s-color-fg-primary);
}

/* Hover popover — appears below the icon. */
.dt-icon__pop {
  position: absolute;
  top: calc(100% + var(--s-space-tight-3));
  right: 0;
  background: var(--s-color-bg-app);
  border: 1px solid var(--s-color-border);
  border-radius: var(--s-space-tight-3);
  padding: var(--s-space-1) var(--s-space-2);
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  color: var(--s-color-fg-primary);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  z-index: 5;
}
.dt-icon:hover .dt-icon__pop,
.dt-icon:focus-visible .dt-icon__pop {
  opacity: 1;
}

/* Right-widget tray — sub-zone in the right column where widgets can
   dock. Empty at rest; populated when the dock mounts a family here. */
.pw-project__right-widget {
  flex: 0 0 0;
  height: 0;
  border-top: 1px solid transparent;
  overflow: hidden;
  transition: border-color 0.12s ease;
}
.pw-project__right-widget[data-dt-family] {
  flex: 0 0 auto;
  height: auto;
  min-height: 56px;
  padding: var(--s-space-2);
  border-top-color: var(--s-color-border);
}
.pw-project__right--collapsed .pw-project__right-widget {
  display: none;
}

/* ── Drag-time slot visibility ───────────────────────────────────────
   Caitlin 2026-04-25 — empty slots should not look like part of the
   layout AT REST, but during a drag the user needs to see where they
   can drop. The dock toggles `dt-dock--dragging` on body during a
   redock. These rules expose normally-hidden slots as small drop-hint
   zones so the user can dock to a currently-empty location. */

body.dt-dock--dragging .pw-project__grid--no-timeline-side {
  /* Re-add a thin column on the left so the side slot has dimensions
     to be hit-tested by the dock's drop-zone resolution. */
  grid-template-columns:
    32px
    0
    minmax(0, 1fr)
    var(--pw-handle-w)
    var(--pw-col-right, 320px);
}
body.dt-dock--dragging .pw-project__left--no-timeline {
  display: flex;
  background: color-mix(
    in oklch,
    var(--s-color-status-info) 4%,
    transparent
  );
  border-right: 1px dashed var(--s-color-status-info);
}

/* Empty footer-full band shown during drag as a thin drop hint. */
body.dt-dock--dragging
  .pw-workspace-footer__band--vignette:not([data-dt-family]) {
  height: 24px;
  min-height: 24px;
  background: color-mix(
    in oklch,
    var(--s-color-status-info) 4%,
    transparent
  );
  border-top: 1px dashed var(--s-color-status-info);
}

/* Empty right-widget tray shown during drag. */
body.dt-dock--dragging
  .pw-project__right-widget:not([data-dt-family]) {
  flex: 0 0 32px;
  height: 32px;
  min-height: 32px;
  background: color-mix(
    in oklch,
    var(--s-color-status-info) 4%,
    transparent
  );
  border-top: 1px dashed var(--s-color-status-info);
}

/* Empty footer-cell shown during drag. */
body.dt-dock--dragging
  .pw-workspace-footer__cell:not([data-dt-family]) {
  flex: 0 0 80px;
  width: 80px;
  background: color-mix(
    in oklch,
    var(--s-color-status-info) 4%,
    transparent
  );
  border-left: 1px dashed var(--s-color-status-info);
}

/* ── Timeline vignette ──────────────────────────────────────────────
   Compact horizontal lane-strip representation of a project's events,
   sized for the 48px footer band. Dots are status-tinted; hover reveals
   the event title. Click anywhere on the strip (outside a dot) expands
   the left source-panel timeline. */
.tv-wrap {
  position: relative;
  flex: 1;
  height: 100%;
  display: block;
  cursor: pointer;
}
.tv-empty {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  color: var(--s-color-fg-muted);
  font-style: italic;
}
.tv-ticks {
  position: absolute;
  top: var(--s-space-twohair);
  left: 0;
  right: 0;
  height: calc(var(--s-space-3) + var(--s-space-tight-3));
  pointer-events: none;
}
.tv-tick {
  position: absolute;
  transform: translateX(-50%);
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-micro);
  letter-spacing: 0.06em;
  color: var(--s-color-fg-muted);
  opacity: 0.7;
}
.tv-svg {
  position: absolute;
  top: calc(var(--s-space-3) + var(--s-space-tight-3) + var(--s-space-twohair));
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
}
.tv-laneline {
  stroke: var(--s-color-border);
  stroke-width: 1;
  shape-rendering: crispEdges;
}
.tv-dot {
  cursor: default;
  transition: r 0.1s ease;
}
.tv-dot[data-tint="info"] {
  fill: var(--s-color-status-info);
}
.tv-dot[data-tint="warning"] {
  fill: var(--s-color-status-warning);
}
.tv-dot[data-tint="success"] {
  fill: var(--s-color-status-success);
}
.tv-dot[data-tint="muted"] {
  fill: color-mix(in oklch, var(--s-color-fg-muted) 60%, transparent);
}
.tv-dot:hover {
  r: 4.5;
}
.tv-pop {
  position: absolute;
  z-index: 4;
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-caption);
  letter-spacing: 0.02em;
  color: var(--s-color-fg-primary);
  background: var(--s-color-bg-app);
  border: 1px solid var(--s-color-border);
  padding: var(--s-space-twohair) var(--s-space-2);
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(-100%);
}

.pw-project__grid {
  flex: 1;
  min-height: 0;
  display: grid;
  --pw-handle-w: var(--s-space-1);
  grid-template-columns:
    var(--pw-col-left, 220px)
    var(--pw-handle-w)
    minmax(0, 1fr)
    var(--pw-handle-w)
    var(--pw-col-right, 320px);
  grid-template-rows: 1fr;
  grid-template-areas: "left h1 center h2 right";
}

/* Timeline column collapsed — rail only (legacy state, kept for the
   manual collapse button's transition path). */
.pw-project__grid--left-collapsed {
  grid-template-columns:
    22px
    0
    minmax(0, 1fr)
    var(--pw-handle-w)
    var(--pw-col-right, 320px);
}
.pw-project__grid--left-collapsed .pw-resize-handle--left-center {
  display: none;
}
.pw-project__left--collapsed .pw-left-toolbar,
.pw-project__left--collapsed .pw-left-view {
  display: none;
}
.pw-project__left:not(.pw-project__left--collapsed) .pw-left-rail {
  display: none;
}

/* Timeline docked elsewhere — left column fully gone. The dock decides
   whether to apply this (in project.js) based on which slot the
   timeline lives in. Empty slots should not look like part of the
   layout (Caitlin 2026-04-25). */
.pw-project__grid--no-timeline-side {
  grid-template-columns:
    0
    0
    minmax(0, 1fr)
    var(--pw-handle-w)
    var(--pw-col-right, 320px);
}
.pw-project__grid--no-timeline-side .pw-resize-handle--left-center {
  display: none;
}
.pw-project__left--no-timeline {
  display: none;
}

/* Collapse button in the toolbar */
.pw-left-toolbar__collapse {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--s-color-fg-muted);
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-1);
  padding: 0 var(--s-space-2);
  cursor: pointer;
  border-radius: var(--s-space-1);
}
.pw-left-toolbar__collapse:hover {
  color: var(--s-color-fg-primary);
  background: var(--s-color-bg-hover);
}
.pw-left-toolbar__collapse:focus-visible {
  outline: none;
  background: color-mix(in oklch, var(--s-color-bg-hover) 80%, transparent);
}

/* Collapsed-state rail — chevron + vertical TIMELINE label */
.pw-left-rail {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s-space-3);
  padding: var(--s-space-3) 0;
  border: none;
  background: transparent;
  color: var(--s-color-fg-muted);
  cursor: pointer;
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-right: 1px solid var(--s-color-border);
}
.pw-left-rail:hover {
  color: var(--s-color-fg-primary);
  background: var(--s-color-bg-hover);
}
.pw-left-rail:focus-visible {
  outline: none;
  background: color-mix(in oklch, var(--s-color-bg-hover) 80%, transparent);
}
.pw-left-rail__chevron {
  font-size: var(--s-font-size-1);
  line-height: 1;
  color: var(--s-color-fg-muted);
}
/* GH #245 — mirror pw-right-rail__dots on the left collapsed rail. */
.pw-left-rail__dots {
  font-size: var(--s-font-size-2);
  line-height: 1;
  color: var(--s-color-fg-muted);
  letter-spacing: 0.1em;
}
.pw-left-rail__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0.2em;
  font-weight: var(--s-font-weight-semibold);
}

.pw-project__left {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.pw-project__grid--constraint-flash {
  animation: pw-grid-constraint-pulse 0.5s ease-out;
}

@keyframes pw-grid-constraint-pulse {
  0% {
    background-color: transparent;
  }
  35% {
    background-color: color-mix(in oklch, var(--s-color-fg-muted) 12%, transparent);
  }
  100% {
    background-color: transparent;
  }
}

.pw-resize-handle {
  grid-area: h1;
  width: 100%;
  min-height: 0;
  cursor: col-resize;
  touch-action: none;
  background: transparent;
  position: relative;
  z-index: 1;
}

.pw-resize-handle--center-right {
  grid-area: h2;
}

.pw-resize-handle:hover,
.pw-resize-handle:focus-visible {
  background: color-mix(in oklch, var(--s-color-fg-muted) 18%, transparent);
}

.pw-resize-handle:focus-visible {
  outline: none;
  background: color-mix(in oklch, var(--s-color-prominent-bg) 22%, transparent);
}

.pw-project__left {
  grid-area: left;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: none;
  background: var(--s-color-surface-subtle);
}

.pw-left-toolbar {
  display: flex;
  gap: var(--s-space-1);
  padding: var(--s-space-1) var(--s-space-2);
  border-bottom: 1px solid var(--s-color-border);
  flex-shrink: 0;
}

.pw-left-toolbar input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: var(--s-space-1) var(--s-space-2);
  border: 1px solid var(--s-color-border);
  border-radius: var(--s-space-1);
  background: var(--s-color-bg-app);
  color: var(--s-color-fg-primary);
  font-family: var(--s-font-sans);
  font-size: var(--s-font-size-1);
}

.pw-left-toolbar button {
  flex-shrink: 0;
  padding: var(--s-space-1) var(--s-space-2);
  border: 1px solid var(--s-color-border);
  border-radius: var(--s-space-1);
  background: transparent;
  color: var(--s-color-fg-primary);
  font-family: var(--s-font-sans);
  font-size: var(--s-font-size-1);
  cursor: pointer;
}

/* Semantic provenance search (Workers AI BGE-m3 + Vectorize) — v0 pilot */
.pw-left-semantic {
  flex-shrink: 0;
  max-height: 42vh;
  overflow: auto;
  border-bottom: 1px solid var(--s-color-border);
  background: var(--s-color-bg-app);
  padding: var(--s-space-2);
}

.pw-left-semantic__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
}

.pw-left-semantic__msg {
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-secondary);
  margin: 0;
}

.pw-left-semantic__msg--err {
  color: var(--s-color-status-danger);
}

.pw-left-semantic__item {
  border-radius: var(--s-space-1);
  padding: var(--s-space-1) var(--s-space-2);
  background: var(--s-color-surface-subtle);
  border: 1px solid transparent;
}

.pw-left-semantic__item--strong {
  border-color: var(--s-color-border);
}

.pw-left-semantic__score {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-secondary);
  margin-bottom: var(--s-space-1);
}

.pw-left-semantic__preview {
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-primary);
  line-height: 1.35;
}

.pw-left-view {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.pw-project__center {
  grid-area: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--s-color-bg-app);
}

/* GH #245 — center column surfaces (SAR sheet, notebook, whiteboard) fill
   the grid row so the compound table reaches the footer band instead of
   floating with dead space below. */
.pw-project__center .pw-panel-container {
  flex: 1;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  gap: 0;
}
.pw-project__center .pw-panel-container > .pw-panel {
  flex: 1;
  min-height: 0;
  border-radius: 0;
  background: transparent;
}
.pw-project__center .pw-panel--header-ghost > .pw-panel__body {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pw-project__center .pw-panel--header-ghost > .pw-panel__body > .sar-sheet,
.pw-project__center .pw-panel--header-ghost > .pw-panel__body > [data-browser] {
  flex: 1;
  min-height: 0;
}

.pw-project__right {
  grid-area: right;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--s-color-border);
  background: var(--s-color-surface-subtle);
}

/* Legacy details-pane widgets mounted into right-drawer (GH #245). */
.pw-project__right-panels[data-container-id="right-drawer"] {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0;
  gap: 0;
}

/* Right drawer: collapsed (ribbon) ↔ expanded.
   Mirrors the timeline left-rail pattern in reverse — collapsed shows a
   thin rail with vertical DETAILS label; click to expand. The grid is
   driven by --pw-col-right (set via the resize-handle persistence). */
.pw-project__grid--right-collapsed {
  grid-template-columns:
    var(--pw-col-left, 220px)
    var(--pw-handle-w)
    minmax(0, 1fr)
    0
    22px;
}
.pw-project__grid--right-collapsed .pw-resize-handle--center-right {
  display: none;
}

/* Both rails collapsed — explicit rule so the cascade doesn't pick one. */
.pw-project__grid--left-collapsed.pw-project__grid--right-collapsed {
  grid-template-columns:
    22px
    0
    minmax(0, 1fr)
    0
    22px;
}

/* Timeline elsewhere AND right column collapsed — neither side has
   chrome, center fills the void. Without this rule the later-defined
   --right-collapsed selector wins and re-introduces a 220 px phantom
   left column (Caitlin 2026-04-25). */
.pw-project__grid--no-timeline-side.pw-project__grid--right-collapsed {
  grid-template-columns:
    0
    0
    minmax(0, 1fr)
    0
    22px;
}

/* Timeline elsewhere AND legacy left collapsed — same idea. */
.pw-project__grid--no-timeline-side.pw-project__grid--left-collapsed {
  grid-template-columns:
    0
    0
    minmax(0, 1fr)
    var(--pw-handle-w)
    var(--pw-col-right, 320px);
}
.pw-project__right--collapsed .pw-panel-container {
  display: flex;
  flex: 1;
  min-height: 0;
  padding: 0;
  overflow: visible;
}
.pw-project__right--collapsed .pw-context-rail__body {
  display: none;
}
.pw-project__right--collapsed .pw-right-rail {
  display: none;
}
.pw-project__right:not(.pw-project__right--collapsed) .pw-right-rail {
  display: none;
}

/* GH #250 — context rail icon tabs (collapsed by default; no default viewer). */
.pw-context-rail {
  display: flex;
  flex-direction: row-reverse;
  flex: 1;
  min-height: 0;
  height: 100%;
}
.pw-context-rail__icons {
  flex: 0 0 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-space-2);
  padding: var(--s-space-3) 0;
  border-left: 1px solid var(--s-color-border);
}
.pw-context-rail__icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--s-color-fg-muted);
  cursor: pointer;
  border-radius: var(--s-space-1);
  padding: 0;
}
.pw-context-rail__icon:hover,
.pw-context-rail__icon--active {
  color: var(--s-color-fg-primary);
  background: var(--s-color-bg-hover);
}
.pw-context-rail__body {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pw-context-rail__pane {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.pw-context-rail__pane--viewer {
  overflow: hidden;
}
.pw-viewer-pane,
.pw-viewer-pane__stage {
  height: 100%;
  min-height: 0;
}

/* SAR shell-header toolbar (2D/3D/stereo + zoom). */
.sar-workspace-toolbar {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-2);
  flex-shrink: 0;
}
.sar-workspace-toolbar__depth,
.sar-workspace-toolbar__zoom {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-twohair);
}
.sar-workspace-toolbar__btn {
  border: 0;
  background: transparent;
  color: var(--s-color-fg-muted);
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  padding: var(--s-space-tight-3) var(--s-space-2);
  cursor: pointer;
  border-radius: var(--s-space-1);
}
.sar-workspace-toolbar__btn:hover,
.sar-workspace-toolbar__btn--active {
  color: var(--s-color-fg-primary);
  background: var(--s-color-bg-hover);
}
.sar-workspace-toolbar__btn--inactive {
  opacity: 0.45;
}

/* Left-nav SAR status filters. */
.project-sar-filter-rail {
  flex-shrink: 0;
  padding: var(--s-space-2) var(--s-space-3);
  border-bottom: 1px solid var(--s-color-border);
}
.project-sar-filter-rail__label {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--s-color-fg-muted);
  margin-bottom: var(--s-space-2);
}
.project-sar-filter-rail__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-tight-3);
}
.project-sar-filter-rail__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-tight-3);
  padding: var(--s-space-1) var(--s-space-2);
  border: 1px solid var(--s-color-border);
  border-radius: var(--s-radius-window);
  background: var(--s-color-bg-app);
  color: var(--s-color-fg-muted);
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  cursor: pointer;
}
.project-sar-filter-rail__chip--active[data-tint="info"] {
  background: var(--s-color-status-info);
  color: var(--s-color-bg-app);
  border-color: var(--s-color-status-info);
}
.project-sar-filter-rail__chip--active[data-tint="warning"] {
  background: var(--s-color-status-warning);
  color: var(--s-color-bg-app);
  border-color: var(--s-color-status-warning);
}
.project-sar-filter-rail__chip--clear {
  border-style: dashed;
  font-style: italic;
}
.project-sar-filter-rail__count {
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

/* Collapsed-state rail — chevron + vertical DETAILS label.
   Mirror of .pw-left-rail flipped to the right edge. */
.pw-right-rail {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s-space-3);
  padding: var(--s-space-3) 0;
  border: none;
  background: transparent;
  color: var(--s-color-fg-muted);
  cursor: pointer;
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-left: 1px solid var(--s-color-border);
}
.pw-right-rail:hover {
  color: var(--s-color-fg-primary);
  background: var(--s-color-bg-hover);
}
.pw-right-rail:focus-visible {
  outline: none;
  background: color-mix(in oklch, var(--s-color-bg-hover) 80%, transparent);
}
.pw-right-rail__chevron {
  font-size: var(--s-font-size-1);
  line-height: 1;
  color: var(--s-color-fg-muted);
}
.pw-right-rail__label {
  writing-mode: vertical-rl;
  letter-spacing: 0.2em;
  font-weight: var(--s-font-weight-semibold);
}
/* Dots-only affordance — replaces the "DETAILS" label per
   Caitlin 2026-04-25. The vertical-ellipsis glyph (⋮) reads as
   "more here", category-agnostic. Larger than the chevron so it's the
   visual anchor of the rail. */
.pw-right-rail__dots {
  font-size: var(--s-font-size-2);
  line-height: 1;
  color: var(--s-color-fg-muted);
  letter-spacing: 0.1em;
}

/* Drawer collapse button — mirrors .pw-left-toolbar__collapse but lives
   inside the right column's chrome. Phase 1 anchors this to a small
   floating button at the column's top-left edge (visible only when
   the drawer is expanded). */
.pw-right-collapse {
  position: absolute;
  top: var(--s-space-2);
  left: calc(-1 * var(--s-space-3));
  z-index: 2;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--s-color-border);
  background: var(--s-color-bg-app);
  color: var(--s-color-fg-muted);
  border-radius: 50%;
  cursor: pointer;
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-1);
  line-height: 1;
  padding: 0;
}
.pw-right-collapse:hover {
  color: var(--s-color-fg-primary);
}
.pw-project__right--collapsed .pw-right-collapse {
  display: none;
}

/* Panel container + panels.
   Note: gap is removed when inter-panel resize handles are present —
   the handle itself provides the visual separation. */
.pw-panel-container {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
  min-height: 0;
  flex: 1;
  padding: var(--s-space-2);
  overflow: auto;
}
.pw-panel-container[data-container-id] {
  gap: 0;
}

/* Inter-panel resize handle — sits between two adjacent stacked panels.
   Drag the handle to grow the panel above; the panel below grows
   inversely (flex:1 on the last panel absorbs the delta). */
.pw-panel-split {
  flex: 0 0 var(--s-space-2);
  height: var(--s-space-2);
  cursor: ns-resize;
  background: transparent;
  position: relative;
  touch-action: none;
}
.pw-panel-split::before {
  /* Subtle hairline — invisible until hover, then a single status-info
     line so the seam is discoverable without being decorative. */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: transparent;
  transition: background 0.12s ease;
  transform: translateY(-50%);
}
.pw-panel-split:hover::before,
.pw-panel-split:focus-visible::before {
  background: color-mix(in oklch, var(--s-color-status-info) 50%, transparent);
}

.pw-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Fallback colors — scilence tokens may resolve to empty until tokens land */
  border-radius: var(--s-space-1);
  background: var(--s-color-bg-panel);
  overflow: hidden;
  position: relative; /* anchor for ghost-header corner tray */
}

/* Ghost header — no chrome strip, tiny corner tray top-right inside the
   panel. Buttons are low-opacity at rest, full on hover. The body fills
   the entire panel; tray hovers above it. Surfaces are responsible for
   not putting critical content under the top-right ~32px x ~24px patch.
   For surfaces that need breathing room on the right (table view-toggle,
   scatter axes), the tray's small footprint is intentionally non-blocking. */
.pw-panel--header-ghost > .pw-panel__corner-tray {
  position: absolute;
  top: var(--s-space-1);
  right: var(--s-space-1);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--s-space-twohair);
  padding: var(--s-space-twohair);
  border-radius: var(--s-space-1);
  background: color-mix(in oklch, var(--s-color-bg-panel) 88%, transparent);
  opacity: 0.45;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.pw-panel--header-ghost:hover > .pw-panel__corner-tray,
.pw-panel--header-ghost:focus-within > .pw-panel__corner-tray {
  opacity: 1;
  background: var(--s-color-bg-panel);
}
.pw-panel--header-ghost > .pw-panel__corner-tray > .pw-panel__chrome-btn,
.pw-panel--header-ghost > .pw-panel__corner-tray > .pw-panel__close {
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--s-color-fg-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--s-space-1);
  font-size: var(--s-font-size-1);
  line-height: 1;
}
.pw-panel--header-ghost > .pw-panel__corner-tray > .pw-panel__chrome-btn svg {
  width: 12px;
  height: 12px;
}
.pw-panel--header-ghost > .pw-panel__corner-tray > .pw-panel__chrome-btn:hover,
.pw-panel--header-ghost > .pw-panel__corner-tray > .pw-panel__close:hover {
  color: var(--s-color-fg-primary);
  background: color-mix(in oklch, var(--s-color-bg-hover) 60%, transparent);
}

.pw-panel__chrome {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  padding: var(--s-space-2) var(--s-space-3);
  /* Subtly tinted chrome bg differentiates from body per DESIGN_LANGUAGE § panes */
  background: var(--s-color-bg-app);
  flex-shrink: 0;
}

.pw-panel__drag {
  width: var(--s-space-4);
  height: var(--s-space-4);
  border-radius: var(--s-space-1);
  border: 1px dashed var(--s-color-border);
  flex-shrink: 0;
}

.pw-panel__title {
  flex: 1;
  font-size: var(--s-font-size-1);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-muted);
  min-width: 0;
}

/* Source-panel collapse when a surface is popped out — the panel shrinks
 * to a thin placeholder, freeing space for the remaining panels. The active
 * popout state is held by the parent window in JS state, so reload behavior
 * is "reload, popout becomes orphaned." We accept that for v0. */
.pw-panel--popped-out {
  flex: 0 0 auto;
}

.pw-panel--popped-out .pw-panel__body {
  padding: 0;
}

.pw-panel__popout-placeholder {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  padding: var(--s-space-2) var(--s-space-3);
  background: color-mix(in oklch, var(--s-color-status-info) 6%, var(--s-color-bg-app));
}

.pw-panel__popout-label {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  letter-spacing: 0.06em;
  font-variant-caps: all-small-caps;
  color: var(--s-color-status-info);
  font-weight: var(--s-font-weight-semibold);
}

.pw-panel__popout-restore {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  letter-spacing: 0.04em;
  color: var(--s-color-fg-muted);
  background: transparent;
  border: 1px solid var(--s-color-border);
  border-radius: var(--s-space-1);
  padding: var(--s-space-twohair) var(--s-space-2);
  cursor: pointer;
  margin-left: auto;
  transition: color 0.12s, border-color 0.12s;
}

.pw-panel__popout-restore:hover {
  color: var(--s-color-fg-primary);
  border-color: var(--s-color-fg-muted);
}

/* Capability-driven chrome buttons — added when a surface declares matching
 * capabilities (popOutable, etc.). See SURFACE_CAPABILITY_CONTRACT.md §2. */
.pw-panel__chrome-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--s-color-fg-muted);
  cursor: pointer;
  border-radius: var(--s-radius-1);
  transition: color 0.12s, background 0.12s;
  flex-shrink: 0;
}

.pw-panel__chrome-btn:hover {
  color: var(--s-color-fg-primary);
  background: color-mix(in oklch, var(--s-color-fg-muted) 12%, transparent);
}

.pw-panel__chrome-btn svg {
  width: 14px;
  height: 14px;
}

.pw-panel__close {
  border: none;
  background: transparent;
  color: var(--s-color-fg-muted);
  cursor: pointer;
  font-size: var(--s-font-size-2);
  line-height: 1;
  padding: 0 var(--s-space-1);
  border-radius: var(--s-space-1);
}

.pw-panel__close:focus-visible {
  outline: none;
  background: color-mix(in oklch, var(--s-color-fg-muted) 18%, transparent);
  color: var(--s-color-fg-primary);
}

.pw-panel__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--s-space-3);
}

/* Surface fallback */
.pw-fallback {
  padding: var(--s-space-5);
}

.pw-fallback__title {
  font-size: var(--s-font-size-2);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
  margin-bottom: var(--s-space-3);
}

.pw-fallback__summary {
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  line-height: 1.5;
  margin-bottom: var(--s-space-4);
}

.pw-fallback__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-2);
}

.pw-fallback__btn {
  padding: var(--s-space-2) var(--s-space-4);
  border: 1px solid var(--s-color-border);
  border-radius: var(--s-space-1);
  background: var(--s-color-bg-app);
  color: var(--s-color-fg-primary);
  font-family: var(--s-font-sans);
  font-size: var(--s-font-size-1);
  cursor: pointer;
}

/* Macro detail view scaffolds (Tier 3 Deliverable F stubs). */
.pw-macro-detail {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-3);
  min-height: 0;
}

.pw-macro-detail__identity {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
  padding: var(--s-space-3);
  background: var(--s-color-bg-panel);
  border-radius: var(--s-space-1);
}

.pw-macro-detail__identity-title {
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
}

.pw-macro-detail__identity-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-tight-3);
}

.pw-macro-detail__pill {
  padding: var(--s-space-twohair) var(--s-space-2);
  border-radius: var(--s-space-1);
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  color: var(--s-color-fg-muted);
  background: var(--s-color-bg-app);
}

.pw-macro-detail__body {
  display: grid;
  grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
  gap: var(--s-space-3);
  min-height: 0;
}

.pw-macro-detail__body--stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-3);
}

.pw-macro-detail__data-panel,
.pw-macro-detail__panel,
.pw-macro-detail__viewer,
.pw-macro-detail__sequence {
  padding: var(--s-space-3);
  border-radius: var(--s-space-1);
  background: var(--s-color-bg-panel);
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  line-height: 1.55;
}

.pw-macro-detail__main {
  min-width: 0;
}

.pw-macro-detail__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-tight-3);
  margin-bottom: var(--s-space-2);
}

.pw-macro-detail__tab {
  padding: var(--s-space-twohair) var(--s-space-2);
  border: none;
  border-radius: var(--s-space-1);
  background: var(--s-color-bg-panel);
  color: var(--s-color-fg-muted);
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  cursor: pointer;
}

.pw-macro-detail__tab:hover,
.pw-macro-detail__tab[aria-selected="true"] {
  color: var(--s-color-fg-primary);
  background: var(--s-color-bg-hover);
}

.pw-macro-detail__viewer {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
}

.pw-macro-detail__viewer-stage {
  min-height: 180px;
  padding: var(--s-space-2);
  border-radius: var(--s-space-1);
  background: var(--substrate-cool-rest);
  color: var(--s-cream-50);
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
}

.pw-macro-detail__viewer-footer {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
}

.pw-macro-detail__viewer-label {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-condensed);
  color: var(--s-color-fg-muted);
}

.pw-macro-detail__viewer-slider {
  flex: 1;
}

.pw-macro-detail__empty {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  min-height: var(--s-space-7);
  box-sizing: border-box;
}

.pw-macro-detail__empty-title {
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-medium);
  color: var(--s-color-fg-primary);
}

.pw-macro-detail__empty-desc {
  margin: 0;
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  line-height: 1.5;
  max-width: 42em;
}

.pw-info-module--accent .pw-info-module__body {
  padding: var(--s-space-3);
  margin: calc(-1 * var(--s-space-2));
  border-radius: var(--s-space-1);
  background: color-mix(in oklch, var(--s-color-status-info) 10%, transparent);
  border-left: 2px solid var(--s-color-status-info);
}

/* Info + draft */
.pw-info-module__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-3);
  min-height: 0;
}

.pw-info-module__empty {
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  line-height: 1.5;
}

.pw-info-module__kind {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--s-color-fg-muted);
}

.pw-info-module__kind--decision {
  color: var(--s-color-status-info);
}

.pw-info-module__kind--pivot {
  color: var(--s-color-status-warning);
}

.pw-info-module__kind--retrospective {
  color: var(--s-color-status-success);
}

.pw-info-module__kind--obs {
  color: var(--s-color-status-info);
}

.pw-info-module__time {
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-primary);
}

.pw-info-module__actor {
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-primary);
}

.pw-info-module__meta {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
}

.pw-info-module__payload {
  margin: 0;
  padding: var(--s-space-2);
  border-radius: var(--s-space-1);
  background: var(--s-color-bg-hover);
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-primary);
  white-space: pre-wrap;
  overflow: auto;
  max-height: 40vh;
}

.pw-info-module__basis-label {
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--s-space-1);
}

.pw-info-module__basis-list {
  margin: 0;
  padding-left: var(--s-space-5);
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-primary);
}

.pw-info-module__library-stub {
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  font-style: italic;
}

.pw-info-module__id {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  word-break: break-all;
}

.pw-draft-note {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  padding: var(--s-space-2);
  border: 1px solid var(--s-color-border);
  border-radius: var(--s-space-1);
  font-family: var(--s-font-sans);
  font-size: var(--s-font-size-1);
  background: var(--s-color-bg-app);
  color: var(--s-color-fg-primary);
}

/* ── Wave 4 — tab strip + chrome row + tab panels ─────────────────── */

.pw-tab-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-space-3);
  padding: var(--s-space-2) var(--s-space-5);
  border-bottom: 1px solid var(--s-color-border);
  flex-shrink: 0;
}

.pw-tab-strip__tabs {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-twohair);
}

.pw-tab-strip__tab {
  height: 28px;
  padding: 0 var(--s-space-3);
  font-size: var(--s-font-size-condensed);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--s-radius-1);
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.pw-tab-strip__tab:hover:not(.pw-tab-strip__tab--active) {
  color: var(--s-color-fg-primary);
  border-color: var(--s-color-border);
}

.pw-tab-strip__tab--active {
  background: var(--s-color-prominent-bg);
  color: var(--s-color-prominent-fg);
  border-color: transparent;
}

.pw-tab-strip__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-2);
  flex-shrink: 0;
}

.pw-tab-strip__add-event {
  height: 28px;
  padding: 0 var(--s-space-3);
  font-size: var(--s-font-size-condensed);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
  background: var(--s-color-bg-subtle);
  border: 1px solid var(--s-color-border);
  border-radius: var(--s-radius-1);
  cursor: pointer;
}

.pw-tab-strip__add-event:hover {
  background: var(--s-color-bg-hover);
}

.pw-project__chrome-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-space-3);
  padding: var(--s-space-3) var(--s-space-5);
  border-bottom: 1px solid var(--s-color-border);
  flex-shrink: 0;
}

.pw-project__chrome-row .pw-project__title-wrap {
  flex-shrink: 1;
  min-width: min(100%, 200px);
}

.pw-project__chrome-spacer {
  flex: 1;
  min-width: var(--s-space-5);
}

.pw-project__meta-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-space-3);
}

.pw-meta-inline__field {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-2);
}

.pw-meta-inline__label {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pw-meta-inline__value {
  min-height: 26px;
  padding: 0 var(--s-space-2);
  font-size: var(--s-font-size-1);
  font-family: var(--s-font-mono);
  color: var(--s-color-fg-primary);
  background: var(--s-color-bg-subtle);
  border: 1px solid var(--s-color-border);
  border-radius: var(--s-radius-1);
  cursor: pointer;
}

.pw-meta-inline__value:hover {
  border-color: var(--s-color-status-info);
  color: var(--s-color-status-info);
}

.pw-meta-inline__select,
.pw-meta-inline__text {
  min-height: 26px;
  padding: 0 var(--s-space-2);
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-primary);
  background: var(--s-color-bg-app);
  border: 1px solid var(--s-color-status-info);
  border-radius: var(--s-radius-1);
}

.pw-project__tab-host {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.pw-project__tab-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Tab switcher sets [hidden] on inactive panels (project.js:700). The
   `display: flex` rule above overrides the user-agent [hidden] → display:none
   default, so without this explicit rule all 4 panels render simultaneously
   competing for vertical space — the SAR Sheet ends up with ~25% of the
   viewport height and its table row collapses invisible. */
.pw-project__tab-panel[hidden] {
  display: none;
}

.pw-project__tab-panel--updates {
  overflow: hidden;
}

.pw-project__tab-panel--updates .ptv-root {
  flex: 1;
  min-height: 0;
}

.pw-project-empty-state {
  flex-shrink: 0;
  margin: var(--s-space-4) var(--s-space-5);
  padding: var(--s-space-5);
  border: 1px dashed var(--s-color-border);
  border-radius: var(--s-radius-2);
  background: var(--s-color-bg-subtle);
}

.pw-project-empty-state__title {
  margin: 0 0 var(--s-space-2);
  font-size: var(--s-font-size-2);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
}

.pw-project-empty-state__sub {
  margin: 0 0 var(--s-space-3);
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
}

.pw-project-empty-state__list {
  margin: 0;
  padding-left: var(--s-space-5);
  font-size: var(--s-font-size-1);
  line-height: 1.6;
  color: var(--s-color-fg-primary);
}

.pw-empty-cta {
  margin-left: var(--s-space-1);
  padding: 2px var(--s-space-2);
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-prominent-fg);
  background: var(--s-color-prominent-bg);
  border: none;
  border-radius: var(--s-radius-1);
  cursor: pointer;
}

.pw-empty-muted {
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  font-style: italic;
}

.pw-empty-hint {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
}

.pw-deferred-tab {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--s-space-4);
  padding: var(--s-space-6) var(--s-space-5);
}

.pw-deferred-tab__lead {
  margin: 0;
  max-width: 42rem;
  font-size: var(--s-font-size-1);
  line-height: 1.5;
  color: var(--s-color-fg-muted);
}

.pw-deferred-tab__link {
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-status-info);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pw-deferred-tab__link:hover {
  color: var(--s-color-fg-primary);
}

/* ── Project timeline (Updates tab) — toolbar, density, sheet ───────── */

.ptv-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ptv-toolbar {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-space-3);
  padding-bottom: var(--s-space-3);
  border-bottom: 1px solid var(--s-color-border);
}

.ptv-toolbar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-space-3);
}

.ptv-toolbar__label {
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--s-color-fg-muted);
}

.ptv-toolbar__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-2);
}

.ptv-filter-chip {
  font-size: var(--s-font-size-0);
  padding: 2px var(--s-space-2);
  border-radius: var(--s-radius-1);
  border: 1px solid var(--s-color-border);
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: var(--s-color-fg-muted);
}

.ptv-filter-chip--on {
  border-color: var(--s-color-prominent-bg);
  color: var(--s-color-prominent-fg);
  background: color-mix(in oklch, var(--s-color-prominent-bg) 14%, transparent);
}

.ptv-zoom-opt {
  font-size: var(--s-font-size-1);
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-1);
  margin-right: var(--s-space-3);
}

.ptv-density-host {
  flex-shrink: 0;
  padding: var(--s-space-2) 0 var(--s-space-3);
}

.ptv-density-bar {
  width: 100%;
  height: 40px;
  display: block;
}

.ptv-density-bar__seg {
  cursor: pointer;
}

.ptv-main-stream {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--s-space-5);
}

.ptv-ref-chips {
  margin-top: var(--s-space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-2);
}

.ptv-chip--derives {
  border-color: var(--s-color-status-info);
  color: var(--s-color-status-info);
}

.ptv-row__drawer-hint {
  margin-left: auto;
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
  align-self: center;
}

.ptv-main-stream .ptv-row {
  grid-template-columns: 18px 48px 88px minmax(0, 1fr) auto;
}

.ptv-heavy-day__toggle {
  width: 100%;
  text-align: start;
  padding: var(--s-space-2);
  margin-bottom: var(--s-space-2);
  border: 1px dashed var(--s-color-border);
  border-radius: var(--s-radius-1);
  background: var(--s-color-bg-subtle);
  cursor: pointer;
  font: inherit;
}

.ptv-event-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 11000;
  background: color-mix(in oklch, var(--s-color-bg-strong) 55%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-space-5);
}

/* Backdrop is initialized as sheetBackdrop.hidden=true (project-timeline-view.js:684);
   the display:flex above overrides the user-agent [hidden]→display:none default
   so the backdrop dimmed the entire page on first paint until an event was clicked.
   Same pattern as .pw-project__tab-panel[hidden] fix earlier in this file. */
.ptv-event-sheet-backdrop[hidden] {
  display: none;
}

.ptv-event-sheet {
  position: relative;
  max-width: min(720px, 96vw);
  max-height: 88vh;
  overflow: auto;
  padding: var(--s-space-5);
  border-radius: var(--s-radius-2);
  border: 1px solid var(--s-color-border);
  background: var(--s-color-bg-panel);
  color: var(--s-color-fg-primary);
}

.ptv-event-sheet__close {
  position: sticky;
  top: 0;
  float: right;
  margin-bottom: var(--s-space-2);
  border: 1px solid var(--s-color-border);
  border-radius: var(--s-radius-1);
  background: var(--s-color-bg-app);
  cursor: pointer;
  font: inherit;
  padding: var(--s-space-1) var(--s-space-2);
}