/*
 * What changed (.specs/54): change cards, Show me previews, history, chips and banners. Built only
 * from the tokens in style.css; colour is never the only signal — every mark carries its word.
 *
 *   added    "New"          --success-*
 *   changed  its own word   --changed-* (blue, not --accent: that is the primary action's purple)
 *   removed  "Removed"      a neutral ghost: dashed --line-strong, --surface-low, --muted; never red
 *   moved    "Moved"        grey
 * Red is for one thing only: a change that needs the person's OK first (`check_first`).
 */
:root {
  --changed-ink: light-dark(color-mix(in srgb, var(--blue) 72%, var(--ink)), color-mix(in srgb, var(--blue) 78%, var(--ink)));
  --changed-soft: light-dark(color-mix(in srgb, var(--blue) 9%, var(--surface)), color-mix(in srgb, var(--blue) 16%, var(--surface)));
  --changed-line: light-dark(color-mix(in srgb, var(--blue) 38%, var(--surface)), color-mix(in srgb, var(--blue) 45%, var(--surface)));
}

/* ---------------------------------------------------------------- marks */

.change-chip { display: inline-flex; align-items: center; margin-left: 8px; padding: 0 7px; border: 1px solid var(--changed-line); border-radius: 999px; background: var(--changed-soft); color: var(--changed-ink); font-size: 11px; font-weight: 500; line-height: 18px; white-space: nowrap; vertical-align: 1px; }
.change-chip.change-added { border-color: var(--success-line); background: var(--success-soft); color: var(--success-ink); }
.change-chip.change-removed, .change-chip.change-hidden { border-style: dashed; border-color: var(--line-strong); background: var(--surface-low); color: var(--secondary); }
.change-chip.change-moved { border-color: var(--line-strong); background: var(--surface-low); color: var(--secondary); }
.change-mark .change-chip { background: var(--surface); }
.change-mark:focus { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* A marked field: the field as the form draws it, in a tinted frame that carries the mark. */
.field-grid > .change-mark { min-width: 0; margin: 6px -10px; padding: 0 10px; border: 1px solid var(--changed-line); border-radius: var(--radius); background: var(--changed-soft); }
.field-grid > .change-mark > :is(label, .file-field, .table-field) { margin: 8px 0 10px; }
.field-grid > .change-wide { grid-column: 1 / -1; }
.field-grid > .change-added { border-color: var(--success-line); background: var(--success-soft); }
.field-grid > .change-moved { border-color: var(--line-strong); background: var(--surface-low); }
/* A ghost: where a removed or hidden field was, drawn with real contrast rather than opacity. */
.field-grid > .change-ghost { border: 1px dashed var(--line-strong); background: var(--surface-low); }
.change-ghost :is(label, .table-title, .file-field, .file-field-label) { color: var(--muted); }
.change-ghost :is(input, select, textarea):disabled, .change-ghost-cell :is(input, select, textarea):disabled { opacity: 1; border-style: dashed; border-color: var(--line-strong); background: var(--surface-low); color: var(--muted); box-shadow: none; }
.form-section h3.change-mark { display: flex; align-items: center; flex-wrap: wrap; gap: 0; }
th.change-mark { background: var(--changed-soft); }
th.change-added { background: var(--success-soft); }
th.change-moved { background: var(--surface-low); }
th.change-ghost { background: var(--surface-low); color: var(--muted); outline: 1px dashed var(--line-strong); outline-offset: -4px; }
th .change-chip { margin-left: 6px; }
.change-ghost-cell { background: var(--surface-low); color: var(--muted); }

/* ---------------------------------------------------------------- a page's list, filtered */

.list-tools-start { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.list-tools-start > .list-search { flex: 0 1 320px; }
.list-filter-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 4px 0 10px; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 500; white-space: nowrap; }
.list-filter-chip > .icon { width: 14px; height: 14px; color: var(--muted); }
.list-filter-clear { width: 32px; height: 32px; padding: 8px; background: transparent; color: var(--muted); }
.list-filter-clear:hover { background: var(--surface-high); color: var(--ink); }

/* ---------------------------------------------------------------- cards */

.change-card { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); font-size: 14px; line-height: 1.5; }
.change-card-header { display: flex; flex-direction: column; gap: 2px; }
.change-card-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 22px; overflow-wrap: anywhere; }
.change-undone .change-card-title { color: var(--secondary); }
.change-card-count { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 13px; }
.change-request-text { margin: 0; color: var(--secondary); font-size: 13px; overflow-wrap: anywhere; }
.change-groups { display: flex; flex-direction: column; gap: 12px; }
.change-group-label { margin: 0 0 6px; color: var(--muted); font-size: 12px; font-weight: 500; line-height: 16px; }
.change-items { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.change-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.change-item > .change-chip { margin: 0; }
.change-item-open { display: inline; min-width: 0; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); font: inherit; line-height: inherit; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.change-item-open:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }
.change-item-text { min-width: 0; overflow-wrap: anywhere; }
.change-details-toggle { padding: 0; font-size: 12px; }
.change-details { flex-basis: 100%; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 2px 0 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-low); font-size: 13px; }
.change-details dt { color: var(--muted); }
.change-details dd { margin: 0; overflow-wrap: anywhere; }
.change-more { align-self: flex-start; }

.change-impacts { display: flex; flex-direction: column; gap: 8px; }
.change-impact p { margin: 0; }
.change-impact.level-heads_up, .change-impact.level-check_first { padding: 10px 12px; border: 1px solid var(--warning-line); border-radius: var(--radius); background: var(--warning-soft); color: var(--ink); }
.change-impact.level-check_first { border-color: var(--danger-line); background: var(--danger-soft); }
.change-impact .change-impact-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; color: var(--warning-ink); font-size: 12px; font-weight: 600; line-height: 16px; }
.change-impact.level-check_first .change-impact-head { color: var(--danger-ink); }
.change-impact-head .icon { width: 14px; height: 14px; }
.change-impact.level-info { color: var(--secondary); font-size: 13px; }
.change-impact-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.change-checking, .change-checked, .change-quiet { margin: 0; color: var(--muted); font-size: 13px; }
.change-card-message { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--secondary); font-size: 13px; }
.change-card-message.change-warning { color: var(--warning-ink); }
.change-card-message .icon { margin-top: 2px; }
.change-card-area:empty { display: none; }
.change-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* While an undo runs its actions keep focus but do nothing, drawn as a disabled button is. */
.change-actions button[aria-disabled="true"] { opacity: .5; cursor: default; }
.change-card-title:focus { outline: none; }
.change-confirm { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-low); }
.change-confirm-title { margin: 0; font-size: 14px; }
.change-confirm-title:focus { outline: none; }
.change-confirm-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* A proposal waits for the person: red edged, and never the look of a failed turn. */
.change-proposal { border-color: var(--danger-line); }
.change-proposal-word { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--danger-ink); font-size: 12px; font-weight: 600; line-height: 16px; }
.change-proposal-word .icon { width: 14px; height: 14px; }
.change-proposal-reasons { margin: 0; padding-left: 20px; color: var(--secondary); font-size: 13px; }


/* What #status says about a change is news, not an error. */
#status.change-announce { border-color: var(--line); color: var(--ink); }

/* ---------------------------------------------------------------- Show me */

.change-preview { width: min(1120px, 96vw); height: min(880px, 92dvh); max-height: 92dvh; padding: 0; overflow: hidden; }
.change-preview[open] { display: flex; flex-direction: column; }
.change-preview-header { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px 8px; }
.change-preview-titles { flex: 1; min-width: 0; }
.change-preview-titles h2 { margin: 0; font-size: 16px; line-height: 24px; }
.change-preview-subtitle { margin: 2px 0 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
/* One row under the header: the parts that changed on the left, the page and version on the right. */
.change-preview-nav { display: flex; flex: none; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 12px; padding: 0 20px 0 12px; border-bottom: 1px solid var(--line); }
.change-preview-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-left: auto; padding: 4px 0 8px; }
.change-preview-tools:empty { display: none; }
.change-picker { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 500; }
.change-picker select { width: auto; min-width: 160px; max-width: 100%; }
/* After / Before: the default tabs look, a grey track with the chosen one raised. */
.change-switch { display: flex; align-items: center; gap: 2px; min-height: 36px; padding: 3px; border-radius: var(--radius-md); background: var(--surface-low); }
.change-switch button { min-height: 30px; padding: 4px 12px; border-radius: var(--radius-sm); background: transparent; color: var(--muted); font-weight: 500; }
.change-switch button:hover { background: transparent; color: var(--ink); }
.change-switch button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
/* The parts that changed: outline tabs on a hairline, the chosen one underlined in ink. */
.change-tabs { display: flex; flex: 0 1 auto; align-items: flex-end; min-width: 0; padding-top: 4px; overflow-x: auto; }
.change-tab { min-height: 0; margin-bottom: -1px; padding: 6px 12px 10px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--muted); font-weight: 500; white-space: nowrap; box-shadow: none; }
.change-tab:hover { background: transparent; color: var(--ink); }
.change-tab[aria-selected="true"] { border-bottom-color: var(--ink); color: var(--ink); }
/* Activepieces' "viewing an old version" bar. */
.change-version-bar { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 20px; border-bottom: 1px solid var(--changed-line); background: var(--changed-soft); color: var(--changed-ink); font-size: 13px; font-weight: 500; }
.change-version-bar .link-button { color: var(--changed-ink); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.change-stage { flex: 1; min-height: 0; overflow: auto; padding: 20px; background-color: var(--stage-bg); background-image: radial-gradient(circle, var(--dot-grid) .6px, transparent .8px); background-size: 10px 10px; }
.change-stage:focus { outline: none; }
.change-form-preview, .change-list-preview, .change-access, .change-menu { max-width: 920px; margin: 0 auto; }
.change-form-caption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--muted); font-size: 13px; }
.change-form-caption .change-chip { margin: 0; }
.change-form-page { color: var(--ink); font-size: 14px; font-weight: 600; }
.change-form-record::before { content: "·"; margin-right: 8px; }
/* The preview is read-only; its fields read as the record, not as faded controls. */
.change-form :is(input, select, textarea):disabled { opacity: 1; cursor: default; }
.change-form .table-control button:disabled { opacity: .5; }

.change-list, .change-access-table { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.change-access-table th:not(:first-child), .change-right { text-align: center; }
.change-right .icon { color: var(--secondary); }
.change-right .change-chip { margin: 0; }
.change-right-none { color: var(--faint); }
.change-access-list { display: none; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.change-access-list.change-access-only { display: flex; }
.change-access-list > li { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.change-access-rights { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.change-access-right { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.change-access-right .change-chip { margin: 0; }

.change-menu { display: flex; flex-direction: column; gap: 12px; }
.change-menu-entry { cursor: default; }
.change-menu-entry.change-mark { border-color: var(--changed-line); background: var(--changed-soft); color: var(--ink); }
.change-menu-entry.change-added { border-color: var(--success-line); background: var(--success-soft); }
.change-menu-entry.change-moved { border-color: var(--line-strong); background: var(--surface-low); }
.change-menu-entry.change-ghost { border-style: dashed; border-color: var(--line-strong); background: var(--surface-low); color: var(--muted); }
.change-menu-entry .change-chip { margin-left: 2px; }

/* ---------------------------------------------------------------- history */

.change-history-host { min-width: 0; }
.change-history { display: flex; flex-direction: column; gap: 20px; max-width: 880px; min-width: 0; }
.change-day-label { margin: 0 0 8px; color: var(--muted); font-size: 12px; font-weight: 500; line-height: 16px; }
.change-rows { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.change-row + .change-row { border-top: 1px solid var(--line); }
.change-row-toggle { width: 100%; min-height: 56px; justify-content: flex-start; gap: 12px; padding: 10px 16px; border: 0; border-radius: 0; background: transparent; text-align: left; }
.change-row-toggle:hover { background: var(--row-hover); }
.change-row-toggle > .icon:last-child { flex: none; color: var(--muted); transition: transform .15s; }
.change-row-toggle > .change-badge { flex: none; }
.change-row-toggle[aria-expanded="true"] > .icon:last-child { transform: rotate(90deg); }
.change-avatar { display: inline-grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: var(--mark); color: var(--on-accent); font-size: 12px; font-weight: 600; line-height: 1; }
.change-row-main { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; }
.change-row-title { font-weight: 500; overflow-wrap: anywhere; }
.change-row-meta { color: var(--muted); font-size: 12px; }
.change-row-body { padding: 0 16px 16px 56px; }
.change-older { align-self: flex-start; }
.change-empty { padding: 48px 24px; }
.change-history-dialog { width: min(820px, 94vw); }
.change-history-dialog .change-preview-header { padding: 0 0 12px; }

@media (max-width: 760px) {
  .change-preview { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .change-preview-header { padding: 12px 16px 6px; }
  .change-preview-nav { padding: 0 16px 0 8px; }
  .change-version-bar { padding: 8px 16px; }
  .change-stage { padding: 12px; }
  .change-access-table { display: none; }
  .change-access-list { display: flex; }
  .change-row-toggle { padding: 10px 12px; }
  .change-row-body { padding: 0 12px 12px; }
  .change-history-dialog { width: 100vw; max-width: 100vw; max-height: 100dvh; margin: 0; border-radius: 0; }
}
@media (max-width: 480px) {
  .change-card { padding: 14px; }
  .change-picker { flex: 1 1 100%; }
  .change-picker select { flex: 1; min-width: 0; }
  .list-tools-start { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------- where people work
 * The app's menu, a page's list and a record's form (.specs/54, "Where people see it", point 3):
 * what someone else changed that this person has not seen. Quieter than Show me — a chip with its
 * word, no frames — and a one-line banner only when how the page is worked changed.
 */

/* "What changed" in a header, with how many requests this person has not seen yet. */
.change-history-button .icon { width: 15px; height: 15px; color: var(--muted); }
.change-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin: -2px -4px -2px -2px; padding: 0 6px; border: 1px solid var(--changed-line); border-radius: 999px; background: var(--changed-soft); color: var(--changed-ink); font-size: 12px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }

/* A page in the app's menu. */
.page-shortcut .change-chip { margin: 0 -4px 0 0; }

/* A record's form: the field's word beside its name, and the field drawn as it always is. */
.record-form.change-daily .field-grid > .change-mark { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.record-form.change-daily .field-grid > .change-mark > :is(label, .file-field) { margin: 14px 0; }
.record-form.change-daily .field-grid > .change-mark > .table-field { margin: 6px 0 14px; }
.record-form.change-daily th.change-mark { background: var(--table-head-bg); }
.record-form.change-daily .change-mark .change-chip { background: var(--changed-soft); }
.record-form.change-daily .change-mark .change-chip.change-added { background: var(--success-soft); }
.record-form.change-daily .change-mark .change-chip.change-moved { background: var(--surface-low); }

/* "Trip changed on 2 Oct by Asha: …  What changed · Dismiss", under the page's header. */
.change-banner { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 10px; margin: 0 0 16px; padding: 4px 4px 4px 12px; border: 1px solid var(--changed-line); border-radius: var(--radius); background: var(--changed-soft); color: var(--ink); font-size: 13px; line-height: 20px; }
/* Icon, first line of text and the actions share one centre line, however far the text wraps. */
.change-banner > .icon { width: 15px; height: 15px; margin-top: 11px; color: var(--changed-ink); }
.change-banner-text { flex: 1 1 260px; min-width: 0; margin: 8px 0; overflow-wrap: anywhere; }
.change-banner-text strong { font-weight: 600; }
.change-banner-actions { display: flex; flex: none; align-items: center; margin-left: auto; }
.change-banner-actions button { min-height: 36px; padding: 0 10px; font-size: 13px; font-weight: 500; }
.change-banner-actions button:hover { background: var(--surface); }
.change-banner-open { color: var(--changed-ink); }
.change-banner-dismiss { color: var(--secondary); }
.change-banner-dot { color: var(--muted); }

/* ---------------------------------------------------------------- Publish and live's versions (.specs/55, P4)

   The page's one accent button is Publish; amber is "Must fix" and "Worth knowing"; red stays
   "Needs your OK" alone. Conflicts are amber edged until decided. */

.publish-page, .versions-page { max-width: 1240px; }
.publish-loading { margin: 8px 0; color: var(--muted); font-size: 14px; }
.publish-muted { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.publish-label { margin: 0 0 6px; color: var(--muted); font-size: 12px; font-weight: 500; }
.publish-problem { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 16px; padding: 10px 14px; border: 1px solid var(--warning-line); border-radius: var(--radius); background: var(--warning-soft); color: var(--ink); font-size: 14px; }
.publish-problem > .icon { width: 16px; height: 16px; color: var(--warning-ink); }
.publish-problem p { flex: 1; min-width: 200px; margin: 0; overflow-wrap: anywhere; }
.publish-readonly { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-low); color: var(--secondary); font-size: 13px; }
.publish-readonly .icon { width: 15px; height: 15px; flex: none; }
.publish-refresh .icon { width: 15px; height: 15px; }

/* Asked to publish. */
.publish-requests { display: flex; flex-direction: column; margin: 0 0 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.publish-request { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; }
.publish-request + .publish-request { border-top: 1px solid var(--line); }
.publish-request-words { flex: 1; min-width: 0; }
.publish-request-line { margin: 0; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.publish-request-notes { margin: 2px 0 0; color: var(--secondary); font-size: 13px; overflow-wrap: anywhere; white-space: pre-wrap; }
.publish-request-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.publish-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-high); color: var(--secondary); font-size: 12px; font-weight: 600; }

/* Before you publish. */
.publish-checks { margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.publish-checks h2 { margin: 0 0 8px; font-size: 14px; font-weight: 600; line-height: 20px; }
.publish-check-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.publish-check { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 14px; line-height: 1.5; }
.publish-check.is-info { color: var(--secondary); }
.publish-check.is-clear { align-items: center; color: var(--secondary); }
.publish-check.is-clear .icon { width: 15px; height: 15px; color: var(--success-ink); }
.publish-check-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.publish-check-actions { display: flex; gap: 10px; }
.publish-check-actions .text-button { padding: 0; color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.publish-must-fix, .publish-worth { display: inline-flex; align-items: center; flex: none; height: 20px; padding: 0 8px; border: 1px solid var(--warning-line); border-radius: 999px; background: var(--warning-soft); color: var(--warning-ink); font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; }
.publish-worth { font-weight: 500; }

/* The changes, and beside them the version. */
.publish-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.publish-layout.is-empty { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.publish-stays-list[hidden] { display: none; }
.publish-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.publish-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 16px; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); color: var(--secondary); text-align: center; }
.publish-empty > .icon { width: 22px; height: 22px; color: var(--muted); }
.publish-empty h2 { margin: 4px 0 0; font-size: 15px; }
.publish-empty p { margin: 0; color: var(--muted); font-size: 14px; }
.publish-group { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.publish-group-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.publish-group-pick { display: inline-flex; margin: 0; }
.publish-group-pick input, .publish-thing-pick { margin: 0; }
.publish-app-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 600; }
.publish-group-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 22px; overflow-wrap: anywhere; }
.publish-group-count { color: var(--muted); font-size: 13px; }
.publish-things { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.publish-thing { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); font-size: 14px; line-height: 1.5; }
.publish-thing:not(.is-selected) { background: var(--surface-low); box-shadow: none; }
.publish-thing:not(.is-selected) :is(.change-groups, .publish-impacts, .publish-conflict) { opacity: .72; }
.publish-thing-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.publish-thing-name { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.publish-thing-name strong { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.publish-thing-name .change-chip { margin: 0; }
.publish-kind { color: var(--muted); font-size: 12px; }
.publish-show-button { flex: none; height: 32px; padding: 0 10px; font-size: 13px; }
.publish-show-button .icon { width: 14px; height: 14px; }
.publish-thing-meta { margin: -4px 0 0; color: var(--muted); font-size: 12px; }
.publish-thing-meta:empty { display: none; }
.publish-included { color: var(--secondary); font-weight: 500; }
.publish-thing-check { margin: 0; font-size: 13px; color: var(--secondary); }
.publish-rollback-note { margin: 0; color: var(--muted); font-size: 12px; }
/* A new automation's "On after publishing" switch (P6): grey track, ink when on — the page's one
   accent stays the Publish button. */
.publish-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-low); font-size: 13px; }
.publish-switch-control { position: relative; display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--ink); font-weight: 500; cursor: pointer; user-select: none; }
.publish-switch-control input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.publish-switch-track { position: relative; width: 32px; height: 18px; flex: none; border-radius: 999px; background: var(--line-strong); transition: background .15s; }
.publish-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); transition: transform .15s; }
.publish-switch-control input:checked + .publish-switch-track { background: var(--ink); }
.publish-switch-control input:checked + .publish-switch-track::after { transform: translateX(14px); }
.publish-switch-control input:focus-visible + .publish-switch-track { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
.publish-switch-control input:disabled + .publish-switch-track { opacity: .5; }
.publish-switch-control:has(input:disabled) { cursor: default; color: var(--secondary); }
.publish-switch-why { flex: 1; min-width: 180px; color: var(--secondary); overflow-wrap: anywhere; }
.publish-switch-summary[hidden] { display: none; }
.publish-impact .change-impact-text { overflow-wrap: anywhere; }
.publish-live-link { display: inline-flex; align-items: center; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow); color: var(--ink); font-size: 13px; text-decoration: none; }
.publish-live-link:hover { background: var(--surface-low); }
/* A screen's heading takes the focus when it is drawn, for screen readers; it is not a control. */
:is(.publish-page, .versions-page) .page-header h1:focus { outline: none; }
.publish-ok { display: inline-flex; align-items: center; gap: 0; margin: 8px 0 0; font-size: 13px; font-weight: 500; cursor: pointer; }
/* Ticked: agreed to, so it reads as worth knowing rather than a question still open. */
.change-impact.level-check_first.is-agreed { border-color: var(--warning-line); background: var(--warning-soft); }
.change-impact.level-check_first.is-agreed .change-impact-head { color: var(--warning-ink); }

/* A conflict: live's or the draft's, decided by the person. */
.publish-conflict { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--warning-line); border-radius: var(--radius); background: var(--surface); }
.publish-conflict.is-decided { border-color: var(--line); }
.publish-conflict-head { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--warning-ink); font-size: 12px; font-weight: 600; line-height: 16px; }
.publish-conflict.is-decided .publish-conflict-head { color: var(--muted); }
.publish-conflict-head .icon { width: 14px; height: 14px; }
.publish-conflict-about { margin: 0; overflow-wrap: anywhere; }
.publish-conflict-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.publish-option { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-weight: 400; cursor: pointer; }
.publish-option:hover { background: var(--surface-low); }
.publish-option:has(input:checked) { border-color: var(--focus-border); background: var(--surface-low); box-shadow: 0 0 0 1px var(--focus-border); }
.publish-option:has(input:focus-visible) { outline: 3px solid var(--focus-ring); }
.publish-option:has(input:disabled) { cursor: default; }
.publish-option input { flex: none; margin: 3px 0 0; }
.publish-option-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.publish-option-words strong { font-size: 14px; font-weight: 500; }
.publish-option-words small { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }

/* Can't be published, and what stays in the draft. */
.publish-box { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-low); }
.publish-box[hidden] { display: none; }
.publish-box h2 { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.publish-box ul { display: grid; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; font-size: 14px; }
.publish-box li { overflow-wrap: anywhere; }
.publish-box li .change-chip { margin-left: 8px; }
.publish-cannot { border-color: var(--warning-line); background: var(--warning-soft); }
.publish-cannot ul { margin: 0; }
.publish-cannot .publish-muted { color: var(--secondary); }

/* The version, its name and notes, and Publish. */
.publish-aside { position: sticky; top: calc(var(--banner-height) + 72px); display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.publish-aside h2 { margin: 0; font-size: 15px; font-weight: 600; }
.publish-aside label { margin: 0; font-size: 13px; }
.publish-aside label > :is(input, textarea) { margin-top: 6px; }
.publish-aside textarea { resize: vertical; }
.publish-summary { margin: 4px 0 0; font-size: 14px; font-weight: 500; }
.publish-included-list[hidden], .publish-reason[hidden] { display: none; }
.publish-go, .publish-ask { width: 100%; height: 36px; }
.publish-go.is-disabled, button.is-disabled { opacity: .5; cursor: not-allowed; }
.publish-go.is-disabled:hover, button.primary.is-disabled:hover { background: var(--accent); }
.publish-reason { margin: 0; color: var(--secondary); font-size: 13px; line-height: 1.5; }
.publish-asked { margin: 0; color: var(--success-ink); font-size: 13px; }
.publish-asked[hidden] { display: none; }

/* A job: its steps, and what came of it. */
.publish-job { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.publish-steps { display: flex; flex-direction: column; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); list-style: none; }
.publish-step { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 14px; font-size: 14px; }
.publish-step + .publish-step { border-top: 1px solid var(--line); }
.publish-step-mark { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-low); color: var(--muted); }
.publish-step-mark .icon { width: 13px; height: 13px; }
.publish-step.is-done .publish-step-mark { background: var(--success-soft); color: var(--success-ink); }
.publish-step.is-running .publish-step-mark { background: var(--accent-soft); color: var(--accent); }
.publish-step.is-failed .publish-step-mark { background: var(--warning-soft); color: var(--warning-ink); }
.publish-step-words { display: flex; flex-direction: column; min-width: 0; }
.publish-step-words strong { font-weight: 500; overflow-wrap: anywhere; }
.publish-step-words small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.publish-step-words .publish-step-error { color: var(--warning-ink); }
.publish-step-state { color: var(--muted); font-size: 13px; white-space: nowrap; }
.publish-step.is-done .publish-step-state { color: var(--success-ink); }
.publish-step.is-running .publish-step-state { color: var(--accent); }
.publish-outcome { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-low); font-size: 14px; }
.publish-outcome p { margin: 0; overflow-wrap: anywhere; }
.publish-outcome.is-done { border-color: var(--success-line); background: var(--success-soft); }
.publish-outcome.is-partial { border-color: var(--warning-line); background: var(--warning-soft); }
.publish-on-live { color: var(--ink); font-weight: 500; }
.publish-rebase { color: var(--secondary); }
.publish-job-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

/* What a refresh put back (.specs/55, P5): who first made each part, on its card. */
.change-carried { display: grid; gap: 4px; margin: 0 0 12px; padding: 0; list-style: none; font-size: 13px; line-height: 1.5; }
.change-carried-line { overflow-wrap: anywhere; }

/* Refreshing and deleting the draft (.specs/55, P5): the dialogs that say what is kept and lost,
   the waiting one, and #draft/carry, which reuses the Publish screen's layout and cards. */
.draft-lifecycle-dialog { width: min(680px, 94vw); }
/* A long list of what is kept scrolls inside the dialog; its buttons stay in view under it. */
.draft-lifecycle-dialog .transfer-dialog-body { overflow: auto; margin: 0 -4px; padding: 0 4px; }
.draft-dialog-lead { margin: 0; color: var(--secondary); }
.draft-dialog-lead strong { color: var(--ink); font-weight: 500; }
.draft-dialog-sections, .draft-dialog-notes { display: flex; flex-direction: column; gap: 12px; }
.draft-dialog-notes p { margin: 0; }
.draft-dialog-said:empty { display: none; }
.draft-dialog-problem { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 8px 12px; border: 1px solid var(--warning-line); border-radius: var(--radius); background: var(--warning-soft); color: var(--ink); }
.draft-dialog-problem .icon { flex: none; width: 15px; height: 15px; margin-top: 3px; color: var(--warning-ink); }
.draft-request { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.draft-notes { margin: 0; font-size: 13px; }
.draft-notes textarea { margin-top: 6px; }
.draft-section { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.draft-section-title { margin: 0; font-size: 14px; font-weight: 600; line-height: 20px; }
.draft-section-line { margin: 0; overflow-wrap: anywhere; }
.draft-lost { background: var(--surface-low); }
.draft-groups { display: flex; flex-direction: column; gap: 10px; }
.draft-group-title { margin: 0 0 4px; color: var(--muted); font-size: 12px; font-weight: 600; }
.draft-things { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.draft-thing { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.draft-thing-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; }
.draft-thing-name strong { font-weight: 600; overflow-wrap: anywhere; }
.draft-thing-name .change-chip { margin: 0; }
.draft-thing-who { margin: 0; color: var(--muted); font-size: 12px; }
.draft-live-changed { margin: 0; color: var(--secondary); font-size: 13px; }
.draft-not-carried { display: grid; gap: 4px; margin: 0; padding-left: 18px; overflow-wrap: anywhere; }
.draft-records { display: flex; flex-direction: column; gap: 8px; }
.draft-records-line { margin: 0; overflow-wrap: anywhere; }
.draft-records-line strong { font-weight: 600; }
.draft-records-pages { display: flex; flex-direction: column; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); list-style: none; }
.draft-records-page { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 8px 10px 8px 12px; }
.draft-records-page + .draft-records-page { border-top: 1px solid var(--line); }
.draft-records-label { flex: 1; min-width: 120px; font-weight: 500; overflow-wrap: anywhere; }
.draft-download { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; font-size: 13px; }
.draft-download .icon, .draft-copy-redo .icon { width: 14px; height: 14px; }
.draft-blockers { margin: 0; }
.draft-asked { margin: 0; color: var(--success-ink); font-weight: 500; }
.draft-prepare-reason { margin-top: -4px; }
.draft-prepare-reason[hidden] { display: none; }
.draft-carry-leave { display: inline-flex; align-items: center; gap: 6px; flex: none; margin: 0; color: var(--secondary); font-size: 13px; font-weight: 400; cursor: pointer; }
.draft-carry-leave input { margin: 0; }
.draft-carry-thing:not(.is-selected) .draft-carry-leave { color: var(--ink); font-weight: 500; }
.draft-could-not ul { gap: 8px; }
.draft-could-not-row { display: flex; align-items: flex-start; gap: 10px; }
.draft-could-not-words { flex: 1; min-width: 0; }
.draft-could-not-words p { margin: 2px 0 0; }
.draft-copy-redo { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 32px; padding: 0 10px; font-size: 13px; }
.draft-carry-left[hidden] { display: none; }
.draft-carry-leave-all { width: 100%; }
.draft-left-out { display: grid; gap: 4px; margin: 0; padding-left: 18px; }

/* Dialogs: the confirmation, Show me in words, rolling back, not published yet. */
.publish-dialog { width: min(640px, 94vw); }
.publish-dialog .transfer-dialog-body { gap: 12px; font-size: 14px; }
.publish-dialog .transfer-dialog-body > p { margin: 0; }
.publish-confirm-lead { font-weight: 500; overflow-wrap: anywhere; }
.publish-confirm-list { display: grid; gap: 4px; margin: 0; padding-left: 18px; }
.publish-safety { padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-low); color: var(--secondary); }
.publish-show-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.publish-show-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; }
.publish-show-line .change-chip { margin: 0; }
.publish-show-table { width: 100%; margin-top: 6px; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.publish-show-table th, .publish-show-table td { padding: 6px 8px; border: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.publish-show-table thead th { background: var(--surface-low); color: var(--muted); font-weight: 500; }
.publish-show-table tbody th { color: var(--muted); font-weight: 400; }
.publish-rollback-version, .publish-rollback-run { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.publish-rollback-version h3, .publish-rollback-run h3 { margin: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.publish-cannot-roll { padding: 8px 12px; border: 1px solid var(--warning-line); border-radius: var(--radius); background: var(--warning-soft); }
.publish-cannot-roll ul, .publish-rollback-notes { margin: 0; padding-left: 18px; }
.publish-blocked { color: var(--warning-ink); font-weight: 500; }
.publish-unpublished-group h3 { margin: 0 0 6px; font-size: 14px; }
.publish-unpublished-group ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.publish-unpublished-group .change-chip { margin-left: 8px; }
.publish-unpublished-sentence { margin: 2px 0 0; color: var(--secondary); font-size: 13px; }
.publish-unpublished-note { margin-top: 12px; font-size: 13px; }

/* Live's versions: one row each, opening to what it changed (Activepieces' version list). */
.version-list { margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); list-style: none; background: var(--surface); }
.version-row + .version-row { border-top: 1px solid var(--line); }
.version-head { display: grid; grid-template-columns: 32px minmax(0, 1fr) 16px; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 0; border-radius: 0; background: transparent; text-align: left; }
.version-row:first-child .version-head { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.version-head:hover { background: var(--surface-low); }
.version-head .publish-avatar { width: 32px; height: 32px; }
.version-head > .icon { width: 16px; height: 16px; color: var(--muted); }
.version-head[aria-expanded="true"] > .icon { transform: rotate(180deg); }
.version-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.version-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.version-number { font-size: 14px; font-weight: 600; }
.version-name { color: var(--ink); font-size: 14px; overflow-wrap: anywhere; }
.version-meta { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.version-kind { color: var(--muted); font-size: 12px; }
.version-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-low); color: var(--muted); font-size: 12px; font-weight: 500; white-space: nowrap; }
.version-badge.is-live { border-color: var(--success-line); background: var(--success-soft); color: var(--success-ink); }
.version-badge.is-warning { border-color: var(--warning-line); background: var(--warning-soft); color: var(--warning-ink); }
.version-badge.is-accent { border-color: transparent; background: var(--accent-soft); color: var(--accent); }
.version-body { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 16px 60px; font-size: 14px; }
.version-body[hidden] { display: none; }
.version-notes { margin: 0; color: var(--secondary); white-space: pre-wrap; overflow-wrap: anywhere; }
.version-result { margin: 0; color: var(--secondary); overflow-wrap: anywhere; }
.version-sets { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.version-set { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.version-set-title { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.version-set > .version-badge { align-self: flex-start; }
.version-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.version-show .icon, .version-publish .icon { width: 15px; height: 15px; }

@media (max-width: 1100px) {
  .publish-layout { grid-template-columns: minmax(0, 1fr); }
  .publish-aside { position: static; }
}
@media (max-width: 760px) {
  .publish-checks, .publish-thing, .publish-box, .publish-aside { padding: 12px; }
  .publish-thing-head { align-items: flex-start; gap: 8px; }
  .publish-thing-pick { margin-top: 4px; }
  .publish-show-button { padding: 0 8px; }
  .publish-conflict-options { grid-template-columns: minmax(0, 1fr); }
  .draft-section { padding: 10px 12px; }
  .draft-could-not-row { flex-wrap: wrap; }
  .publish-thing-head:has(.draft-carry-leave) { flex-wrap: wrap; }
  .publish-request { flex-wrap: wrap; }
  .publish-request-actions { width: 100%; padding-left: 38px; }
  .version-head { grid-template-columns: 28px minmax(0, 1fr) 16px; gap: 10px; padding: 12px; }
  .version-head .publish-avatar { width: 28px; height: 28px; }
  .version-body { padding: 0 12px 14px; }
  .publish-step { grid-template-columns: 24px minmax(0, 1fr); }
  .publish-step-state { grid-column: 2; }
}