@import url("./lib/base/r008-panel-navigation.css");

.workflow-page .page-shell {
  max-width: 1240px;
}

.workflow-page .wf-shell__center {
  background: var(--canvas);
}

.workflow-page button,
.workflow-page input,
.workflow-page select,
.workflow-page textarea {
  font: inherit;
}

.workflow-page svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.workflow-page .button svg,
.workflow-page .icon-button svg {
  height: 16px;
  width: 16px;
}

.workflow-summary-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
}

.workflow-directory-tools {
  align-items: end;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(240px, 1fr) minmax(170px, 0.3fr);
  margin-bottom: 18px;
  padding: 16px;
}

.workflow-directory-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workflow-directory-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 18px;
}

.workflow-directory-card[hidden],
.workflow-directory-empty[hidden] {
  display: none;
}

.workflow-card-heading,
.workflow-card-footer,
.workflow-stat-row,
.workflow-dialog-header,
.workflow-toolbar-title,
.workflow-toolbar-actions,
.stage-heading,
.kanban-card-heading,
.kanban-card-footer,
.drawer-header,
.drawer-person,
.drawer-section-heading,
.designer-stage-heading,
.designer-stage-actions,
.designer-footer {
  align-items: center;
  display: flex;
}

.workflow-card-heading,
.workflow-dialog-header,
.workflow-toolbar-title,
.stage-heading,
.drawer-header,
.drawer-section-heading,
.designer-stage-heading,
.designer-footer {
  justify-content: space-between;
}

.workflow-card-heading > div,
.workflow-toolbar-title > div,
.drawer-person > div,
.kanban-card-person {
  min-width: 0;
}

.workflow-directory-card h2,
.workflow-directory-card p,
.stage-column h2,
.kanban-card p,
.drawer-panel h2,
.drawer-panel h3,
.workflow-designer-card h2 {
  margin: 0;
}

.workflow-directory-card h2 {
  font-size: 17px;
  margin-bottom: 4px;
}

.workflow-directory-card p {
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.5;
}

.workflow-type-mark {
  align-items: center;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink-muted);
  display: inline-flex;
  flex: 0 0 auto;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.workflow-type-mark svg {
  height: 19px;
  width: 19px;
}

.workflow-card-title-wrap {
  align-items: center;
  display: flex;
  gap: 11px;
  min-width: 0;
}

.workflow-stat-row {
  border-block: 1px solid var(--line);
  gap: 0;
  justify-content: space-between;
  padding: 13px 0;
}

.workflow-stat {
  display: grid;
  gap: 3px;
}

.workflow-stat + .workflow-stat {
  border-left: 1px solid var(--line);
  padding-left: 20px;
}

.workflow-stat span,
.workflow-card-meta,
.stage-subtitle,
.kanban-card-role,
.kanban-card-owner,
.drawer-kicker,
.drawer-field dt,
.timeline-time,
.check-option small {
  color: var(--ink-muted);
  font-size: 10px;
}

.workflow-stat strong {
  font-size: 15px;
}

.workflow-card-footer {
  gap: 8px;
  justify-content: flex-end;
}

.workflow-card-footer .button {
  min-width: 92px;
}

.workflow-directory-empty,
.stage-empty,
.designer-empty {
  background: var(--paper);
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  color: var(--ink-muted);
  font-size: 12px;
  padding: 28px;
  text-align: center;
}

.workflow-directory-empty {
  grid-column: 1 / -1;
}

dialog.workflow-dialog {
  background: transparent;
  border: 0;
  color: var(--ink);
  margin: auto;
  max-height: calc(100dvh - 40px);
  max-width: min(520px, calc(100vw - 32px));
  padding: 0;
  width: 100%;
}

dialog.workflow-dialog::backdrop {
  background: rgba(49, 56, 62, 0.34);
}

.workflow-dialog-card {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.workflow-dialog-header {
  border-bottom: 1px solid var(--line);
  padding: 18px 20px;
}

.workflow-dialog-header h2 {
  font-size: 18px;
  margin: 0;
}

.workflow-dialog-body {
  display: grid;
  gap: 15px;
  padding: 20px;
}

.workflow-dialog-footer {
  border-top: 1px solid var(--line);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 14px 20px;
}

.workflow-dialog-error {
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  margin: -6px 0 0;
}

.workflow-dialog-error[hidden] {
  display: none;
}

.workflow-board-page .wf-shell__center {
  overflow: hidden;
}

.workflow-board-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.workflow-board-toolbar {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 12px;
  padding: 14px 18px;
}

.workflow-toolbar-top,
.workflow-toolbar-filters {
  align-items: end;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.workflow-toolbar-title {
  gap: 12px;
  justify-content: flex-start;
  min-width: 0;
}

.workflow-toolbar-title h1 {
  font-size: 20px;
  margin: 0 0 3px;
}

.workflow-toolbar-title p {
  color: var(--ink-muted);
  font-size: 11px;
  margin: 0;
}

.workflow-toolbar-actions {
  flex: 0 0 auto;
  gap: 8px;
}

.workflow-toolbar-filters {
  justify-content: flex-start;
}

.workflow-filter-search {
  min-width: 220px;
  width: min(360px, 42vw);
}

.workflow-filter-owner,
.workflow-filter-selector {
  width: 180px;
}

.workflow-filter-selector {
  margin-left: auto;
}

.workflow-board-viewport {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 16px 18px 28px;
}

.kanban-board {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  min-height: 100%;
  min-width: max-content;
}

.stage-column {
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  flex: 0 0 286px;
  flex-direction: column;
  max-height: 100%;
  min-height: 210px;
  overflow: hidden;
}

.stage-column.is-drop-target {
  border-color: var(--control);
  box-shadow: inset 0 0 0 1px var(--control);
}

.stage-column.is-terminal {
  background: var(--paper);
}

.stage-header {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 8px;
  padding: 12px 13px;
}

.stage-heading {
  gap: 8px;
}

.stage-heading h2 {
  font-size: 13px;
}

.stage-count {
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  font-size: 10px;
  font-weight: 750;
  justify-content: center;
  min-width: 24px;
  padding: 3px 7px;
}

.stage-meta {
  align-items: center;
  color: var(--ink-muted);
  display: flex;
  font-size: 10px;
  gap: 12px;
}

.stage-meta span {
  align-items: center;
  display: inline-flex;
  gap: 4px;
}

.stage-meta svg {
  height: 12px;
  width: 12px;
}

.stage-cards {
  display: grid;
  gap: 9px;
  overflow: auto;
  padding: 10px;
}

.stage-cards.is-drop-at-end::after {
  background: var(--control);
  border-radius: 999px;
  content: "";
  height: 3px;
  margin: 0 2px;
}

.kanban-card {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  display: grid;
  gap: 10px;
  padding: 11px;
  position: relative;
}

.kanban-card:hover,
.kanban-card:focus-visible,
.kanban-card.is-selected {
  border-color: var(--control);
  outline: none;
}

.kanban-card.is-dragging {
  opacity: 0.48;
}

.kanban-card.is-drop-before::before {
  background: var(--control);
  border-radius: 999px;
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  right: 0;
  top: -7px;
}

.kanban-card.is-hidden {
  display: none;
}

.kanban-card-heading {
  align-items: flex-start;
  gap: 9px;
}

.kanban-card-person {
  display: grid;
  flex: 1 1 auto;
  gap: 3px;
}

.kanban-card-name {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.person-avatar,
.owner-avatar {
  align-items: center;
  background: var(--paper-strong);
  border: 1px solid var(--line-strong);
  color: var(--ink-muted);
  display: inline-flex;
  flex: 0 0 auto;
  font-weight: 800;
  justify-content: center;
}

.person-avatar {
  border-radius: 8px;
  font-size: 10px;
  height: 34px;
  width: 34px;
}

.owner-avatar {
  border-radius: 50%;
  font-size: 8px;
  height: 22px;
  width: 22px;
}

.card-drag-handle {
  background: transparent;
  border: 0;
  color: var(--ink-faint);
  cursor: grab;
  padding: 1px;
}

.card-drag-handle:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--control);
  outline-offset: 2px;
}

.card-drag-handle svg {
  height: 15px;
  width: 15px;
}

.kanban-card-tags,
.drawer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.workflow-tag {
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-muted);
  font-size: 9px;
  font-weight: 750;
  padding: 3px 7px;
}

.kanban-card-progress {
  display: grid;
  gap: 5px;
}

.kanban-card-progress span {
  color: var(--ink-muted);
  font-size: 9px;
}

.progress-track {
  background: var(--paper-strong);
  border-radius: 999px;
  height: 4px;
  overflow: hidden;
}

.progress-value {
  background: var(--control);
  height: 100%;
}

.kanban-card-footer {
  color: var(--ink-muted);
  font-size: 9px;
  gap: 9px;
  justify-content: space-between;
}

.kanban-card-signals,
.kanban-card-owner {
  align-items: center;
  display: flex;
  gap: 7px;
}

.kanban-card-signals span,
.kanban-card-due {
  align-items: center;
  display: inline-flex;
  gap: 3px;
}

.kanban-card-signals svg,
.kanban-card-due svg {
  height: 12px;
  width: 12px;
}

.kanban-card-due.is-overdue,
.kanban-card-due.is-blocked {
  color: var(--ink);
  font-weight: 800;
}

.stage-empty {
  background: transparent;
  border-radius: 7px;
  padding: 22px 12px;
}

.workflow-drawer-layer {
  bottom: 0;
  left: var(--wf-left-offset);
  pointer-events: none;
  position: fixed;
  right: 0;
  top: var(--wf-header-height);
  z-index: 45;
}

.workflow-drawer-layer.is-open {
  pointer-events: auto;
}

.workflow-drawer-overlay {
  background: rgba(49, 56, 62, 0.18);
  border: 0;
  inset: 0;
  opacity: 0;
  position: absolute;
  transition: opacity 150ms ease;
  width: 100%;
}

.workflow-drawer-layer.is-open .workflow-drawer-overlay {
  opacity: 1;
}

.workflow-card-drawer {
  background: var(--paper);
  border-left: 1px solid var(--line-strong);
  bottom: 0;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateX(100%);
  transition: transform 170ms ease;
  width: min(450px, 100%);
}

.workflow-drawer-layer.is-open .workflow-card-drawer {
  transform: translateX(0);
}

.drawer-header {
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
}

.drawer-header strong {
  font-size: 12px;
}

.drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.drawer-summary {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.drawer-person {
  align-items: flex-start;
  gap: 12px;
}

.drawer-person .person-avatar {
  height: 46px;
  width: 46px;
}

.drawer-person h2 {
  font-size: 20px;
  margin-bottom: 4px;
}

.drawer-person a {
  color: var(--ink);
  font-size: 11px;
}

.drawer-meta-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.drawer-field {
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 7px;
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 10px;
}

.drawer-field dd {
  font-size: 11px;
  font-weight: 750;
  margin: 0;
}

.drawer-tabs {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0 12px;
}

.drawer-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
  padding: 12px 5px 10px;
}

.drawer-tab[aria-selected="true"] {
  border-bottom-color: var(--control);
  color: var(--ink);
}

.drawer-panel {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.drawer-panel[hidden] {
  display: none;
}

.drawer-section {
  display: grid;
  gap: 10px;
}

.drawer-section + .drawer-section {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.drawer-section-heading h3 {
  font-size: 12px;
}

.drawer-copy {
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.55;
  margin: 0;
}

.drawer-checklist,
.timeline-list,
.file-list {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.drawer-checklist li,
.file-row,
.timeline-item {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px;
}

.drawer-checklist label {
  align-items: flex-start;
  display: flex;
  font-size: 11px;
  gap: 8px;
}

.drawer-checklist input {
  margin-top: 1px;
}

.file-row {
  align-items: center;
  display: flex;
  font-size: 11px;
  gap: 8px;
}

.file-row svg {
  height: 15px;
  width: 15px;
}

.timeline-item {
  display: grid;
  font-size: 11px;
  gap: 4px;
}

.timeline-item.is-comment {
  background: var(--paper-soft);
}

.comment-form {
  display: grid;
  gap: 8px;
}

.comment-form textarea {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  min-height: 74px;
  padding: 9px 10px;
  resize: vertical;
  width: 100%;
}

.comment-form .button {
  justify-self: end;
}

.workflow-toast {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  bottom: 18px;
  box-shadow: var(--shadow-md);
  color: var(--ink);
  font-size: 11px;
  font-weight: 750;
  left: 50%;
  max-width: min(360px, calc(100vw - 32px));
  opacity: 0;
  padding: 11px 14px;
  pointer-events: none;
  position: fixed;
  transform: translate(-50%, 12px);
  transition: opacity 150ms ease, transform 150ms ease;
  z-index: 80;
}

.workflow-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.workflow-designer-page .page-shell {
  max-width: 1120px;
}

.workflow-designer-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
  padding: 18px;
}

.workflow-designer-card h2 {
  font-size: 15px;
  margin-bottom: 14px;
}

.workflow-identity-grid,
.designer-field-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workflow-identity-grid .form-field:first-child,
.workflow-identity-grid .form-field:nth-child(2) {
  grid-column: 1 / -1;
}

.workflow-designer-layout {
  display: grid;
  gap: 16px;
  grid-template-columns: 290px minmax(0, 1fr);
}

.workflow-designer-layout + .workflow-designer-card {
  margin-top: 16px;
}

.designer-stage-list,
.designer-stage-settings {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}

.designer-stage-heading {
  border-bottom: 1px solid var(--line);
  padding: 14px 15px;
}

.designer-stage-heading h2 {
  font-size: 14px;
  margin: 0;
}

.designer-stage-items {
  display: grid;
  gap: 7px;
  padding: 10px;
}

.designer-stage-item {
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 7px;
  display: flex;
  gap: 8px;
  padding: 8px;
}

.designer-stage-item.is-selected {
  background: var(--paper-soft);
  border-color: var(--control);
}

.designer-stage-select {
  background: transparent;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  flex: 1 1 auto;
  gap: 3px;
  min-width: 0;
  padding: 2px;
  text-align: left;
}

.designer-stage-select strong {
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.designer-stage-actions {
  flex: 0 0 auto;
  gap: 2px;
}

.designer-stage-actions .icon-button {
  height: 27px;
  width: 27px;
}

.designer-stage-settings-form {
  display: grid;
  gap: 18px;
  padding: 18px;
}

.designer-section {
  display: grid;
  gap: 12px;
}

.designer-section + .designer-section {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.designer-section h3 {
  font-size: 12px;
  margin: 0;
}

.designer-section-heading,
.designer-subsection-heading {
  display: grid;
  gap: 4px;
}

.designer-section-heading p,
.designer-subsection-heading p {
  color: var(--ink-muted);
  font-size: 10px;
  margin: 0;
}

.designer-label-row {
  align-items: center;
  display: flex;
  gap: 6px;
}

.designer-tooltip {
  display: inline-flex;
  position: relative;
}

.designer-tooltip-trigger {
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--ink-muted);
  cursor: help;
  display: inline-flex;
  font-size: 9px;
  font-weight: 800;
  height: 17px;
  justify-content: center;
  padding: 0;
  width: 17px;
}

.designer-tooltip-trigger:focus-visible {
  outline: 2px solid var(--control);
  outline-offset: 2px;
}

.designer-tooltip-content {
  background: var(--ink);
  border-radius: 6px;
  color: var(--paper);
  font-size: 10px;
  font-weight: 600;
  left: 0;
  line-height: 1.4;
  max-width: min(260px, calc(100vw - 40px));
  opacity: 0;
  padding: 8px 10px;
  pointer-events: none;
  position: absolute;
  top: calc(100% + 6px);
  transform: translateY(-2px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
  visibility: hidden;
  width: max-content;
  z-index: 30;
}

.designer-tooltip:hover .designer-tooltip-content,
.designer-tooltip:focus-within .designer-tooltip-content {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.designer-field-grid .form-field:nth-child(even) .designer-tooltip-content {
  left: auto;
  right: 0;
}

.designer-subsection-heading h4 {
  font-size: 11px;
  margin: 0;
}

.designer-checks {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.designer-required-form {
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 12px;
}

.designer-required-form[hidden] {
  display: none;
}

.check-option {
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 7px;
  display: flex;
  gap: 9px;
  padding: 10px;
}

.check-option input {
  margin-top: 2px;
}

.check-option span {
  display: grid;
  font-size: 11px;
  gap: 3px;
}

.checklist-editor {
  display: grid;
  gap: 7px;
}

.checklist-editor-row {
  align-items: center;
  display: flex;
  gap: 7px;
}

.checklist-editor-row input {
  flex: 1 1 auto;
}

.designer-footer {
  border-top: 1px solid var(--line);
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
}

.designer-footer > span {
  color: var(--ink-muted);
  font-size: 10px;
}

.designer-footer-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.workflow-start-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workflow-start-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  display: grid;
  gap: 8px;
  padding: 18px;
  text-decoration: none;
}

.workflow-start-card:hover {
  border-color: var(--line-strong);
}

.workflow-start-card span {
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.workflow-start-card strong {
  font-size: 14px;
}

.workflow-start-card p {
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.5;
  margin: 0;
}

/* START: Workflow automations */
.automation-list-page .page-shell,
.automation-builder-page .page-shell {
  max-width: 1180px;
}

.workflow-breadcrumb {
  align-items: center;
  color: var(--ink-muted);
  display: flex;
  font-size: 11px;
  gap: 5px;
  margin-bottom: 14px;
}

.workflow-breadcrumb a {
  color: var(--ink);
  font-weight: 750;
}

.workflow-breadcrumb svg {
  height: 13px;
  width: 13px;
}

.automation-summary-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 18px;
}

.automation-summary-grid .summary-card {
  align-content: start;
  gap: 5px;
}

.automation-summary-grid small {
  color: var(--ink-muted);
  font-size: 10px;
}

.automation-directory,
.automation-identity-card,
.automation-readable-rule,
.automation-step-card,
.automation-preview {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
}

.automation-directory-heading,
.automation-identity-heading,
.automation-preview-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.automation-directory-heading {
  padding: 17px 18px 0;
}

.automation-directory-heading h2,
.automation-identity-heading h2,
.automation-readable-rule h2,
.automation-preview-heading h2 {
  font-size: 15px;
  margin: 0;
}

.automation-directory-heading p,
.automation-identity-heading p,
.workflow-dialog-header p {
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.45;
  margin: 4px 0 0;
}

.automation-directory-tools {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(240px, 1fr) minmax(170px, 0.25fr);
  padding: 16px 18px;
}

.automation-table-wrap {
  border-top: 1px solid var(--line);
}

.automation-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

.automation-table th {
  background: var(--paper-soft);
  color: var(--ink-muted);
  font-size: 9px;
  letter-spacing: 0.07em;
  padding: 10px 13px;
  text-align: left;
  text-transform: uppercase;
}

.automation-table th:first-child {
  width: 30%;
}

.automation-table th:nth-child(2) {
  width: 18%;
}

.automation-table th:nth-child(3) {
  width: 9%;
}

.automation-table th:nth-child(4) {
  width: 17%;
}

.automation-table th:nth-child(5) {
  width: 16%;
}

.automation-table th:last-child {
  width: 10%;
}

.automation-table td {
  border-top: 1px solid var(--line);
  font-size: 11px;
  padding: 13px;
  vertical-align: middle;
}

.automation-table tbody tr:first-child td {
  border-top: 0;
}

.automation-rule-link {
  color: var(--ink);
  display: inline-block;
  font-size: 12px;
  font-weight: 780;
  margin-bottom: 4px;
}

.automation-rule-summary,
.automation-table-meta {
  color: var(--ink-muted);
  display: block;
  font-size: 10px;
  line-height: 1.4;
}

.automation-status-switch {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  font-size: 10px;
  font-weight: 750;
  gap: 7px;
  min-height: 24px;
  padding: 3px 0 3px 40px;
  position: relative;
}

.automation-status-switch::before {
  background: var(--paper-soft);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  content: "";
  height: 18px;
  left: 0;
  position: absolute;
  top: 3px;
  transition: background 120ms ease;
  width: 32px;
}

.automation-status-switch::after {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  content: "";
  height: 12px;
  left: 3px;
  position: absolute;
  top: 6px;
  transition: transform 120ms ease;
  width: 12px;
}

.automation-status-switch[aria-checked="true"]::before {
  background: var(--control);
}

.automation-status-switch[aria-checked="true"]::after {
  transform: translateX(14px);
}

.automation-empty {
  color: var(--ink-muted);
  font-size: 12px;
  padding: 34px 18px;
  text-align: center;
}

.automation-runs-dialog .workflow-dialog-card {
  width: min(760px, calc(100vw - 32px));
}

.automation-run-list {
  display: grid;
  gap: 9px;
}

.automation-run-item {
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 12px;
}

.automation-run-item h3,
.automation-run-item p {
  margin: 0;
}

.automation-run-item h3 {
  font-size: 11px;
}

.automation-run-item p,
.automation-run-item time {
  color: var(--ink-muted);
  font-size: 10px;
  line-height: 1.45;
}

.automation-run-status {
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  display: inline-flex;
  font-size: 9px;
  font-weight: 800;
  min-height: 22px;
  padding: 0 8px;
}

.automation-run-status.failed {
  border-style: double;
  border-width: 3px;
}

.automation-run-status.skipped {
  color: var(--ink-muted);
}

.automation-identity-card {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
  padding: 18px;
}

.automation-status-control {
  align-items: center;
  display: flex;
  font-size: 11px;
  font-weight: 750;
  gap: 8px;
}

.automation-status-control select {
  min-height: 34px;
  padding-block: 6px;
  width: 120px;
}

.automation-readable-rule {
  align-items: start;
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  padding: 15px 18px;
}

.automation-readable-rule p {
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.55;
  margin: 5px 0 0;
}

.automation-rule-mark {
  align-items: center;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: inline-flex;
  flex: 0 0 auto;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.automation-rule-mark svg {
  height: 17px;
  width: 17px;
}

.automation-builder-layout {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) 300px;
}

.automation-builder-steps {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.automation-step-heading {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 11px;
  padding: 13px 15px;
}

.automation-step-heading > span {
  align-items: center;
  background: var(--paper-soft);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 800;
  height: 27px;
  justify-content: center;
  width: 27px;
}

.automation-step-heading h2,
.automation-step-heading p {
  margin: 0;
}

.automation-step-heading h2 {
  font-size: 13px;
}

.automation-step-heading p {
  color: var(--ink-muted);
  font-size: 10px;
  margin-top: 3px;
}

.automation-step-body {
  display: grid;
  gap: 12px;
  padding: 15px;
}

.automation-condition-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.automation-condition-toolbar > span {
  font-size: 11px;
  font-weight: 750;
}

.automation-condition-toolbar select {
  min-height: 34px;
  padding-block: 6px;
  width: 190px;
}

.automation-condition-toolbar .button {
  margin-left: auto;
}

.automation-condition-list,
.automation-action-list,
.automation-setting-list {
  display: grid;
  gap: 8px;
}

.automation-condition-row {
  align-items: end;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 0.9fr 1fr auto;
  padding: 10px;
}

.automation-condition-row .form-field {
  gap: 5px;
}

.automation-condition-row label {
  font-size: 9px;
}

.automation-condition-row input,
.automation-condition-row select {
  min-height: 34px;
  padding-block: 6px;
}

.automation-condition-row .icon-button {
  margin-bottom: 1px;
}

.automation-empty-copy {
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  color: var(--ink-muted);
  font-size: 11px;
  margin: 0;
  padding: 18px;
  text-align: center;
}

.automation-timing-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.automation-timing-grid > div:last-child {
  display: grid;
  gap: 8px;
}

.automation-timing-fields {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.automation-action-row {
  align-items: center;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 9px;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  padding: 10px;
}

.automation-action-order {
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: inline-flex;
  font-size: 9px;
  font-weight: 800;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.automation-action-content {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.automation-action-content strong {
  font-size: 11px;
}

.automation-action-content span {
  color: var(--ink-muted);
  font-size: 10px;
  line-height: 1.35;
}

.automation-action-row .card-drag-handle {
  cursor: grab;
}

.automation-action-controls {
  align-items: center;
  display: flex;
  gap: 2px;
}

.automation-action-controls .icon-button {
  height: 28px;
  width: 28px;
}

.automation-add-action {
  justify-self: start;
}

.automation-move-policy {
  align-items: center;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 10px;
  padding: 11px;
}

.automation-move-policy svg {
  flex: 0 0 auto;
  height: 18px;
  width: 18px;
}

.automation-move-policy div {
  display: grid;
  gap: 3px;
}

.automation-move-policy strong {
  font-size: 11px;
}

.automation-move-policy span {
  color: var(--ink-muted);
  font-size: 10px;
}

.automation-preview {
  display: grid;
  gap: 16px;
  padding: 16px;
  position: sticky;
  top: 14px;
}

.automation-preview-heading > div > span,
.automation-preview-section > span {
  color: var(--ink-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.automation-preview-heading h2 {
  font-size: 13px;
  margin-top: 4px;
}

.automation-preview-summary {
  color: var(--ink);
  font-size: 11px;
  line-height: 1.55;
  margin: 0;
}

.automation-preview-section {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 9px;
  padding-top: 13px;
}

.automation-sample-person {
  align-items: center;
  display: flex;
  gap: 9px;
}

.automation-sample-person > span {
  align-items: center;
  background: var(--paper-soft);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 800;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.automation-sample-person div {
  display: grid;
  gap: 2px;
}

.automation-sample-person strong {
  font-size: 11px;
}

.automation-sample-person small {
  color: var(--ink-muted);
  font-size: 9px;
}

.automation-match-status {
  align-items: center;
  display: flex;
  font-size: 10px;
  font-weight: 750;
  gap: 7px;
}

.automation-match-status svg {
  height: 15px;
  width: 15px;
}

.automation-preview-actions {
  display: grid;
  gap: 7px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.automation-preview-actions li {
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 10px;
  line-height: 1.4;
  padding: 9px 10px;
}

.automation-builder-footer {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 16px;
}

dialog.automation-action-dialog,
dialog.automation-test-dialog {
  max-width: min(620px, calc(100vw - 32px));
  overflow: hidden;
  width: min(620px, calc(100vw - 32px));
}

.automation-action-dialog .workflow-dialog-card,
.automation-test-dialog .workflow-dialog-card {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 40px);
  width: 100%;
}

.automation-action-dialog .workflow-dialog-body,
.automation-test-dialog .workflow-dialog-body {
  min-height: 0;
  overflow-y: auto;
}

.automation-action-config-grid {
  display: grid;
  gap: 11px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.automation-action-config-wide {
  grid-column: 1 / -1;
}

.automation-action-config-wide[hidden] {
  display: none;
}

.automation-search-select {
  position: relative;
}

.automation-search-select-control {
  position: relative;
}

.automation-search-select-control input {
  padding-right: 38px;
  width: 100%;
}

.automation-search-select-control input::-webkit-search-cancel-button {
  appearance: none;
}

.automation-search-select-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--ink-muted);
  cursor: pointer;
  display: flex;
  height: 32px;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
}

.automation-search-select-toggle svg {
  height: 15px;
  width: 15px;
}

.automation-search-select-control input[aria-expanded="true"] {
  border-color: var(--control);
  box-shadow: 0 0 0 2px rgba(95, 105, 113, 0.16);
}

.automation-search-select-popover {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(52, 60, 68, 0.18);
  display: none;
  margin: 0;
  max-height: 206px;
  overflow-y: auto;
  padding: 5px;
  position: fixed;
  z-index: 200;
}

.automation-search-select-popover:popover-open,
.automation-search-select-popover.is-open {
  display: grid;
}

.automation-search-select-option {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  padding: 10px 11px;
  text-align: left;
  width: 100%;
}

.automation-search-select-option:hover,
.automation-search-select-option[aria-selected="true"] {
  background: var(--paper-strong);
}

.automation-search-select-empty {
  color: var(--ink-muted);
  font-size: 10px;
  padding: 10px 11px;
}

.automation-test-ready,
.automation-test-success {
  display: grid;
  gap: 12px;
}

.automation-test-card {
  align-items: center;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 10px;
  padding: 12px;
}

.automation-test-card svg {
  height: 20px;
  width: 20px;
}

.automation-test-card div {
  display: grid;
  gap: 3px;
}

.automation-test-card strong {
  font-size: 11px;
}

.automation-test-card span {
  color: var(--ink-muted);
  font-size: 10px;
}

.automation-test-plan {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 22px;
}

.automation-test-plan li {
  font-size: 10px;
  line-height: 1.45;
}

.field-error {
  color: var(--ink);
  font-size: 10px;
  font-weight: 750;
  margin: 0;
}

.field-error[hidden] {
  display: none;
}

.designer-automation-preview {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding-top: 14px;
}

.designer-automation-preview > div {
  display: grid;
  gap: 3px;
}

.designer-automation-preview strong {
  font-size: 11px;
}

.designer-automation-preview span {
  color: var(--ink-muted);
  font-size: 10px;
}
/* END: Workflow automations */

/* START: Personnel tags and references */
.personnel-key-value-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

.personnel-key-value-group {
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
}

.personnel-key-value-heading {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.personnel-key-value-heading h3 {
  font-size: 12px;
  margin: 0 0 3px;
}

.personnel-key-value-heading p {
  color: var(--ink-muted);
  font-size: 10px;
  line-height: 1.4;
  margin: 0;
}

.personnel-tag-field {
  display: grid;
  gap: 10px;
}

.personnel-tag-list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 26px;
}

.personnel-tag-list:empty::before {
  color: var(--ink-muted);
  content: 'No tags added';
  font-size: 10px;
}

.personnel-tag-chip {
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  display: inline-flex;
  font-size: 10px;
  font-weight: 800;
  gap: 7px;
  padding: 5px 8px;
}

.personnel-tag-remove {
  background: transparent;
  border: 0;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
  padding: 0;
  text-decoration: underline;
}

.personnel-tag-entry {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.personnel-key-value-fieldset {
  margin: 0;
  min-width: 0;
  padding-top: 18px;
  position: relative;
}

.personnel-key-value-fieldset legend {
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
  padding: 0 5px;
}

.personnel-key-value-fieldset > .repeat-remove {
  position: absolute;
  right: 10px;
  top: 7px;
}
/* END: Personnel tags and references */

@media (max-width: 1020px) {
  .workflow-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workflow-directory-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 991.98px) {
  .workflow-drawer-layer {
    left: 0;
  }
}

@media (max-width: 900px) {
  .automation-builder-layout {
    grid-template-columns: 1fr;
  }

  .automation-preview {
    position: static;
  }

}

@media (max-width: 820px) {
  .workflow-toolbar-top,
  .workflow-toolbar-filters {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .workflow-toolbar-title,
  .workflow-toolbar-actions {
    width: 100%;
  }

  .workflow-toolbar-actions .button {
    flex: 1 1 auto;
    justify-content: center;
  }

  .workflow-filter-search,
  .workflow-filter-owner,
  .workflow-filter-selector {
    flex: 1 1 180px;
    margin-left: 0;
    width: auto;
  }

  .workflow-designer-layout {
    grid-template-columns: 1fr;
  }

  .designer-stage-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .automation-table thead {
    display: none;
  }

  .automation-table,
  .automation-table tbody,
  .automation-table tr,
  .automation-table td {
    display: block;
    width: 100%;
  }

  .automation-table tr {
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 11px 14px;
  }

  .automation-table tbody tr:first-child {
    border-top: 0;
  }

  .automation-table td,
  .automation-table tbody tr:first-child td {
    border: 0;
    padding: 7px 0;
  }

  .automation-table td:first-child {
    grid-column: 1 / -1;
  }

  .automation-table td::before {
    color: var(--ink-muted);
    content: attr(data-label);
    display: block;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-bottom: 3px;
    text-transform: uppercase;
  }
}

@media (max-width: 680px) {
  .workflow-summary-grid,
  .automation-summary-grid,
  .workflow-directory-tools,
  .automation-directory-tools,
  .workflow-identity-grid,
  .designer-field-grid,
  .designer-checks,
  .workflow-start-grid {
    grid-template-columns: 1fr;
  }

  .workflow-identity-grid .form-field:first-child,
  .workflow-identity-grid .form-field:nth-child(2) {
    grid-column: auto;
  }

  .workflow-directory-tools {
    align-items: stretch;
  }

  .workflow-card-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workflow-card-footer .button {
    justify-content: center;
    min-width: 0;
  }

  .workflow-board-toolbar {
    padding: 12px;
  }

  .workflow-board-viewport {
    padding: 12px 12px 24px;
  }

  .stage-column {
    flex-basis: 270px;
  }

  .workflow-card-drawer {
    border-left: 0;
    width: 100%;
  }

  .drawer-meta-grid,
  .designer-stage-items {
    grid-template-columns: 1fr;
  }

  .workflow-dialog-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workflow-dialog-footer .button-primary {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .designer-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .designer-footer-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-left: 0;
  }

  .automation-identity-heading,
  .designer-automation-preview,
  .personnel-key-value-heading {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .personnel-tag-entry {
    grid-template-columns: 1fr;
  }

  .automation-status-control {
    justify-content: space-between;
  }

  .automation-status-control select {
    width: 150px;
  }

  .automation-condition-toolbar {
    align-items: stretch;
    display: grid;
  }

  .automation-condition-toolbar select,
  .automation-condition-toolbar .button {
    margin-left: 0;
    width: 100%;
  }

  .automation-condition-row,
  .automation-timing-grid,
  .automation-timing-fields,
  .automation-action-config-grid {
    grid-template-columns: 1fr;
  }

  .automation-condition-row .icon-button {
    justify-self: end;
  }

  .automation-action-row {
    grid-template-columns: auto auto minmax(0, 1fr);
  }

  .automation-action-controls {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .automation-builder-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .workflow-card-drawer,
  .workflow-drawer-overlay,
  .workflow-toast {
    transition: none;
  }
}

/* START: Forms and Templates */

[hidden] {
  display: none !important;
}

.app-side-nav-divider {
  border-top: 1px solid var(--line);
  display: block;
  margin: 10px 4px 3px;
}

.app-side-nav-label {
  color: var(--ink-subtle);
  display: block;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.09em;
  padding: 4px 10px 2px;
}
.forms-page button,
.forms-page input,
.forms-page select,
.forms-page textarea,
.templates-page button,
.templates-page input,
.templates-page select,
.templates-page textarea {
  font: inherit;
}

.forms-page svg,
.templates-page svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.forms-page .button svg,
.forms-page .icon-button svg,
.templates-page .button svg,
.templates-page .icon-button svg {
  height: 16px;
  width: 16px;
}

.forms-directory-tools {
  grid-template-columns: minmax(240px, 1fr) minmax(150px, 0.25fr) minmax(150px, 0.25fr);
}

.directory-primary-link {
  color: var(--ink);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.table-action-group {
  align-items: center;
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

.table-action-group a,
.table-action-group button {
  background: transparent;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  font-weight: 700;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.table-action-group .table-icon-action {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  display: inline-flex;
  height: 28px;
  justify-content: center;
  position: relative;
  text-decoration: none;
  width: 28px;
}

.table-action-group .table-icon-action:hover,
.table-action-group .table-icon-action:focus-visible {
  background: var(--paper-soft);
  border-color: var(--line);
}

.table-action-group .table-icon-action svg {
  height: 15px;
  width: 15px;
}

.table-action-group .table-icon-action::after {
  background: var(--ink);
  border-radius: 4px;
  bottom: calc(100% + 6px);
  color: var(--paper);
  content: attr(data-tooltip);
  font-size: 8px;
  font-weight: 800;
  opacity: 0;
  padding: 5px 7px;
  pointer-events: none;
  position: absolute;
  right: 0;
  transform: translateY(2px);
  transition: opacity 120ms ease, transform 120ms ease;
  visibility: hidden;
  white-space: nowrap;
  z-index: 80;
}

.table-action-group .table-icon-action:hover::after,
.table-action-group .table-icon-action:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.form-share-dialog .workflow-dialog-header p,
.form-share-dialog .form-field small {
  color: var(--ink-muted);
  font-size: 10px;
  line-height: 1.45;
  margin: 5px 0 0;
}

.form-share-link-row {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.form-share-link-row input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  min-width: 0;
}

.form-save-state {
  color: var(--ink-muted);
  display: block;
  font-size: 10px;
  font-weight: 500;
  margin-top: 2px;
}

.form-header-actions {
  align-items: center;
  display: flex;
  gap: 8px;
  padding-right: 16px;
}

.form-builder-header {
  z-index: 40;
}

.form-builder-main {
  background: var(--canvas);
  overflow: auto;
}

.form-builder-topbar {
  align-items: center;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  min-height: 52px;
  padding: 0 22px;
  position: sticky;
  top: 0;
  z-index: 25;
}

.back-link {
  align-items: center;
  color: var(--ink);
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  gap: 4px;
  text-decoration: none;
}

.back-link svg {
  height: 16px;
  width: 16px;
}

.form-tabs {
  align-items: center;
  display: flex;
  gap: 4px;
}

.form-tabs a,
.form-tabs button {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  padding: 8px 12px;
  text-decoration: none;
}

.form-tabs a.active,
.form-tabs a:hover,
.form-tabs button:hover {
  background: var(--paper-soft);
  color: var(--ink);
}

.form-meta-card {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 16px 22px;
}

.form-meta-grid {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(240px, 1fr) 170px;
  margin: 0 auto;
  max-width: 1040px;
}

.form-meta-grid .form-field-wide {
  grid-column: 1;
}

.form-inline-check {
  align-items: center;
  color: var(--ink);
  display: flex;
  font-size: 11px;
  font-weight: 700;
  gap: 8px;
  min-height: 40px;
}

.form-inline-check input {
  height: 16px;
  width: 16px;
}

.form-builder-workspace {
  display: grid;
  grid-template-columns: 220px minmax(420px, 1fr) 290px;
  margin: 0 auto;
  max-width: 1420px;
  min-height: calc(100vh - 220px);
}

.form-outline,
.question-properties {
  background: var(--paper);
  min-width: 0;
  padding: 18px;
}

.form-question-canvas {
  min-width: 0;
}

.form-outline {
  border-right: 1px solid var(--line);
}

.question-properties {
  border-left: 1px solid var(--line);
}

.form-panel-heading {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
}

.form-panel-heading span,
.form-canvas-heading span,
.template-content-card header span,
.template-variable-card header span,
.template-preview-panel header span,
.response-answers-card header span,
.response-review-panel .content-card > span {
  color: var(--ink-muted);
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.form-panel-heading strong {
  display: block;
  font-size: 13px;
  margin-top: 2px;
}

.form-outline-list {
  display: grid;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.form-outline-list button {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--ink-muted);
  cursor: pointer;
  display: grid;
  font-size: 10px;
  font-weight: 700;
  gap: 8px;
  grid-template-columns: 22px minmax(0, 1fr);
  padding: 7px;
  text-align: left;
  width: 100%;
}

.form-outline-list button span:first-child {
  align-items: center;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex;
  height: 22px;
  justify-content: center;
}

.form-outline-list button span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.form-outline-list button.active,
.form-outline-list button:hover {
  background: var(--paper-soft);
  border-color: var(--line-strong);
  color: var(--ink);
}

.form-add-question {
  justify-content: center;
  margin-top: 14px;
  width: 100%;
}

.form-question-canvas {
  background: var(--canvas);
  padding: 22px clamp(16px, 3vw, 40px) 40px;
}

.form-canvas-heading {
  align-items: end;
  display: flex;
  justify-content: space-between;
  margin: 0 auto 16px;
  max-width: 700px;
}

.form-canvas-heading h1 {
  font-size: 20px;
  margin: 3px 0 0;
}

.form-canvas-heading p {
  color: var(--ink-muted);
  font-size: 10px;
  margin: 0;
}

.question-list {
  display: grid;
  gap: 10px;
  margin: 0 auto;
  max-width: 700px;
}

.question-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  min-width: 0;
  padding: 12px;
}

.question-card.selected {
  border-color: var(--ink-muted);
  box-shadow: 0 0 0 2px rgba(98, 109, 118, 0.12);
}

.question-card:focus-visible {
  outline: 2px solid var(--ink-muted);
  outline-offset: 2px;
}

.question-drag-handle {
  color: var(--ink-subtle);
  cursor: grab;
  padding-top: 2px;
}

.question-drag-handle svg {
  height: 18px;
  width: 18px;
}

.question-card-main header {
  align-items: flex-start;
  display: flex;
  gap: 9px;
}

.question-card-main h2,
.question-card-main p {
  margin: 0;
}

.question-card-main h2 {
  font-size: 13px;
  line-height: 1.4;
}

.question-card-main h2 em {
  color: var(--ink-muted);
  font-style: normal;
}

.question-card-main p {
  color: var(--ink-muted);
  font-size: 9px;
  margin-top: 2px;
}

.question-number {
  align-items: center;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex;
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 800;
  height: 22px;
  justify-content: center;
  width: 22px;
}

.question-answer-preview {
  align-items: center;
  border-bottom: 1px solid var(--line-strong);
  color: var(--ink-subtle);
  display: flex;
  font-size: 10px;
  justify-content: space-between;
  margin: 14px 0 2px 31px;
  min-height: 28px;
  width: min(360px, calc(100% - 31px));
}

.question-answer-preview.multiline {
  min-height: 48px;
}

.question-choice-preview {
  display: grid;
  gap: 7px;
  margin: 13px 0 2px 31px;
}

.question-choice-preview span {
  align-items: center;
  color: var(--ink-muted);
  display: flex;
  font-size: 10px;
  gap: 7px;
}

.question-choice-preview i {
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  height: 13px;
  width: 13px;
}

.question-card-actions {
  align-items: flex-start;
  display: flex;
  gap: 4px;
}

.question-card-actions button,
.template-editor-toolbar button {
  align-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--ink-muted);
  cursor: pointer;
  display: flex;
  font-size: 9px;
  height: 28px;
  justify-content: center;
  padding: 0 7px;
}

.question-card-actions button:disabled {
  cursor: default;
  opacity: 0.35;
}

.question-card-actions svg {
  height: 13px;
  width: 13px;
}

.question-add-card {
  align-items: center;
  background: transparent;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  color: var(--ink-muted);
  cursor: pointer;
  display: flex;
  font-size: 11px;
  font-weight: 800;
  gap: 7px;
  justify-content: center;
  margin: 12px auto 0;
  max-width: 700px;
  min-height: 50px;
  width: 100%;
}

.question-add-card svg {
  height: 16px;
  width: 16px;
}

.question-properties form {
  display: grid;
  gap: 13px;
}

.question-properties small,
.respondent-question small {
  color: var(--ink-muted);
  font-size: 9px;
}

.question-property-actions {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 7px;
  grid-template-columns: 1fr 1fr;
  padding-top: 14px;
}

.button-danger {
  background: var(--paper);
  border-color: var(--line-strong);
  color: var(--ink-muted);
}

.preview-toolbar {
  align-items: center;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 4px;
  justify-content: center;
  padding: 10px;
  position: sticky;
  top: 52px;
  z-index: 20;
}

.preview-toolbar span {
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 800;
  margin-right: 7px;
}

.preview-toolbar button {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  padding: 6px 10px;
}

.preview-toolbar button.active {
  background: var(--paper-soft);
  border-color: var(--line);
  color: var(--ink);
}

.respondent-preview {
  margin: 0 auto;
  max-width: 820px;
  padding: 28px 24px 60px;
  transition: max-width 160ms ease;
}

.respondent-preview.mobile {
  max-width: 440px;
}

.respondent-sheet {
  display: grid;
  gap: 12px;
}

.respondent-form-header,
.respondent-question {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: var(--shadow-sm);
  padding: 20px;
}

.respondent-form-header {
  border-top: 5px solid var(--ink-muted);
}

.respondent-form-header h1 {
  font-size: 24px;
  margin: 12px 0 6px;
}

.respondent-form-header p {
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.55;
  margin: 0 0 13px;
}

.respondent-form-header > small {
  color: var(--ink-muted);
  font-size: 9px;
}

.form-status-chip {
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-muted);
  display: inline-flex;
  font-size: 8px;
  font-weight: 800;
  padding: 4px 7px;
  text-transform: uppercase;
}

.respondent-question > label,
.respondent-question legend {
  color: var(--ink);
  display: block;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 10px;
}

.respondent-question fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.respondent-question input[type="text"],
.respondent-question input[type="date"],
.respondent-question input[type="url"],
.respondent-question input[type="file"],
.respondent-question select,
.respondent-question textarea {
  max-width: 100%;
  width: 100%;
}

.choice-row {
  align-items: center;
  color: var(--ink);
  display: flex;
  font-size: 11px;
  gap: 8px;
  padding: 6px 0;
}

.respondent-form-footer {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  padding: 4px 0;
}

.form-submit-success {
  align-items: flex-start;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  display: flex;
  gap: 12px;
  padding: 16px;
}

.form-submit-success[hidden] {
  display: none;
}

.form-submit-success svg {
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  height: 28px;
  padding: 5px;
  width: 28px;
}

.form-submit-success p {
  color: var(--ink-muted);
  font-size: 11px;
  margin: 4px 0;
}

.form-submit-success a {
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
}

.form-assignment-layout,
.template-send-layout {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) 310px;
}

.form-stack,
.template-send-stack,
.template-editor-stack,
.response-answer-stack {
  display: grid;
  gap: 14px;
}

.form-section-card {
  padding: 20px;
}

.form-section-heading {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 13px;
}

.form-section-heading > div {
  align-items: center;
  display: flex;
  gap: 9px;
}

.form-section-heading > div > span {
  align-items: center;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex;
  font-size: 9px;
  font-weight: 800;
  height: 26px;
  justify-content: center;
  width: 26px;
}

.form-section-heading h2 {
  font-size: 15px;
  margin: 0;
}

.selected-form-summary {
  align-items: center;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 7px;
  display: flex;
  font-size: 10px;
  gap: 12px;
  margin-top: 12px;
  padding: 10px;
}

.selected-form-summary a {
  color: var(--ink);
  font-weight: 800;
  margin-left: auto;
}

.personnel-picker-results {
  border: 1px solid var(--line);
  border-radius: 7px;
  display: grid;
  margin-top: 6px;
  max-height: 180px;
  overflow: auto;
}

.personnel-picker-results button {
  align-items: center;
  background: var(--paper);
  border: 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  gap: 9px;
  padding: 9px;
  text-align: left;
}

.personnel-picker-results button:first-child {
  border-top: 0;
}

.personnel-picker-results button:hover {
  background: var(--paper-soft);
}

.personnel-picker-results button > span:last-child {
  display: grid;
  gap: 2px;
}

.personnel-picker-results small,
.selected-person-chip small {
  color: var(--ink-muted);
  font-size: 9px;
}

.selected-personnel {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.selected-person-chip {
  align-items: center;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 7px;
  display: flex;
  gap: 7px;
  padding: 6px;
}

.selected-person-chip > span:nth-child(2) {
  display: grid;
  gap: 1px;
}

.selected-person-chip button {
  background: transparent;
  border: 0;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 5px;
}

.selected-person-chip button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.assignment-preview-card,
.template-preview-panel,
.response-review-panel {
  position: sticky;
  top: 74px;
}

.assignment-preview-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 12px;
  padding: 18px;
}

.assignment-preview-card > span {
  color: var(--ink-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.assignment-preview-card h2 {
  font-size: 17px;
  margin: 0;
}

.assignment-preview-card dl,
.detail-list {
  margin: 0;
}

.assignment-preview-card dl > div,
.detail-list > div {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
  grid-template-columns: 90px minmax(0, 1fr);
  padding: 9px 0;
}

.assignment-preview-card dt,
.detail-list dt {
  color: var(--ink-muted);
  font-size: 9px;
  font-weight: 800;
}

.assignment-preview-card dd,
.detail-list dd {
  font-size: 10px;
  margin: 0;
}

.form-fill-header-person {
  align-items: center;
  display: flex;
  gap: 7px;
  padding-right: 18px;
}

.form-fill-header-person > span:last-child {
  display: grid;
  gap: 1px;
}

.form-fill-header-person small {
  color: var(--ink-muted);
  font-size: 8px;
}

.form-fill-surface {
  padding-top: 28px;
}

.form-progress {
  align-items: center;
  color: var(--ink-muted);
  display: grid;
  font-size: 9px;
  gap: 7px;
  grid-template-columns: 1fr auto;
  margin-top: 15px;
}

.form-progress > div {
  background: var(--paper-soft);
  border-radius: 999px;
  grid-column: 1 / -1;
  height: 5px;
  overflow: hidden;
}

.form-progress > div > span {
  background: var(--ink-muted);
  display: block;
  height: 100%;
  transition: width 160ms ease;
  width: 0;
}

.form-draft-status {
  color: var(--ink-muted);
  font-size: 9px;
  margin: 0;
}

.response-detail-layout {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) 300px;
}

.response-personnel-card,
.response-answers-card {
  padding: 18px;
}

.response-personnel-card {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.avatar-large {
  height: 44px;
  width: 44px;
}

.response-answers-card > header,
.template-content-card > header,
.template-variable-card > header,
.template-preview-panel > header {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
}

.response-answers-card h2,
.template-content-card h2,
.template-variable-card h2,
.template-preview-panel h2 {
  font-size: 15px;
  margin: 3px 0 0;
}

.response-answer-list {
  margin: 0;
}

.response-answer-list > div {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
  padding: 14px 0;
}

.response-answer-list > div:first-child {
  border-top: 0;
}

.response-answer-list dt {
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 800;
}

.response-answer-list dt span {
  background: var(--paper-soft);
  border-radius: 999px;
  font-size: 7px;
  margin-left: 5px;
  padding: 3px 5px;
  text-transform: uppercase;
}

.response-answer-list dd {
  font-size: 12px;
  line-height: 1.55;
  margin: 0;
}

.attachment-row {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  display: flex;
  gap: 9px;
  max-width: 360px;
  padding: 9px;
  text-decoration: none;
}

.attachment-row svg {
  height: 22px;
  width: 22px;
}

.attachment-row span {
  display: grid;
  gap: 2px;
}

.attachment-row small {
  color: var(--ink-muted);
  font-size: 9px;
}

.response-review-panel {
  display: grid;
  gap: 12px;
}

.response-review-panel .content-card {
  padding: 17px;
}

.response-review-panel h2 {
  font-size: 15px;
  margin: 4px 0 7px;
}

.response-review-panel p {
  color: var(--ink-muted);
  font-size: 10px;
  line-height: 1.5;
  margin: 0 0 12px;
}

.response-decision-actions {
  display: grid;
  gap: 7px;
  grid-template-columns: 1fr 1fr;
}

.response-history {
  display: grid;
  gap: 14px;
  list-style: none;
  margin: 13px 0 0;
  padding: 0 0 0 14px;
  position: relative;
}

.response-history::before {
  background: var(--line);
  content: "";
  inset: 4px auto 4px 3px;
  position: absolute;
  width: 1px;
}

.response-history li {
  display: grid;
  gap: 2px;
  position: relative;
}

.response-history li::before {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  content: "";
  height: 7px;
  left: -14px;
  position: absolute;
  top: 3px;
  width: 7px;
}

.response-history strong {
  font-size: 10px;
}

.response-history small {
  color: var(--ink-muted);
  font-size: 8px;
}

.template-editor-layout {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) 340px;
}

.template-settings-card,
.template-content-card,
.template-variable-card,
.template-preview-panel {
  padding: 18px;
}

.template-mode-tabs {
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 4px;
  margin-top: 15px;
}

.template-mode-tabs button {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  padding: 8px 12px;
}

.template-mode-tabs button.active {
  border-bottom-color: var(--ink-muted);
  color: var(--ink);
}

.template-editor-toolbar {
  align-items: center;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  display: flex;
  gap: 5px;
  margin-top: 12px;
  padding: 6px;
}

.template-editor-toolbar span {
  color: var(--ink-muted);
  font-size: 9px;
  margin-left: auto;
}

.template-editor-toolbar svg {
  height: 14px;
  width: 14px;
}

.template-body-editor {
  border-radius: 0 0 7px 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  line-height: 1.6;
  min-height: 220px;
  width: 100%;
}

.template-character-count {
  color: var(--ink-muted);
  font-size: 8px;
  margin-top: 6px;
  text-align: right;
}

.template-variable-card > p {
  color: var(--ink-muted);
  font-size: 10px;
  line-height: 1.5;
  margin: 0 0 12px;
}

.declared-variable-entry {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 12px;
}

.template-variable-list,
.template-sample-values,
.template-value-list {
  display: grid;
  gap: 7px;
}

.template-variable-item {
  align-items: center;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 7px;
  display: flex;
  justify-content: space-between;
  padding: 9px;
}

.template-variable-item code {
  color: var(--ink);
  display: block;
  font-size: 10px;
  font-weight: 800;
}

.template-variable-item small {
  color: var(--ink-muted);
  display: block;
  font-size: 8px;
  margin-top: 2px;
}

.template-preview-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: var(--shadow-sm);
}

.template-preview-panel header select {
  max-width: 140px;
}

.template-sample-values {
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
  padding-bottom: 14px;
}

.template-sample-values .form-field label {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.template-sample-values .form-field label span {
  font-size: 7px;
}

.template-preview-section-heading {
  margin: 0 0 10px;
}

.template-preview-section-heading span {
  color: var(--ink-muted);
  display: block;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.template-preview-section-heading h2 {
  font-size: 14px;
  margin: 3px 0 0;
}

.message-preview {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.message-preview-meta {
  border-bottom: 1px solid var(--line);
  display: grid;
  font-size: 9px;
  gap: 8px;
  grid-template-columns: 45px minmax(0, 1fr);
  padding: 8px 10px;
}

.message-preview-meta span {
  color: var(--ink-muted);
}

.message-preview-body {
  font-size: 10px;
  line-height: 1.65;
  min-height: 170px;
  padding: 13px;
  white-space: pre-wrap;
}

.message-preview-body p {
  margin: 0 0 10px;
}

.message-preview-body mark {
  background: var(--paper-soft);
  border: 1px dashed var(--line-strong);
  border-radius: 3px;
  color: var(--ink-muted);
  padding: 1px 3px;
}

.template-missing-warning {
  background: var(--paper-soft);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  color: var(--ink-muted);
  font-size: 9px;
  line-height: 1.4;
  margin-top: 10px;
  padding: 9px;
}

.template-value-row {
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 7px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(150px, 0.45fr) minmax(200px, 1fr);
  padding: 10px;
}

.template-value-row strong,
.template-value-row small {
  display: block;
}

.template-value-row strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
}

.template-value-row small {
  color: var(--ink-muted);
  font-size: 8px;
  margin-top: 3px;
}

.template-value-row.automatic {
  background: var(--paper-soft);
}

.template-send-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.template-send-preview {
  padding: 18px;
}

.personnel-form-assignment-list {
  display: grid;
  gap: 8px;
}

.personnel-form-assignment {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 10px;
  text-decoration: none;
}

.personnel-form-assignment:hover {
  background: var(--paper-soft);
}

.personnel-form-assignment > span:nth-child(2) {
  display: grid;
  gap: 3px;
}

.personnel-form-assignment small {
  color: var(--ink-muted);
  font-size: 9px;
}

.form-assignment-mark {
  align-items: center;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.form-assignment-mark svg {
  height: 17px;
  width: 17px;
}

.automation-template-mappings {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
  margin-top: 4px;
  padding-top: 12px;
}

.automation-template-mapping {
  align-items: end;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 7px;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(135px, 0.55fr) minmax(130px, 0.45fr) minmax(180px, 1fr);
  padding: 9px;
}

.automation-template-mapping code,
.automation-template-mapping small {
  display: block;
}

.automation-template-mapping code {
  font-size: 9px;
  font-weight: 800;
}

.automation-template-mapping small {
  color: var(--ink-muted);
  font-size: 8px;
  margin-top: 3px;
}

.reject-response-dialog {
  max-width: 480px;
}

@media (max-width: 1180px) {
  .form-builder-workspace {
    grid-template-columns: 180px minmax(390px, 1fr) 260px;
  }
}

@media (max-width: 980px) {
  .form-builder-workspace {
    grid-template-columns: 1fr;
  }

  .form-outline,
  .question-properties {
    border: 0;
    border-bottom: 1px solid var(--line);
  }

  .form-outline-list {
    display: flex;
    overflow: auto;
  }

  .form-outline-list li {
    flex: 0 0 170px;
  }

  .question-properties form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .question-property-actions {
    align-self: end;
  }
}

@media (max-width: 900px) {
  .form-assignment-layout,
  .response-detail-layout,
  .template-editor-layout,
  .template-send-layout {
    grid-template-columns: 1fr;
  }

  .assignment-preview-card,
  .response-review-panel,
  .template-preview-panel {
    position: static;
  }
}

@media (max-width: 760px) {
  .form-share-link-row {
    grid-template-columns: 1fr;
  }

  .form-share-link-row .button {
    justify-content: center;
  }

  .form-builder-topbar {
    align-items: flex-start;
    gap: 8px;
    min-height: 0;
    padding-block: 10px;
  }

  .form-tabs {
    max-width: 100%;
    overflow: auto;
  }

  .form-meta-grid,
  .forms-directory-tools,
  .question-properties form {
    grid-template-columns: 1fr;
  }

  .automation-template-mapping {
    grid-template-columns: 1fr;
  }

  .form-meta-grid .form-field-wide {
    grid-column: auto;
  }

  .form-header-actions .button-secondary:first-child {
    display: none;
  }

  .question-card {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .question-card-actions {
    grid-column: 2;
    justify-content: flex-end;
    margin-top: 9px;
  }

  .respondent-preview {
    padding: 16px 12px 42px;
  }

  .response-personnel-card,
  .template-value-row {
    align-items: stretch;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .form-header-actions {
    gap: 4px;
    padding-right: 8px;
  }

  .form-header-actions .button {
    min-width: 0;
    padding-inline: 8px;
  }

  .form-builder-topbar {
    display: grid;
  }

  .form-tabs a,
  .form-tabs button {
    padding: 7px 9px;
  }

  .question-card-actions button[data-question-duplicate] {
    display: none;
  }

  .respondent-form-header,
  .respondent-question {
    padding: 16px;
  }

  .declared-variable-entry,
  .response-decision-actions {
    grid-template-columns: 1fr;
  }
}
/* END: Forms and Templates */

/* START: Documents */
.documents-page .wf-shell__center {
  background: var(--canvas);
}

.documents-page button,
.documents-page input,
.documents-page select,
.documents-page textarea {
  font: inherit;
}

.documents-page svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.documents-page code {
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 11px;
  padding: 2px 5px;
}

.document-directory-tools {
  grid-template-columns: minmax(280px, 1fr) minmax(150px, 0.25fr) minmax(160px, 0.28fr);
}

.document-directory-table th:first-child {
  width: 52%;
}

.document-directory-table th:last-child,
.document-history-table th:last-child {
  width: 112px;
}

.document-directory-table .table-secondary,
.document-history-table .table-secondary {
  display: block;
  margin-top: 3px;
}

.table-icon-action.is-disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.status-badge.warning {
  border-style: dashed;
}

.document-editor-layout {
  display: block;
}

.document-generate-layout {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) 300px;
}

.document-editor-stack,
.document-generate-stack {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.document-section {
  padding: 20px;
}

.numbered-section-heading {
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 16px;
}

.numbered-section-heading > span:first-child {
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--ink-muted);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.numbered-section-heading > div {
  flex: 1;
  min-width: 0;
}

.numbered-section-heading h2,
.numbered-section-heading p {
  margin: 0;
}

.numbered-section-heading h2 {
  font-size: 17px;
  margin-bottom: 4px;
}

.numbered-section-heading p,
.document-source-note,
.document-readiness-panel p,
.document-readiness-panel > small,
.generation-output-panel p {
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.5;
}

.document-upload-card,
.generation-document-summary,
.generation-source-status,
.form-document-explainer {
  align-items: center;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 12px;
  margin-top: 16px;
  padding: 14px;
}

.document-file-mark {
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  display: inline-flex;
  flex: 0 0 auto;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.document-file-mark svg {
  height: 20px;
  width: 20px;
}

.document-upload-card > div:nth-child(2),
.generation-document-summary > div,
.form-document-explainer > div {
  display: grid;
  flex: 1;
  gap: 4px;
  min-width: 0;
}

.document-upload-card small,
.generation-document-summary small,
.linked-form-row small,
.generation-form-card small,
.form-document-card small {
  color: var(--ink-muted);
  font-size: 10px;
}

.document-upload-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
}

.document-source-note {
  margin: 9px 0 0;
}

.linked-form-list,
.generation-form-list,
.form-document-list {
  display: grid;
  gap: 10px;
}

.linked-form-row {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: 34px minmax(180px, 1fr) 210px 32px;
  padding: 12px;
}

.linked-form-row > div {
  display: grid;
  gap: 3px;
}

.linked-form-row label,
.generation-form-card label {
  display: grid;
  gap: 5px;
}

.linked-form-row label > span,
.generation-form-card label > span,
.document-mapping-row label > span {
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 700;
}

.mapping-source-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 12px;
}

.mapping-source-legend span {
  align-items: center;
  color: var(--ink-muted);
  display: inline-flex;
  font-size: 10px;
  gap: 6px;
}

.mapping-source-legend i {
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  display: inline-flex;
  font-size: 9px;
  font-style: normal;
  height: 22px;
  justify-content: center;
  width: 26px;
}

.document-mapping-list {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: visible;
}

.document-mapping-row {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(170px, 0.8fr) minmax(155px, 0.55fr) minmax(250px, 1fr) minmax(95px, 0.35fr);
  padding: 12px;
}

.document-mapping-row + .document-mapping-row {
  border-top: 1px solid var(--line);
}

.mapping-token {
  align-self: center;
  display: grid;
  gap: 5px;
}

.mapping-token code {
  justify-self: start;
}

.mapping-token small,
.mapping-preview {
  color: var(--ink-muted);
  font-size: 10px;
}

.document-mapping-row label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.mapping-preview {
  align-self: center;
  background: var(--paper-soft);
  border-radius: 4px;
  overflow: hidden;
  padding: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mapping-preview.muted {
  font-style: italic;
}

.document-search-select {
  display: flex;
  min-width: 0;
}

.document-search-select input {
  border-radius: 6px 0 0 6px;
  min-width: 0;
}

.document-search-select button {
  background: var(--paper-soft);
  border: 1px solid var(--line-strong);
  border-left: 0;
  border-radius: 0 6px 6px 0;
  color: var(--ink-muted);
  width: 36px;
}

.document-search-select-popover {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  color: var(--ink);
  margin: 0;
  max-height: 240px;
  overflow: auto;
  padding: 5px;
}

.document-search-select-popover button {
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: inherit;
  display: block;
  padding: 9px 10px;
  text-align: left;
  width: 100%;
}

.document-search-select-popover button:hover,
.document-search-select-popover button:focus-visible {
  background: var(--paper-soft);
  outline: 1px solid var(--line-strong);
}

.document-search-select-popover > span {
  color: var(--ink-muted);
  display: block;
  font-size: 11px;
  padding: 12px;
}

.mapping-show-all {
  margin-top: 12px;
}

.document-output-options {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 15px;
}

.document-readiness-panel,
.generation-output-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 12px;
  padding: 18px;
  position: sticky;
  top: 72px;
}

.document-readiness-panel h2,
.document-readiness-panel p,
.generation-output-panel h2,
.generation-output-panel p {
  margin: 0;
}

.document-readiness-panel h2,
.generation-output-panel h2 {
  font-size: 18px;
}

.panel-kicker {
  color: var(--ink-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.readiness-list {
  border-block: 1px solid var(--line);
  display: grid;
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.readiness-list li {
  align-items: center;
  display: flex;
  gap: 9px;
  padding: 8px 0;
}

.readiness-list li > span {
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: inline-flex;
  flex: 0 0 auto;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.readiness-list li > div {
  display: grid;
  gap: 2px;
}

.readiness-list small {
  color: var(--ink-muted);
  font-size: 9px;
}

.document-test-result {
  align-items: center;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 7px;
  display: flex;
  gap: 12px;
  padding: 12px;
}

.document-test-result > div {
  display: grid;
  gap: 4px;
}

.document-test-result small {
  color: var(--ink-muted);
  font-size: 10px;
}

.generation-source-status {
  margin-top: 12px;
}

.generation-source-status > span {
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: inline-flex;
  flex: 0 0 auto;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.generation-source-status > div {
  display: grid;
  flex: 1;
  gap: 3px;
}

.generation-source-status small {
  color: var(--ink-muted);
  font-size: 10px;
}

.generation-source-status a {
  font-size: 11px;
  font-weight: 700;
}

.generation-form-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.generation-form-card header,
.generation-form-card footer,
.form-document-card header,
.form-document-card footer {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.generation-form-card header > div {
  display: grid;
  gap: 3px;
}

.generation-form-card footer {
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 10px;
  padding-top: 10px;
}

.resolved-value-list {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  margin: 0;
  overflow: hidden;
}

.resolved-value-list > div {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(240px, 1fr) minmax(140px, 0.7fr);
  padding: 11px 12px;
}

.resolved-value-list > div + div {
  border-top: 1px solid var(--line);
}

.resolved-value-list dt {
  display: grid;
  font-size: 11px;
  font-weight: 700;
  gap: 3px;
}

.resolved-value-list dt small {
  color: var(--ink-muted);
  font-size: 9px;
  font-weight: 400;
}

.resolved-value-list dd {
  font-size: 12px;
  margin: 0;
}

.generation-document-summary {
  margin: 0;
}

.generation-output-panel .check-option {
  margin: 0;
}

.output-readiness {
  border-block: 1px solid var(--line);
  display: grid;
  margin: 0;
  padding: 8px 0;
}

.output-readiness > div {
  display: flex;
  font-size: 10px;
  justify-content: space-between;
  padding: 6px 0;
}

.output-readiness dt {
  color: var(--ink-muted);
}

.output-readiness dd {
  font-weight: 700;
  margin: 0;
}

.document-generation-success {
  align-items: flex-start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  gap: 18px;
  margin: 36px auto;
  max-width: 760px;
  padding: 26px;
}

.success-mark {
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 20px;
  height: 46px;
  justify-content: center;
  width: 46px;
}

.document-generation-success h1,
.document-generation-success p {
  margin: 0;
}

.document-generation-success p {
  color: var(--ink-muted);
  margin: 7px 0 18px;
}

.document-history-summary {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 16px;
}

.document-history-summary > div {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 9px;
  display: grid;
  gap: 7px;
  padding: 15px;
}

.document-history-summary span {
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 700;
}

.document-history-summary strong {
  font-size: 20px;
}

.document-history-tools {
  grid-template-columns: minmax(280px, 1fr) minmax(160px, 0.28fr);
}

.form-documents-shell {
  max-width: 1040px;
}

.form-document-explainer {
  background: var(--paper);
  margin: 0 0 16px;
}

.form-document-explainer p {
  color: var(--ink-muted);
  font-size: 11px;
  margin: 0;
}

.form-document-explainer > a {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
}

.form-document-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 14px;
  padding: 17px;
}

.document-card-title {
  align-items: center;
  display: flex;
  gap: 11px;
}

.document-type-badge {
  align-items: center;
  background: var(--paper-soft);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 800;
  height: 34px;
  justify-content: center;
  width: 44px;
}

.form-document-card h2,
.form-document-card p {
  margin: 0;
}

.form-document-card h2 {
  font-size: 15px;
}

.form-document-card p {
  color: var(--ink-muted);
  font-size: 10px;
  margin-top: 3px;
}

.form-document-card dl {
  border-block: 1px solid var(--line);
  display: grid;
  margin: 0;
}

.form-document-card dl > div {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 130px 1fr;
  padding: 10px 0;
}

.form-document-card dl > div + div {
  border-top: 1px solid var(--line);
}

.form-document-card dt {
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 700;
}

.form-document-card dd {
  font-size: 11px;
  margin: 0;
}

.form-document-card footer {
  justify-content: flex-start;
}

.form-document-card footer .row-link {
  margin-left: auto;
}

.document-link-option {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  display: flex;
  gap: 10px;
  padding: 11px;
}

.document-link-option span {
  display: grid;
  gap: 3px;
}

.document-link-option small {
  color: var(--ink-muted);
  font-size: 10px;
}

@media (max-width: 1100px) {
  .document-mapping-row {
    grid-template-columns: minmax(170px, 0.8fr) minmax(150px, 0.5fr) minmax(220px, 1fr);
  }

  .mapping-preview {
    display: none;
  }
}

@media (max-width: 980px) {
  .document-generate-layout {
    grid-template-columns: 1fr;
  }

  .generation-output-panel {
    position: static;
  }
}

@media (max-width: 820px) {
  .document-directory-tools,
  .document-history-tools {
    grid-template-columns: 1fr;
  }

  .document-upload-card,
  .form-document-explainer {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .document-upload-actions,
  .form-document-explainer > a {
    margin-left: 54px;
  }

  .linked-form-row {
    grid-template-columns: 34px minmax(0, 1fr) 32px;
  }

  .linked-form-row label {
    grid-column: 2;
  }

  .document-mapping-row {
    align-items: stretch;
    grid-template-columns: 1fr 1fr;
  }

  .mapping-token {
    grid-column: 1 / -1;
  }

  .document-output-options,
  .document-history-summary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .document-directory-table td:first-child,
  .document-history-table td:first-child {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 600px) {
  .document-section {
    padding: 15px;
  }

  .numbered-section-heading {
    flex-wrap: wrap;
  }

  .numbered-section-heading .button,
  .numbered-section-heading .count-badge {
    margin-left: 40px;
  }

  .document-upload-actions {
    display: grid;
    margin-left: 0;
    width: 100%;
  }

  .document-mapping-row {
    grid-template-columns: 1fr;
  }

  .mapping-token,
  .mapping-value-field {
    grid-column: auto;
  }

  .mapping-source-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .resolved-value-list > div,
  .form-document-card dl > div {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .form-document-card header,
  .form-document-card footer,
  .generation-form-card header,
  .generation-form-card footer {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .form-document-card footer .row-link {
    margin-left: 0;
  }
}
/* END: Documents */

/* START: r031 shared additions */
.app-side-footer > a {
  align-items: center;
  border-radius: 8px;
  color: var(--ink-muted);
  display: flex;
  font-size: 11px;
  font-weight: 750;
  gap: 8px;
  padding: 8px 10px;
  text-decoration: none;
}

.app-side-footer > a:hover {
  background: var(--paper-strong);
  color: var(--ink);
}

.app-side-footer > a svg {
  height: 15px;
  width: 15px;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.button.is-disabled,
.button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.45;
}
.app-side-footer .app-side-nav {
  padding-top: 4px;
}

/* END: r031 shared additions */