.layout { align-items: start; display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns .16s ease; }
.layout.sidebar-collapsed { grid-template-columns: 72px minmax(0, 1fr); }

.main { min-width: 0; }
.topbar {
  min-height: 76px;
  padding: 14px 28px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-heading {
  display: grid;
  gap: 3px;
  max-width: 76ch;
  min-width: 0;
}
.topbar .actions {
  flex: 0 0 auto;
  justify-content: flex-end;
  padding-top: 2px;
}
.content {
  display: grid;
  gap: 22px;
  padding: 28px;
  width: 100%;
}
.page-shell {
  display: grid;
  gap: var(--space-4);
  max-width: min(100%, 1480px);
  width: 100%;
}
.page-shell.wide,
.content > .page-shell.wide {
  max-width: none;
}
.page-header,
.page-actions,
.section-stack,
.content-main,
.content-aside {
  min-width: 0;
}
.page-header {
  align-items: start;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
}
.page-header > :first-child {
  min-width: min(100%, 28rem);
}
.page-header h1,
.page-header h2,
.page-header h3,
.page-header p {
  margin-block: 0;
}
.page-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}
.content-grid {
  display: grid;
  gap: var(--space-4);
}
.content-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.content-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.section-stack {
  display: grid;
  gap: var(--space-4);
}
.split-workspace {
  align-items: start;
  display: grid;
  gap: var(--space-4);
}
.bounded-list {
  max-height: min(68vh, 44rem);
  overflow: auto;
}
.action-rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}
.action-rail-header h2,
.action-rail-header h3,
.action-rail-header p {
  margin-block: 0;
}
.action-rail-body {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}
.action-rail-footer {
  align-items: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, .88), var(--panel));
  border-top: 1px solid var(--line);
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
  margin: var(--space-2) calc(var(--space-3) * -1) calc(var(--space-3) * -1);
  padding: var(--space-3);
  position: sticky;
}
.work-action-panel {
  max-height: min(72vh, 46rem);
  overflow: hidden;
}
.work-action-panel > form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}
.work-action-panel .action-rail-body {
  overflow: auto;
  padding-right: 2px;
}
.work-action-panel .form-section {
  background: var(--panel-soft);
  margin-bottom: var(--space-3);
  padding: var(--space-3);
}
.compact-form-grid {
  align-items: start;
  display: grid;
  gap: var(--space-2) var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.compact-form-grid > h2,
.compact-form-grid > h3,
.compact-form-grid > p,
.compact-form-grid > .errors,
.compact-form-grid > .error-summary {
  grid-column: 1 / -1;
}
.compact-form-grid > .field {
  min-width: 0;
}
.compact-form-grid > .field:has(textarea),
.compact-form-grid > .field:has(input[name="title"]),
.compact-form-grid > .field:has(input[name="reference_url"]) {
  grid-column: 1 / -1;
}
.work-action-panel .form-section h2,
.work-action-panel .form-section h3 {
  font-size: .94rem;
  margin-bottom: var(--space-2);
}
.work-action-panel .field {
  margin-bottom: var(--space-2);
}
.work-action-panel .input,
.work-action-panel .select,
.work-action-panel .textarea {
  min-height: 36px;
  padding: 8px 10px;
}
.work-action-panel .textarea {
  min-height: 4.25rem;
}
.task-composer .action-rail-header {
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--space-2);
}
.task-composer .form-section {
  margin-bottom: var(--space-2);
}
.task-composer .advanced-controls {
  background: transparent;
  border: 0;
}
.task-composer .advanced-controls > summary {
  margin-bottom: var(--space-2);
}
.task-composer .action-rail-body {
  gap: var(--space-2);
}
.task-composer .action-rail-footer {
  background: var(--panel);
  margin: var(--space-2) calc(var(--space-3) * -1) calc(var(--space-3) * -1);
  padding: var(--space-2) var(--space-3);
  position: sticky;
}
.action-panel-empty {
  background: var(--panel-soft);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
  padding: var(--space-3);
}
.user-settings-grid .form-panel > .actions {
  border-top: 1px solid var(--line);
  grid-column: 1 / -1;
  justify-content: flex-end;
  margin-top: var(--space-2);
  padding-top: var(--space-3);
}
.compact-density .content {
  gap: var(--space-3);
  padding-block: var(--space-4);
}
.compact-density .panel,
.compact-density .surface {
  padding: 16px;
}
.compact-density th,
.compact-density td {
  padding-block: 7px;
}
.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: .01ms !important;
}
.content > .panel,
.content > .surface,
.content > .page-shell {
  max-width: min(100%, 1480px);
  width: 100%;
}
.content > .pipeline-board-shell,
.content > .pipeline-table-shell,
.content > .wide-surface,
.content > .grid {
  max-width: none;
  width: 100%;
}
@media (min-width: 1180px) {
  .split-workspace.has-action-rail {
    grid-template-columns: minmax(0, 1fr) minmax(21rem, 28rem);
  }
  .content-aside,
  .action-rail {
    position: sticky;
    top: calc(76px + var(--space-4));
  }
}
@media (max-width: 760px) {
  .content {
    gap: var(--space-4);
    padding: var(--space-4);
  }
  .content-grid.two,
  .content-grid.three {
    grid-template-columns: 1fr;
  }
  .page-actions {
    justify-content: flex-start;
    width: 100%;
  }
  .work-action-panel {
    max-height: none;
  }
  .compact-form-grid {
    grid-template-columns: 1fr;
  }
  .action-rail-footer {
    justify-content: stretch;
  }
  .action-rail-footer .button,
  .action-rail-footer button {
    flex: 1 1 auto;
  }
}