.skip-link {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 1000;
  background: #fff;
  color: #07121d;
  padding: 8px 12px;
  border-radius: 5px;
  font-weight: 700;
}
.skip-link:focus {
  top: 12px;
}
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.planned-chip {
  margin-left: auto;
  border: 1px solid #3b4b5c;
  border-radius: 999px;
  padding: 1px 5px;
  font-size: 8px;
  color: #8fa0b2;
  white-space: nowrap;
}
.planned-action {
  opacity: 0.8;
}
.planned-search input:disabled {
  cursor: not-allowed;
}
.icon-button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.state-banner,
.u1-state-banner {
  margin: 12px 0;
  border: 1px solid #6d5520;
  background: #33280c;
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.state-banner.error,
.u1-state-banner.error {
  border-color: #8f2e3e;
  background: #351018;
}
.state-banner span,
.u1-state-banner span {
  color: #b8c4d4;
}
.state-banner .btn,
.u1-state-banner .hbtn {
  margin-left: auto;
}
.skeleton-lines {
  padding: 14px;
  display: grid;
  gap: 10px;
}
.skeleton-lines span {
  height: 12px;
  border-radius: 4px;
  background: #1b3045;
}
.quiet-state,
.empty-copy,
.queue-empty,
.qempty {
  padding: 18px;
  color: #8fa2b5;
  display: grid;
  gap: 6px;
}
.quiet-state strong,
.empty-copy strong {
  color: #d8e1eb;
}
.not-exposed {
  color: #71859a;
}
.row-link {
  color: #dce6f1;
}
.row-link:hover,
.row-link:focus,
.link:hover,
.link:focus {
  text-decoration: underline;
}
.count-badge.zero {
  background: #334252;
}
.severity-dot.red {
  background: #ff4d55;
}
.failure-facts {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 7px;
  color: #b8c8db;
  font-size: 9px;
}
.waiting-band {
  border: 1px solid #8a6512;
  background: #33280c;
  border-radius: 7px;
  padding: 12px 14px;
  margin-top: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.waiting-band h3 {
  margin: 0;
  font-size: 12px;
  color: #ffd16f;
}
.waiting-band p {
  margin: 3px 0 0;
  color: #c7d1df;
  font-size: 10px;
}
.table-pad {
  padding: 0;
}
.task-title,
.task-sub {
  display: block;
}
.pending-change {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pending-change > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pending-change small {
  display: block;
  color: #879fbe;
  margin-top: 3px;
}
.recovery-action .btn {
  width: 100%;
  justify-content: center;
}
.diff-callout {
  margin: 17px 14px;
}
.finding {
  display: block;
  padding: 11px 12px;
  border-bottom: 1px solid #18334c;
}
.finding.selected {
  outline: 1px solid #8456ff;
  outline-offset: -1px;
}
.side-gate {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
}
.terminal-grid {
  grid-template-columns: 1fr 1fr 1fr;
}
.release-note {
  margin-top: 10px;
}
.toast-region {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  max-width: 430px;
  border: 1px solid #3d5470;
  background: #071b2c;
  color: #edf4ff;
  padding: 10px 12px;
  border-radius: 6px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}
.toast-region.visible {
  opacity: 1;
  transform: none;
}
.queue-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.75fr);
  gap: 13px;
  margin-top: 14px;
}
.queue-section {
  margin-bottom: 12px;
}
.queue-row {
  border-bottom: 1px solid #18334c;
}
.queue-row.selected {
  outline: 1px solid #8456ff;
  outline-offset: -1px;
}
.queue-row-main {
  min-height: 54px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
}
.queue-row-main strong,
.queue-row-main small {
  display: block;
}
.queue-row-main small {
  color: #8fa5c4;
  margin-top: 3px;
}
.queue-position {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #172c41;
  color: #b9c8dc;
}
.dependency-affordances {
  padding: 0 12px 8px 54px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  color: #8fa5c4;
  font-size: 9px;
}
.dependency-affordances > span {
  border: 1px solid #28445f;
  border-radius: 999px;
  padding: 2px 7px;
}
.next-dispatch {
  color: #69d9a6;
}
.dependency-summary {
  align-self: start;
  position: sticky;
  top: 72px;
}
.graph-panel {
  margin-top: 14px;
}
.graph-toolbar {
  padding: 10px 14px;
  border-bottom: 1px solid #18334c;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.graph-toolbar label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.graph-toolbar select {
  background: #07192b;
  color: #e8eff8;
  border: 1px solid #294660;
  border-radius: 5px;
  padding: 6px 8px;
}
.compound-graph {
  padding: 18px;
  overflow: auto;
}
.plan-group {
  border: 1px solid #34516e;
  border-radius: 8px;
  background: #061522;
  min-width: 650px;
}
.plan-group-head {
  padding: 10px 12px;
  border-bottom: 1px solid #29445e;
  display: flex;
  justify-content: space-between;
}
.graph-nodes {
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.graph-node {
  min-width: 180px;
  border: 1px solid #294660;
  border-radius: 6px;
  background: #091c2e;
  padding: 10px;
  display: grid;
  gap: 4px;
}
.graph-node.selected {
  border-color: #8a5cff;
}
.graph-node.dimmed {
  opacity: 0.38;
}
.graph-arrow {
  color: #8a5cff;
}
.relationship-list {
  border-top: 1px solid #18334c;
  padding: 12px 14px;
}
.relationship-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1.4fr;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #153048;
}
.relationship-row span {
  color: #93a8c3;
}
.not-found {
  max-width: 600px;
  margin: 100px auto;
  padding: 30px;
}
.project-cube {
  font-size: 22px;
  font-weight: 800;
  color: #cabdff;
}
@media (max-width: 900px) {
  body {
    min-width: 0 !important;
  }
  .screen,
  .project-shell,
  .lifecycle-shell {
    display: block !important;
  }
  .sidebar {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    inset: auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line2);
  }
  .brand {
    height: 48px !important;
  }
  .side-scroll {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 7px !important;
    gap: 4px;
  }
  .side-group {
    display: contents;
  }
  .side-label,
  .side-divider,
  .sidebar-foot,
  .project-switch {
    display: none !important;
  }
  .side-link {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    height: 34px !important;
    padding: 0 9px !important;
  }
  .main {
    display: block !important;
  }
  .topbar {
    position: relative !important;
    height: auto !important;
    min-height: 52px !important;
    display: flex !important;
    gap: 8px !important;
    padding: 8px 10px !important;
  }
  .topbar .breadcrumbs,
  .brand-spacer {
    display: none !important;
  }
  .search-box {
    flex: 1;
    min-width: 0;
  }
  .top-actions,
  .top-user {
    margin-left: auto;
  }
  .user-meta,
  .top-user > span:not(.avatar) {
    display: none !important;
  }
  .project-header {
    padding: 12px 10px 0 !important;
  }
  .project-main,
  .run-head {
    display: block !important;
  }
  .project-identity {
    margin-bottom: 10px;
  }
  .header-buttons,
  .actions {
    margin-top: 10px;
    display: flex !important;
    overflow-x: auto !important;
    padding-bottom: 2px;
  }
  .tabs {
    overflow-x: auto !important;
    white-space: nowrap !important;
  }
  .dashboard,
  .content {
    padding: 10px !important;
  }
  .row3,
  .row3.second,
  .grid-top,
  .grid-bottom,
  .outcome-grid,
  .review-layout,
  .terminal-grid,
  .queue-page-layout {
    grid-template-columns: 1fr !important;
  }
  .queue-cols {
    grid-template-columns: 1fr !important;
  }
  .bottom-status {
    height: auto !important;
    grid-template-columns: 1fr !important;
    gap: 8px;
    padding: 10px !important;
  }
  .bottom-status > * {
    justify-self: start !important;
  }
  .context-strip {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .context-strip .divider {
    display: none;
  }
  .review-layout {
    display: block !important;
  }
  .review-side {
    margin-top: 12px;
  }
  .diff-panel {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  .file-tree {
    border-right: 0 !important;
    border-bottom: 1px solid var(--line2);
    display: flex;
    overflow-x: auto;
    padding: 6px !important;
  }
  .file-head {
    display: none;
  }
  .file {
    flex: 0 0 auto;
    min-width: 150px;
  }
  .table-wrap {
    overflow-x: auto !important;
  }
  .table,
  .ops-table,
  .data-table {
    min-width: 680px;
  }
  .current-next {
    grid-template-columns: 1fr !important;
  }
  .cn {
    border-right: 0 !important;
    border-bottom: 1px solid #18334c;
  }
  .dependency-summary {
    position: static;
  }
  .relationship-row {
    grid-template-columns: 1fr !important;
  }
  .plan-group {
    min-width: 580px;
  }
  .state-banner,
  .u1-state-banner,
  .waiting-band,
  .recovery-band {
    align-items: flex-start;
    flex-direction: column;
  }
  .state-banner .btn,
  .u1-state-banner .hbtn {
    margin-left: 0;
  }
  .toast-region {
    left: 10px;
    right: 10px;
    bottom: 10px;
    max-width: none;
  }
}
@media (max-width: 560px) {
  .project-title {
    font-size: 21px !important;
  }
  .project-meta {
    flex-wrap: wrap;
  }
  .header-buttons .hbtn,
  .actions .btn {
    flex: 0 0 auto;
  }
  .top-user {
    gap: 6px !important;
  }
  .queue-row-main {
    grid-template-columns: 28px minmax(0, 1fr);
  }
  .queue-row-main .pill {
    grid-column: 2;
    justify-self: start;
  }
  .dependency-affordances {
    padding-left: 50px;
  }
  .graph-nodes {
    align-items: stretch;
    flex-direction: column;
  }
  .graph-arrow {
    transform: rotate(90deg);
  }
  .plan-group {
    min-width: 0;
  }
  .diff-view {
    overflow-x: auto;
  }
  .code {
    min-width: 590px;
  }
  .merge-gate {
    grid-template-columns: 1fr !important;
  }
  .merge-actions {
    justify-content: flex-start !important;
  }
  .project-icon {
    width: 44px !important;
    height: 44px !important;
  }
  .qitem {
    grid-template-columns: 20px minmax(0, 1fr) !important;
  }
  .qitem .plan {
    display: none;
  }
  .tabs .tab {
    padding: 0 10px !important;
  }
}

.setup-panel {
  margin-bottom: 12px;
}
.setup-form {
  display: grid;
  gap: 12px;
  padding: 14px;
}
.setup-form.two-column {
  grid-template-columns: minmax(220px, 0.8fr) minmax(320px, 1.2fr);
  align-items: end;
}
.setup-form label,
.dependency-form label {
  display: grid;
  gap: 6px;
  color: var(--muted, #8d9cab);
  font-size: 10px;
  font-weight: 650;
}
.setup-form input,
.setup-form textarea,
.setup-form select,
.dependency-form select {
  width: 100%;
  border: 1px solid #293b4d;
  background: #091724;
  color: var(--text, #f0f4f8);
  border-radius: 6px;
  padding: 8px 10px;
  font: inherit;
}
.setup-form textarea {
  resize: vertical;
}
.setup-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
}
.setup-actions .error,
.dependency-form .error {
  color: #ff8f9b;
  font-size: 10px;
}
.setup-subhead {
  padding: 10px 14px;
  border-top: 1px solid var(--line2, #172b3c);
  border-bottom: 1px solid var(--line2, #172b3c);
  color: #aeb8c2;
  font-weight: 650;
}
.dependency-editor {
  padding-bottom: 6px;
}
.dependency-row {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(380px, 1.1fr);
  gap: 16px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(32, 50, 69, 0.55);
}
.dependency-row > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
}
.dependency-row small {
  grid-column: 1 / -1;
  color: #7f8e9c;
}
.dependency-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: end;
}
.dependency-form .error {
  grid-column: 1 / -1;
}

.projects-collection-header {
  padding-bottom: 14px;
}
.projects-dashboard {
  display: grid;
  gap: 12px;
}
.projects-create-form {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(320px, 1.3fr) auto;
  gap: 12px;
  align-items: end;
  padding: 14px;
}
.projects-create-form label {
  display: grid;
  gap: 6px;
  color: var(--muted, #8d9cab);
  font-size: 10px;
  font-weight: 650;
}
.projects-create-form input {
  width: 100%;
  height: 36px;
  border: 1px solid #293b4d;
  background: #091724;
  color: var(--text, #f0f4f8);
  border-radius: 6px;
  padding: 8px 10px;
}
.projects-create-form .setup-actions {
  align-self: end;
}
.project-list-name {
  display: flex;
  align-items: center;
  gap: 10px;
}
.project-list-name > span:last-child {
  display: grid;
  gap: 2px;
}
.project-list-name small {
  color: var(--muted, #8d9cab);
  font-size: 10px;
  font-weight: 500;
}
.project-list-icon {
  width: 30px;
  height: 30px;
  border: 1px solid #7153e8;
  border-radius: 6px;
  background: #0c1827;
  display: grid;
  place-items: center;
  color: #d7c9ff;
  font-weight: 750;
}
.repository-cell {
  color: #aab7c3;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
}
.projects-table td:last-child {
  width: 130px;
}
@media (max-width: 980px) {
  .projects-create-form {
    grid-template-columns: 1fr;
  }
}