/* Shared neutral surfaces and semantic colors, measured in both themes. */
:root {
  --status-positive-text: #78d8ad;
  --status-negative-text: #ff9299;
  --status-warning-text: #e7bb75;
  --status-positive-surface: rgba(62, 207, 142, .08);
  --status-negative-surface: rgba(255, 100, 103, .08);
  --status-warning-surface: rgba(245, 165, 36, .07);
}
:root[data-theme="light"] {
  --status-positive-text: #166441;
  --status-negative-text: #a32431;
  --status-warning-text: #794900;
  --status-positive-surface: #edf7f1;
  --status-negative-surface: #fff0f1;
  --status-warning-surface: #fff7e9;
}
.topbar-actions[hidden] { display: none !important; }
.project-tabs { gap: 4px; scrollbar-width: thin; scroll-padding-inline: 12px; }
.project-tabs .tab { flex: 0 0 auto; min-height: 44px; padding-inline: 16px; }
.project-tabs:focus-within { outline-offset: 3px; }
.project-head-title h2 { max-width: 100%; overflow-wrap: anywhere; }
.project-head-title > .project-domain { overflow-wrap: anywhere; white-space: normal; }
.project-detail .action-bar { align-items: flex-start; }
.project-more-actions { position: relative; }
.project-more-actions > summary { list-style: none; cursor: pointer; }
.project-more-actions > summary::-webkit-details-marker { display: none; }
.project-more-menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 12;
  display: grid; gap: 4px; min-width: 176px; padding: 6px;
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); box-shadow: 0 12px 30px rgba(0,0,0,.16);
}
.project-more-menu .btn { justify-content: flex-start; width: 100%; min-height: 44px; }
.project-detail .copy-row { align-items: start; gap: 12px; }
.project-detail .copy-row > code {
  display: block; flex: 1 1 0%; min-width: 0; max-width: 100%;
  white-space: normal !important; overflow-wrap: anywhere; word-break: normal;
  direction: ltr; unicode-bidi: isolate; text-align: start; line-height: 1.8;
}
.project-detail .copy-row > .btn { flex-shrink: 0; }
.env-field { display: grid; flex: 1; min-width: 0; gap: 7px; font-size: 14px; color: var(--text-secondary); }
.env-field input { width: 100%; }
.env-field input::placeholder { font-family: var(--font-sans); }
.inline-form:has(.env-field) { align-items: end; }
.badge-ok { color: var(--status-positive-text); }
.badge-danger { color: var(--status-negative-text); }
@media(max-width: 768px) {
  .project-head { gap: 16px; }
  .project-head-title { gap: 8px; width: 100%; }
  .project-head-title h2 { flex: 1; min-width: 0; }
  .project-head-title #pd-edit { font-size: 0; width: 44px; padding: 0; }
  .project-head-title #pd-edit svg { width: 18px; height: 18px; }
  .project-detail .action-bar { display: flex; width: 100%; gap: 8px; }
  .project-detail .action-bar > #pd-deploy { order: -1; }
  .project-detail .action-bar > .btn { flex: 1; padding-inline: 10px; }
  .project-more-actions > summary { font-size: 0; width: 44px; padding: 0; }
  .project-more-actions > summary svg { width: 20px; height: 20px; }
  .project-detail .copy-row > span { flex-basis: 100%; }
  .inline-form:has(.env-field) { display: grid; grid-template-columns: minmax(0,1fr); }
  .inline-form:has(.env-field) > .btn { justify-self: start; }
  .project-head-title .project-domain { flex-basis: 100%; margin-inline-start: 0; }
}