/* --- focused preview workspace --- */
.preview-workspace {
  margin: 0 auto;
  max-width: 68rem;
  width: 100%;
}

.preview-page-heading,
.preview-section-heading,
.preview-adjust-footer,
.preview-job-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.preview-page-heading {
  gap: 1rem;
  padding: 0.15rem 0 1rem;
}

.preview-page-heading h2,
.preview-current h3,
.preview-section-heading h3 {
  letter-spacing: 0;
  margin: 0;
}

.preview-page-heading h2 {
  font-size: 1.45rem;
  line-height: 1.2;
}

.preview-page-heading p {
  margin: 0.28rem 0 0;
}

.preview-status-badge,
.preview-current-label {
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.42rem 0.65rem;
  white-space: nowrap;
}

.preview-status-badge[data-status="ready"],
.preview-status-badge[data-status="completed"],
.preview-status-badge[data-status="accepted"] {
  background: #e3f2e9;
  border-color: #aed3bd;
  color: #1f6342;
}

.preview-status-badge[data-status="building"],
.preview-status-badge[data-status="running"],
.preview-status-badge[data-status="queued"] {
  background: #fff4dc;
  border-color: #ead09b;
  color: #815712;
}

.preview-status-badge[data-status="review_pending"] {
  color: #8a4b08;
  background: #fff3d6;
  border-color: #edc36b;
}

.preview-status-badge[data-status="failed"] {
  background: #fbe9e6;
  border-color: #e5b8b1;
  color: #8f2d20;
}

.preview-status-badge[data-status="stale"] {
  background: #edf0f7;
  border-color: #cbd2e1;
  color: #47566f;
}

.preview-current {
  display: block;
}

.preview-current > h3 {
  font-size: 1rem;
  margin: 0 0 0.75rem;
}

.preview-section-heading h3 {
  font-size: 1rem;
}

.preview-current-list {
  display: grid;
  gap: 0.65rem;
}

.preview-scope-row {
  align-items: center;
  background: var(--color-panel-soft);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  display: flex;
  gap: 1.25rem;
  justify-content: space-between;
  min-height: 7rem;
  padding: 1rem 1.1rem;
}

.preview-scope-copy {
  min-width: 0;
}

.preview-scope-heading {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.preview-scope-message {
  color: var(--color-ink);
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0.45rem 0 0;
}

.preview-action-feedback {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.preview-action-feedback[data-tone="success"] {
  color: var(--success-text, #24724a);
}

.preview-action-feedback[data-tone="error"] {
  color: var(--danger-text, #b42318);
}

.preview-stale-pages {
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--color-warning-text, #8a5a00);
  font-size: 12px;
  line-height: 1.5;
}

.preview-url {
  color: var(--color-accent);
  display: block;
  font-size: 0.78rem;
  margin-top: 0.45rem;
  max-width: min(48rem, 72vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-updated-at {
  display: block;
  color: var(--color-muted);
  font-size: 0.76rem;
  margin: 0.35rem 0 0;
}

.preview-findings {
  background: var(--color-panel-tint);
  border-left: 3px solid var(--color-warning, #b7791f);
  margin-top: 0.75rem;
  max-width: 52rem;
  padding: 0.7rem 0.85rem;
}

.preview-findings-heading {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.8rem;
}

.preview-findings-heading span,
.preview-findings small {
  color: var(--color-muted);
  font-size: 0.76rem;
}

.preview-findings ul {
  display: grid;
  gap: 0.35rem;
  margin: 0.55rem 0 0;
  padding-left: 1.15rem;
}

.preview-findings li {
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.preview-findings li[data-severity="blocking"],
.preview-findings li[data-severity="critical"],
.preview-findings li[data-severity="high"] {
  color: var(--color-danger, #a32929);
}

.preview-generate-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.preview-scope-actions {
  align-items: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0.5rem;
}

.preview-adjust,
.preview-history {
  border-top: 1px solid var(--color-border);
  margin-top: 1.4rem;
  padding-top: 1.35rem;
}

.preview-section-heading {
  margin-bottom: 0.75rem;
}

.preview-adjust-form label {
  color: var(--color-muted);
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
}

#preview-adjust-input {
  background: var(--color-panel-solid);
  border-radius: 8px;
  line-height: 1.55;
  margin: 0.45rem 0 0;
  min-height: 7.5rem;
  resize: vertical;
}

#preview-adjust-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(35, 95, 75, 0.12);
  outline: none;
}

.preview-adjust-footer {
  gap: 1rem;
  margin-top: 0.7rem;
  min-height: 2.6rem;
}

.preview-adjust-footer .muted {
  min-width: 0;
}

.preview-adjust-response {
  background: var(--color-panel-tint);
  border-left: 3px solid var(--color-accent);
  line-height: 1.55;
  margin-top: 0.85rem;
  padding: 0.75rem 0.9rem;
  white-space: pre-wrap;
}

.preview-jobs {
  border-top: 1px solid var(--color-border);
}

.preview-history-empty {
  color: var(--color-muted);
  margin: 0;
  padding: 1rem 0;
}

.preview-job-copy {
  min-width: 0;
}

.preview-jobs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.85rem;
}
.preview-job-row {
  border-bottom: 1px solid var(--color-border);
  gap: 1rem;
  min-height: 3.4rem;
  padding: 0.55rem 0;
}

.preview-job-row:last-child {
  border-bottom: 0;
}

.preview-history-link {
  font-weight: 700;
}

.preview-history-error {
  color: var(--color-danger, #8f2d20);
  font-size: 0.78rem;
  line-height: 1.45;
  margin: 0.35rem 0 0;
  max-width: 52rem;
}

@media (max-width: 720px) {
  .preview-scope-row,
  .preview-job-row {
    align-items: stretch;
    flex-direction: column;
  }

  .preview-generate-button {
    width: 100%;
  }

  .preview-scope-actions {
    width: 100%;
  }

  .preview-url {
    max-width: 100%;
  }
}
.preview-job-row small,
.publish-release-row small {
  display: block;
  color: var(--color-muted);
  font-size: 0.72rem;
  margin-top: 0.18rem;
}
.preview-job-row .mono,
.publish-release-row .mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8rem;
}

/* --- publish workflow workspace --- */
.publish-workspace {
  margin: 0 auto;
  max-width: 72rem;
  width: 100%;
}

.publish-live-band,
.publish-section-heading,
.publish-step-heading,
.publish-release-row,
.publish-release-actions,
.publish-step-actions,
.confirmation-dialog-actions {
  align-items: center;
  display: flex;
}

.publish-live-band {
  background: var(--color-panel-soft);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  margin: -0.25rem 0 0;
  padding: 1rem 1.1rem;
}

.publish-live-band > div:not(.publish-live-actions) {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
}

.publish-live-heading {
  font-size: 1.05rem;
  margin: 0;
}

.publish-live-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.5rem;
}

.publish-inline-warning {
  flex-basis: 100%;
  margin: 0;
  padding: 8px 10px;
  border-left: 3px solid var(--warning, #a96800);
  background: color-mix(in srgb, var(--warning, #a96800) 9%, transparent);
  color: var(--text-primary);
  font-size: 13px;
}

.publish-health-result {
  align-items: flex-start;
  border-left: 3px solid var(--color-success, #15803d);
  display: flex;
  flex-basis: 100%;
  gap: 0.55rem;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--color-success, #15803d) 8%, transparent);
  font-size: 0.78rem;
}

.publish-health-result[data-state="warning"],
.publish-health-result[data-state="failed"] {
  border-left-color: var(--color-danger, #b42318);
  background: color-mix(in srgb, var(--color-danger, #b42318) 7%, transparent);
}

.publish-health-result > strong {
  flex: 0 0 auto;
}

.publish-health-result > span {
  color: var(--color-muted);
  min-width: 0;
}

.publish-live-actions > button,
.publish-live-actions > .button-link {
  box-sizing: border-box;
  height: 2.4rem;
  min-height: 2.4rem;
  white-space: nowrap;
}

.publish-release-basic-info {
  line-height: 1.45;
}

.publish-section-label {
  color: var(--color-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.publish-live-title {
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.publish-live-band small,
.publish-step-time,
.publish-release-row small {
  color: var(--color-muted);
  font-size: 0.72rem;
}

.publish-process,
.publish-history {
  margin-top: 1.6rem;
}

details.publish-process > summary {
  cursor: pointer;
  list-style: none;
}

details.publish-process > summary::-webkit-details-marker {
  display: none;
}

details.publish-process > summary h3::after {
  border-bottom: 2px solid var(--color-muted);
  border-right: 2px solid var(--color-muted);
  content: "";
  display: inline-block;
  height: 0.5rem;
  margin: 0 0 0.18rem 0.55rem;
  transform: rotate(45deg);
  transition: transform 160ms ease;
  width: 0.5rem;
}

details.publish-process[open] > summary h3::after {
  transform: rotate(225deg);
}

details.publish-process[open] > summary {
  margin-bottom: 0.85rem;
}

.publish-history {
  border-top: 1px solid var(--color-border);
  padding-top: 1.4rem;
}

.publish-section-heading {
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}

.publish-section-heading h3 {
  font-size: 1.05rem;
  margin: 0;
}

.publish-section-heading p {
  margin: 0.25rem 0 0;
}

.publish-heading-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.publish-process-warning,
.publish-step-blocked {
  background: #fff4dc;
  border-left: 3px solid #b37816;
  color: #69460d;
  line-height: 1.5;
  margin: 0 0 0.85rem;
  padding: 0.7rem 0.85rem;
}

.publish-step-list {
  border-top: 1px solid var(--color-border);
}

.publish-step {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  min-height: 5.5rem;
}

.publish-step-rail {
  display: flex;
  justify-content: center;
  position: relative;
}

.publish-step-rail::after {
  background: var(--color-border);
  bottom: 0;
  content: "";
  position: absolute;
  top: 2.45rem;
  width: 1px;
}

.publish-step:last-child .publish-step-rail::after {
  display: none;
}

.publish-step-marker {
  align-items: center;
  background: var(--color-panel-solid);
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  display: flex;
  font-size: 0.72rem;
  font-weight: 800;
  height: 1.75rem;
  justify-content: center;
  margin-top: 0.9rem;
  position: relative;
  width: 1.75rem;
  z-index: 1;
}

.publish-step[data-status="completed"] .publish-step-marker {
  background: #e3f2e9;
  border-color: #8dbda1;
  color: #1f6342;
}

.publish-step[data-status="current"] .publish-step-marker,
.publish-step[data-status="blocked"] .publish-step-marker {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.publish-step-body {
  border-bottom: 1px solid var(--color-border);
  padding: 0.9rem 0 1rem 0.65rem;
}

.publish-step[data-status="current"] .publish-step-body,
.publish-step[data-status="blocked"] .publish-step-body {
  background: var(--color-panel-tint);
  padding-left: 1rem;
  padding-right: 1rem;
}

.publish-step[data-status="upcoming"] .publish-step-body {
  opacity: 0.68;
}

.publish-step-heading {
  align-items: flex-start;
  gap: 1rem;
  justify-content: space-between;
}

.publish-step-heading h4 {
  font-size: 0.92rem;
  margin: 0;
}

.publish-step-heading p {
  color: var(--color-muted);
  line-height: 1.45;
  margin: 0.25rem 0 0;
}

.publish-step-status {
  border: 1px solid var(--color-border-strong);
  color: var(--color-muted);
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.28rem 0.45rem;
}

.publish-step[data-status="current"] .publish-step-status {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.publish-step[data-status="blocked"] .publish-step-status {
  border-color: #c77767;
  color: #8f2d20;
}

.publish-step-record {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.7rem;
}

.publish-step-values {
  display: grid;
  font-size: 0.76rem;
  gap: 0.22rem 0.75rem;
  grid-template-columns: max-content minmax(0, 1fr);
  margin: 0;
}

.publish-step-values dt {
  color: var(--color-muted);
}

.publish-step-values dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.publish-step-results {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.publish-step-results > span {
  background: var(--color-panel-soft);
  border: 1px solid var(--color-border);
  display: grid;
  gap: 0.1rem;
  padding: 0.4rem 0.55rem;
}

.publish-step-results strong,
.publish-step-results small {
  font-size: 0.68rem;
}

.publish-step-results small {
  color: var(--color-muted);
}

.publish-step-form {
  margin-top: 0.85rem;
}

.publish-certificate-upload {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr)) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-panel-soft);
}

.publish-certificate-upload > strong,
.publish-certificate-upload > small {
  grid-column: 1 / -1;
}

.publish-certificate-upload label {
  display: grid;
  gap: 6px;
  font-size: 13px;
}

.publish-certificate-ready {
  color: var(--success, #18794e);
}

.publish-provisioning-progress {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-panel-soft);
}

.publish-provisioning-progress > small {
  color: var(--color-muted);
}

.publish-provisioning-progress ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 22px;
}

.publish-provisioning-progress li {
  padding-left: 4px;
}

.publish-provisioning-progress li small {
  display: block;
  color: var(--color-muted);
}

.publish-provisioning-progress li[data-status="succeeded"]::marker {
  color: #18794e;
}

.publish-provisioning-progress li[data-status="failed"]::marker {
  color: var(--color-danger);
}

@media (max-width: 760px) {
  .publish-certificate-upload {
    grid-template-columns: 1fr;
  }
}

.publish-locale-review {
  align-items: center;
  background: var(--color-panel-solid);
  border: 1px solid var(--color-border);
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  padding: 0.75rem;
}

.publish-locale-review p {
  margin: 0;
}

.publish-step-fields {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.publish-field {
  color: var(--color-muted);
  display: grid;
  font-size: 0.72rem;
  font-weight: 700;
  gap: 0.35rem;
}

.publish-field input,
.publish-field select {
  background: var(--color-panel-solid);
  font-size: 0.82rem;
}

.publish-checkbox-field {
  align-items: center;
  display: flex;
  font-size: 0.78rem;
  font-weight: 700;
  gap: 0.45rem;
  min-height: 2.8rem;
}

.publish-checkbox-field input {
  height: 1rem;
  width: 1rem;
}

.publish-step-actions {
  justify-content: flex-end;
  margin-top: 0.8rem;
}

.publish-release-list {
  border-top: 1px solid var(--color-border);
}

.publish-release-row {
  border-bottom: 1px solid var(--color-border);
  gap: 1rem;
  justify-content: space-between;
  min-height: 4rem;
  padding: 0.65rem 0;
}

.publish-release-row > div:first-child {
  min-width: 0;
}

.publish-release-row small {
  display: block;
  margin-top: 0.22rem;
}

.publish-release-actions {
  flex: 0 0 auto;
  gap: 0.45rem;
}

.publish-open-link,
.publish-release-actions button {
  font-size: 0.75rem;
  padding: 0.45rem 0.65rem;
}

.publish-empty {
  margin: 0;
  padding: 1rem 0;
}

.confirmation-dialog {
  background: transparent;
  border: 0;
  max-width: min(28rem, calc(100vw - 2rem));
  padding: 0;
  width: 100%;
}

.confirmation-dialog::backdrop {
  background: rgba(20, 27, 24, 0.48);
}

.confirmation-dialog-body {
  background: var(--color-panel-solid);
  border: 1px solid var(--color-border-strong);
  box-shadow: 0 1.4rem 4rem rgba(25, 35, 30, 0.24);
  padding: 1.2rem;
}

.confirmation-dialog-body h3 {
  font-size: 1.05rem;
  margin: 0;
}

.confirmation-dialog-body p {
  color: var(--color-muted);
  line-height: 1.55;
  margin: 0.65rem 0 1.1rem;
}

.confirmation-dialog-actions {
  gap: 0.55rem;
  justify-content: flex-end;
}

.button-danger {
  background: #8f2d20;
  border-color: #8f2d20;
  color: #fff;
}

.button-secondary {
  background: var(--color-panel-solid);
  border-color: var(--color-border-strong);
  color: var(--color-ink);
}

@media (max-width: 720px) {
  .publish-live-band,
  .publish-section-heading,
  .publish-release-row {
    align-items: stretch;
    flex-direction: column;
  }

  .publish-live-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .publish-step-fields {
    grid-template-columns: 1fr;
  }

  .publish-release-actions {
    justify-content: flex-start;
  }
}
.publish-certificate-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-block: 1px solid var(--border-subtle);
}

.publish-certificate-status > div:first-child {
  display: grid;
  gap: 3px;
}

.publish-certificate-status small {
  color: var(--text-muted);
}

.publish-certificate-status[data-state="expiring"] > div > strong,
.publish-certificate-status[data-state="attention"] > div > strong {
  color: var(--warning, #9a6700);
}

.publish-certificate-status[data-state="expired"] > div > strong,
.publish-certificate-status[data-state="renewal_failed"] > div > strong {
  color: var(--danger, #b42318);
}

.publish-certificate-replacement summary {
  cursor: pointer;
  color: var(--accent-strong);
  font-weight: 650;
}

.publish-certificate-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 20px;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.publish-certificate-replacement form {
  display: grid;
  gap: 8px;
  min-width: min(420px, 80vw);
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-raised);
}

.publish-certificate-replacement label {
  display: grid;
  gap: 4px;
  font-size: 0.82rem;
}

@media (max-width: 720px) {
  .publish-certificate-status {
    align-items: flex-start;
    flex-direction: column;
  }
}