/* View layout and document content. Shared UI appearance lives in ui-system.css. */
@layer app-layout {
.comment-editor { border: 1px solid var(--muted); border-radius: 8px; overflow: hidden; background: var(--canvas); }
.comment-editor-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; padding: 5px; border-bottom: 1px solid var(--muted); background: var(--paper); }
.comment-editor-toolbar .tool-btn { min-width: 28px; height: 28px; padding: 1px; border-color: transparent; border-radius: 6px; background: transparent; color: #000; }
.comment-editor-toolbar .tool-btn.icon-glyph { width: 28px; font: 17px Arial, sans-serif; }
.comment-editor-toolbar .tool-btn.icon-only { width: 30px; }
.comment-editor-toolbar .tool-btn .icon { width: 22px; height: 22px; filter: none; }
.comment-editor-toolbar .tool-btn:hover { border-color: #ddd4ca; background: #f5f1ec; }
.comment-editor-toolbar .tool-btn[aria-pressed="true"] { border-color: #7fa596; background: #dcebe6; color: #000; }
.comment-editor-toolbar .tool-btn:focus-visible { outline: 2px solid #2d5b4e; outline-offset: 1px; }
.comment-editor-content { min-height: 100px; max-height: 320px; overflow: auto; padding: 10px; outline: none; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-editor:focus-within { border-color: var(--accent); }
.comment-editor-content p { margin: 0 0 0.45em; }
.comment-editor-error { color: var(--danger, #b42318); padding: 0 10px; font-size: 12px; }
.comment-editor-error:empty { display: none; }
.comment-row-body, .comment-entry-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-row-body p, .comment-entry-body p { margin: 0 0 0.45em; }
.comment-row-body p:empty, .comment-entry-body p:empty { min-height: 1em; }
.comment-row-body img, .comment-entry-body img, .comment-editor-content img { max-width: 100%; max-height: 280px; height: auto; object-fit: contain; border-radius: 6px; }
.comment-preview-entry { padding: 12px 0; border-bottom: 1px solid var(--muted); }
.comment-preview-entry:last-child { border-bottom: 0; padding-bottom: 0; }
.comment-metadata-chip.comment-assignee { border-color: var(--accent); }
.comment-metadata-link.linked-item { display: inline-flex; align-items: baseline; gap: 5px; max-width: 100%; }
.comment-metadata-link .comment-linked-item-label { text-decoration: underline; text-underline-offset: 2px; }
.comment-metadata-link .icon-link { width: 14px; height: 14px; flex-shrink: 0; vertical-align: middle; filter: none; }
.comment-editor-hint { font-size: 11px; color: var(--ink-soft); padding: 4px 10px; }
.workitem-hover-preview {
  position: fixed;
  z-index: 10000;
  width: min(420px, calc(100vw - 24px));
  max-height: min(520px, calc(100vh - 24px));
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--muted);
  border-radius: 12px;
  background: var(--canvas);
  color: var(--ink);
  box-shadow: 0 10px 32px var(--shadow);
  font: 14px/1.45 Calibri, "Segoe UI", Arial, sans-serif;
  overflow-wrap: anywhere;
}
.workitem-hover-preview[hidden] { display: none; }
.workitem-hover-preview-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.workitem-hover-preview-code { color: var(--accent); font-weight: 700; }
.workitem-hover-preview-status { border-radius: 12px; padding: 3px 9px; background: var(--paper); color: var(--ink-soft); font-size: 12px; }
.workitem-hover-preview-title { margin-top: 10px; font-size: 18px; font-weight: 700; line-height: 1.3; }
.workitem-hover-preview-label { margin: 16px 0 5px; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.workitem-hover-preview-description { white-space: pre-line; max-height: 180px; overflow: auto; }
.workitem-hover-preview-documents { display: grid; gap: 5px; max-height: 100px; overflow: auto; }
.workitem-hover-preview-document { border-left: 2px solid var(--muted); padding-left: 8px; }
.workitem-hover-preview-document { color: var(--accent); text-decoration: underline; }
.workitem-hover-preview-properties { margin-top: 16px; }
.workitem-hover-preview-properties summary { cursor: pointer; font-weight: 700; }
.workitem-hover-preview-properties dl { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(0, 2fr); gap: 8px 12px; }
.workitem-hover-preview-properties dt { color: var(--ink-soft); }
.workitem-hover-preview-properties dd { margin: 0; white-space: pre-line; }
.workitem-hover-preview-footer { border-top: 1px solid var(--muted); margin-top: 16px; padding-top: 10px; color: var(--ink-soft); font-size: 11px; }
.workitem-hover-preview-message { color: var(--ink-soft); }
@media print { .workitem-hover-preview { display: none !important; } }

:root {
  --ink: #1d1b1a;
  --ink-soft: #564f4b;
  --paper: #f8f3ee;
  --canvas: #ffffff;
  --accent: #d63b3b;
  --accent-2: #b12a2a;
  --muted: #d9d1c7;
  --sidebars: #fff7f7;
  --doc-header-accent: #d9d1c7;
  --doc-heading-color: #2a5db0;
  --doc-text-color: #1d1b1a;
  --doc-font-family: Calibri, "Segoe UI", Arial, sans-serif;
  --doc-default-font-size: 12pt;
  --doc-table-header-bg: #5b5b5b;
  --doc-table-header-text: #ffffff;
  --doc-table-th-bg: #c9c9c9;
  --doc-table-th-text: #1d1b1a;
  --doc-table-td-bg: transparent;
  --doc-table-border: #d6c8b8;
  --shadow: rgba(33, 29, 25, 0.15);
  --left-sidebar-width: 280px;
  --right-sidebar-width: 260px;
  --doc-sidebar-width: 312px;
  --workspace-main-min-width: 720px;
  --doc-main-min-width: 620px;
  --sidebar-min-width: 220px;
  --doc-sidebar-min-width: 220px;
  --workspace-grid-gap: 12px;
  --document-toolbar-base-height: 44px;
  --document-toolbar-height: var(--document-toolbar-base-height);
  --document-toolbar-layer: 10;
  --document-floating-panel-layer: 1400;
}

* {
  box-sizing: border-box;
  border-spacing: 0px;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: Calibri, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: radial-gradient(circle at top left, #f2e7da 0%, #efe9e1 40%, #e6dcd0 100%);
}

.app-body {
  overflow: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-body:not(.app-ready) .view {
  display: none !important;
}

/* Keep layout measurable while startup resolves the route and user preferences. */
.app-starting .app-shell {
  visibility: hidden;
}

.app-starting #viewLoadIndicator {
  visibility: visible;
  display: inline-flex !important;
}

button,
input,
select,
textarea {
  font-family: Calibri, "Segoe UI", Arial, sans-serif;
}

.has-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

/* Test Runs */
#testingView {
  min-width: 0;
  overflow: hidden;
}

.testing-root,
.testing-page {
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.testing-root {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.testing-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: auto;
}

.testing-overview {
  overflow: hidden;
}

.testing-detail {
  overflow: hidden;
}

.testing-page .work-filters input,
.testing-page .work-filters select {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #cfc2b2;
  border-radius: 10px;
  background: #fff;
}

.testing-page .work-filters select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, #7d6f61 50%),
    linear-gradient(135deg, #7d6f61 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-repeat: no-repeat;
  background-size: 6px 6px, 6px 6px;
}

.testing-overview > .work-table-wrapper {
  flex: 1 1 auto;
  max-height: 100%;
  scrollbar-gutter: auto;
}

.testing-header,
.testing-detail-header,
.testing-item-detail-header,
.testing-title-line,
.testing-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.testing-header,
.testing-detail-header,
.testing-item-detail-header {
  justify-content: space-between;
}

.panel-header.testing-header {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.testing-header h2,
.testing-detail-header h2,
.testing-item-detail-header h3 {
  margin: 0;
}

.testing-header p,
.testing-detail-header p,
.testing-item-detail-header p {
  margin: 3px 0 0;
  color: var(--ink-soft);
}

.testing-modal-body > label,
.testing-item-detail-content form > label {
  display: grid;
  gap: 4px;
  min-width: 150px;
}

.testing-table {
  width: 100%;
  min-width: 980px;
}

.testing-overview .testing-table {
  --work-table-actions-min-width: 48px;
}
.testing-overview .testing-table:not(.testing-table-nowrap) th[data-column-id] {
  white-space: normal;
  overflow-wrap: anywhere;
}
.testing-overview .testing-table-nowrap th[data-column-id],
.testing-table-nowrap .testing-source-link {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.testing-table-nowrap .testing-source-link {
  display: block;
  max-width: 100%;
}

.testing-execution-layout .testing-table {
  --work-table-actions-min-width: 0px;
}

.testing-execution-layout .testing-table .actions-col {
  width: 1%;
  white-space: nowrap;
}

.testing-execution-layout .testing-table .row-actions {
  width: max-content;
  min-width: 0;
}

.testing-table tr.selected td {
  background: transparent;
}

.testing-table tr.selected td:first-child {
  box-shadow: inset 3px 0 0 #817466;
}

.testing-run-row td {
  transition: background-color 120ms ease;
}

.testing-run-row[data-status="draft"] td:first-child {
  box-shadow: inset 4px 0 0 #9a856e;
}

.testing-run-row[data-status="in_progress"] td:first-child {
  box-shadow: inset 4px 0 0 #3c76a5;
}

.testing-run-row[data-status="finished"] td:first-child {
  box-shadow: inset 4px 0 0 #4c8b5d;
}

.testing-result-summary {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 5px;
}


.testing-result-summary {
  width: 100%;
  margin-top: 3px;
}

.testing-source-link {
  display: inline-grid;
  gap: 2px;
  max-width: 260px;
  color: #245ba3;
  line-height: 1.25;
}

.testing-source-title {
  overflow-wrap: anywhere;
  font-weight: 700;
}
.testing-source-title .doc-icon {
  margin-right: var(--ui-space-1);
  vertical-align: middle;
}

.testing-muted-value {
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.testing-source-inline-link {
  font-weight: 700;
}

.testing-link-button {
  appearance: none;
  border: 0;
  padding: 0;
  color: #245ba3;
  background: transparent;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.testing-link-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.testing-page [data-tooltip],
.test-run-report [data-tooltip] {
  position: relative;
}

.testing-page [data-tooltip]::after,
.test-run-report [data-tooltip]::after {
  position: absolute;
  z-index: 20;
  bottom: calc(100% + 6px);
  left: 50%;
  display: none;
  width: max-content;
  max-width: 260px;
  padding: 5px 7px;
  border-radius: 4px;
  color: #fff;
  background: #292625;
  content: attr(data-tooltip);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.25;
  pointer-events: none;
  transform: translateX(-50%);
  white-space: normal;
}

.testing-page [data-tooltip]:hover::after,
.testing-page [data-tooltip]:focus-visible::after,
.test-run-report [data-tooltip]:hover::after,
.test-run-report [data-tooltip]:focus-visible::after {
  display: block;
}

.testing-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid #888;
  border-radius: 999px;
  color: #333;
  background: #f1f1f1;
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
}

.testing-badge-passed,
.testing-badge-finished {
  border-color: #4c8b5d;
  color: #245f34;
  background: #e3f2e7;
}

.testing-badge-accepted,
.testing-badge-in_progress {
  border-color: #3c76a5;
  color: #234f74;
  background: #e4eff8;
}

.testing-badge-failed {
  border-color: #b72f2f;
  color: #8f2020;
  background: #fde5e5;
}

.testing-count-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(110px, 1fr));
  gap: 10px;
}

.testing-count-card {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--muted);
  border-radius: 8px;
  background: var(--canvas);
}

.testing-count-card strong {
  font-size: 1.5rem;
}

.testing-execution-layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, var(--testing-list-width, 62%)) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
}

.testing-list-pane {
  display: flex;
  min-height: 0;
  min-width: 0;
  padding-right: 0;
}

.testing-list-pane > .work-table-wrapper {
  scrollbar-gutter: auto;
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow: auto;
}

.testing-item-detail {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  overflow-anchor: none;
  position: relative;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  margin-left: 6px;
}

.work-item-report-outcome-locked {
  opacity: 0.62;
}

.work-item-report-outcome-locked [contenteditable="false"],
.work-item-report-outcome-locked select:disabled {
  cursor: not-allowed;
}

.testing-item-detail-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.testing-item-detail-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overflow-anchor: none;
  padding: var(--ui-space-2) var(--ui-space-2) 0;
  scroll-padding-block: var(--ui-space-2) 76px;
}

.testing-item-detail-body,
.testing-item-detail-content form {
  display: grid;
  align-content: start;
  gap: 14px;
}

.testing-item-detail-header {
  flex: 0 0 auto;
  z-index: 4;
  padding: var(--ui-space-1);
  background: var(--canvas);
  border-bottom: 1px solid var(--muted);
}

.testing-item-detail-header > div:last-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

.testing-snapshot-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.testing-snapshot-columns section {
  min-width: 0;
  padding: 10px;
  border: 1px solid #e1dad2;
  border-radius: 6px;
}

.testing-rich-text {
  overflow-wrap: anywhere;
}

.testing-step-list {
  display: grid;
  gap: 0;
}

.testing-step-chapter {
  display: grid;
  gap: 12px;
  padding: 18px 0 22px;
  border-bottom: 2px solid var(--muted);
}

.testing-step-chapter:first-child {
  padding-top: 0;
}

.testing-step-table-wrapper {
  scrollbar-gutter: auto;
  overflow: visible;
  max-height: none;
  min-width: 0;
}

.testing-step-table.wi-test-step-pair-table {
  min-width: 0;
  width: 100%;
  table-layout: fixed;
}


.testing-step-table .testing-step-chapter {
  display: table-row;
  padding: 0;
  border: 0;
}

.testing-step-table .testing-step-chapter > td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.testing-step-table .testing-rich-editor-host {
  min-height: 52px;
}

.testing-step-table .testing-step-result-select {
  margin-bottom: 8px;
}

.testing-step-table .wi-test-result {
  min-width: 0;
}

.testing-step-chapter h4,
.testing-step-chapter h5,
.testing-overall-result h4,
.testing-overall-result h5 {
  margin: 0;
}

.testing-step-chapter h4,
.testing-overall-result h4 {
  font-size: 1.08rem;
}

.testing-step-field {
  display: grid;
  gap: 6px;
}

.testing-step-field > .testing-rich-text,
.testing-overall-result > .testing-rich-text {
  min-height: 52px;
  padding: 10px;
  border: 1px solid #e1dad2;
  border-radius: 7px;
  background: #fffdf9;
}

.testing-rich-editor-host {
  min-width: 0;
  overflow: visible;
}

.testing-overall-result {
  display: grid;
  gap: 10px;
  padding: 12px 0;
  border: 0;
  border-top: 1px solid var(--muted);
  border-radius: 0;
  background: transparent;
}

.testing-completion-validation {
  padding: 12px 14px;
  border: 1px solid #c63b3b;
  border-radius: 8px;
  color: #7e1e1e;
  background: #fff0f0;
}

.testing-completion-validation[hidden] {
  display: none;
}

.testing-completion-validation ul {
  margin: 7px 0 0;
  padding-inline-start: 22px;
}



.testing-overall-rating {
  justify-self: start;
}

.testing-metadata {
  display: grid;
  grid-template-columns: minmax(100px, 0.4fr) minmax(160px, 1fr);
  gap: 5px 10px;
}

.testing-metadata dt {
  font-weight: 700;
}

.testing-metadata dd {
  margin: 0;
}

.testing-timer {
  display: inline-block;
  min-width: 88px;
  margin-left: 8px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.testing-defect-list,
.testing-candidates {
  display: grid;
  gap: 6px;
  max-height: 320px;
  overflow: auto;
}

.testing-defect-box,
.testing-attachment-box {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--muted);
}

.testing-defect-box h4,
.testing-attachment-box h4 {
  margin: 0;
  font-size: 1rem;
}

.testing-defect-box .meta-subtle,
.testing-attachment-box .meta-subtle {
  margin: 0;
}

.testing-defect-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  color: #245ba3;
  font-weight: 700;
}

.testing-result-control {
  min-width: 0;
}

.testing-result-button-group {
  display: flex;
  width: 100%;
  min-width: 0;
}

.testing-result-button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid #b7b7b7;
  border-radius: 0;
  color: #4e4e4e;
  background: #ececec;
  box-shadow: none;
  font-weight: 600;
}

.testing-result-button:first-child {
  border-radius: 8px 0 0 8px;
}

.testing-result-button:last-child {
  border-radius: 0 8px 8px 0;
}

.testing-result-control[data-result-key="PASSED"] .testing-result-button-passed,
.testing-result-control[data-result-key="ACCEPTED"] .testing-result-button-accepted,
.testing-result-control[data-result-key="FAILED"] .testing-result-button-failed {
  color: #fff;
  border-color: transparent;
}

.testing-result-control[data-result-key="PASSED"] .testing-result-button-passed {
  background: #2f8a4d;
}

.testing-result-control[data-result-key="ACCEPTED"] .testing-result-button-accepted {
  background: #2f6eb1;
}

.testing-result-control[data-result-key="FAILED"] .testing-result-button-failed {
  background: #c34040;
}

.testing-step-chapter[data-result-key="PASSED"] > td:first-child {
  box-shadow: inset 5px 0 0 #2f8a4d;
}

.testing-step-chapter[data-result-key="ACCEPTED"] > td:first-child {
  box-shadow: inset 5px 0 0 #2f6eb1;
}

.testing-step-chapter[data-result-key="FAILED"] > td:first-child {
  box-shadow: inset 5px 0 0 #c34040;
}

.testing-step-result-readonly {
  justify-self: start;
}

.testing-attachment-picker {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 12px 0 16px;
}

.testing-attachment-picker .ghost {
  min-height: 38px;
  padding: 8px 14px;
  border-color: #d75a50;
  border-radius: 999px;
  color: #bd4137;
  background: #fff8f6;
  font-weight: 600;
}

.testing-attachment-picker .ghost:hover,
.testing-attachment-picker .ghost:focus-visible {
  border-color: #b83d34;
  background: #fff0ed;
}

.testing-step-attachments {
  display: grid;
  gap: 8px;
  margin: 2px 0 12px;
}

.testing-step-attachments > strong {
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.testing-step-attachments .testing-attachment-row > div {
  grid-template-columns: minmax(0, 1fr);
}

.testing-step-attachments .testing-attachment-row small {
  grid-column: 1;
}

.wi-test-step-pair-table.has-results .testing-step-attachment-table-row > td {
  padding-top: 0;
  padding-bottom: 12px;
  padding-left: 10px;
  background: #fffdf9;
}

.testing-attachment-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.testing-attachment-row {
  justify-content: space-between;
}

.testing-attachment-row .danger {
  flex: 0 0 auto;
  white-space: nowrap;
}

.testing-attachment-row > div {
  display: grid;
  grid-template-columns: minmax(90px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 3px 10px;
  min-width: 0;
}

.testing-attachment-row a {
  min-width: 0;
  overflow-wrap: anywhere;
}

.testing-attachment-row small {
  grid-column: 2;
  color: var(--muted, #6d655d);
}

@media (max-width: 680px) {
  .testing-attachment-row,
  .testing-attachment-row > div {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .testing-attachment-row {
    flex-direction: column;
  }

  .testing-attachment-row small {
    grid-column: 1;
  }
}

.testing-info-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 0;
  border-radius: 0;
  color: #684914;
  background: #fff4d8;
}

.testing-info-box > div {
  flex: 1;
  min-width: 0;
}

.testing-info-box p {
  margin: 3px 0 0;
}

.testing-info-icon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  color: #fff;
  background: #9c6c19;
  font-family: Georgia, serif;
  font-weight: 700;
}

.workitem-fixed-revision-info {
  margin: 0 0 12px;
}

.workitem-meta-section.is-fixed-revision button:disabled,
.workitem-meta-section.is-fixed-revision input:disabled,
.workitem-meta-section.is-fixed-revision select:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  filter: grayscale(0.35);
}

.workitem-revision-clock {
  color: #735b3f;
  font-size: 16px;
  line-height: 1;
  flex: 0 0 auto;
}

.workitem-fixed-context-provenance {
  color: var(--ink-soft);
  font-size: 11px;
  white-space: nowrap;
}

.workitem-fixed-review-comment {
  width: 100%;
  padding-top: 6px;
  border-top: 1px solid #e2d7c9;
}

.workitem-fixed-review-row {
  flex-wrap: wrap;
}

.workitem-fixed-comment .comment-entry-body {
  margin-top: 8px;
}

.workitem-fixed-disabled-actions {
  margin-top: 8px;
}

.workitem-fixed-disabled-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.workitem-fixed-current-usage-note {
  margin-bottom: 10px;
}

.workitem-fixed-value {
  padding: 8px 10px;
  border: 1px solid var(--border, #d7cec3);
  border-radius: 6px;
  color: var(--muted, #6d655d);
  background: var(--surface-muted, #f5f2ee);
}

.workitem-fixed-custom-field {
  display: grid;
  gap: 3px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border, #d7cec3);
}

.workitem-fixed-custom-field:last-child {
  border-bottom: 0;
}

.testing-execution-disabled {
  padding: 12px;
  border: 1px dashed #cfc2b2;
  border-radius: 10px;
  background: #f1ece6;
  filter: saturate(0.45);
  opacity: 0.62;
  pointer-events: none;
  user-select: none;
}

.testing-reference-header,
.testing-reference-result-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.testing-reference-facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  margin: 4px 0 0 24px;
}

.testing-reference-facts dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.testing-reference-result-heading {
  justify-content: flex-start;
}

.testing-reference-result-content {
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.testing-reference-result-content > :first-child {
  margin-top: 0;
}

.testing-reference-result-content > :last-child {
  margin-bottom: 0;
}

.testing-reference-report-link {
  display: inline-block;
  margin: 8px 0 0 24px;
}

.testing-candidate {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border-bottom: 1px solid #e5ded7;
}

.testing-modal {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
}

.testing-modal form {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 10px;
  min-height: 0;
  overflow: hidden;
}

.testing-modal-body {
  display: grid;
  gap: 12px;
  min-height: 0;
  overflow: auto;
}

.testing-dialog-error {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  color: #8f2020;
  background: #fde5e5;
}

button.danger {
  color: #fff;
}

@media (max-width: 1100px) {
  .testing-execution-layout {
    grid-template-columns: 1fr;
  }

  .testing-detail-pane > .sidebar-resize-flag {
    display: none;
  }

  .testing-list-pane {
    padding-right: 0;
  }

  .testing-execution-layout:has(.testing-item-detail-content) > .testing-list-pane,
  .testing-execution-layout:not(:has(.testing-item-detail-content)) > .testing-detail-pane {
    display: none;
  }
}

@media (max-width: 760px) {
  .testing-detail-header,
  .testing-item-detail-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .testing-count-grid {
    grid-template-columns: repeat(2, minmax(110px, 1fr));
  }

  .testing-snapshot-columns {
    grid-template-columns: 1fr;
  }

}

.icon-action {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid #cfc2b2;
}

.status-badge.active {
  background: #e6f0ea;
  color: #1f4f45;
}

.status-badge.inactive {
  background: #f2e5e5;
  color: #7a2f2b;
}

.mfa-policy-badge,
.role-mfa-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid #b8c5ee;
  border-radius: 999px;
  background: #e7ecff;
  color: #354f9b;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.mfa-policy-badge[data-mfa-state="required-pending"] {
  border-color: #e2aaa7;
  background: #fae8e7;
  color: #8a2924;
}

.mfa-policy-badge[data-mfa-state="required-enabled"] {
  border-color: #99d1bd;
  background: #dff4eb;
  color: #185c47;
}

.mfa-policy-badge[data-mfa-state^="optional"] {
  border-color: #d1c7bb;
  background: #f3eee8;
  color: #665b50;
}

.login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.login-shell {
  width: min(420px, 90vw);
}

.login-body-with-footer {
  grid-template-rows: 1fr auto;
}

.login-body-with-footer .login-shell {
  grid-row: 1;
}

.login-legal-footer {
  grid-row: 2;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  width: min(720px, 92vw);
  padding: 18px 0;
  font-size: 12px;
}

.login-legal-footer a {
  color: var(--ink-soft);
  text-decoration: none;
}

.login-legal-footer a:hover,
.login-legal-footer a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

.login-card {
  background: var(--canvas);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 16px 40px var(--shadow);
  border: 1px solid var(--muted);
}

.login-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}

.login-subtitle {
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 20px;
}

.login-form {
  display: grid;
  gap: 16px;
}

.login-remember-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 13px;
  cursor: pointer;
}

.login-remember-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}

.login-mfa-panel,
.login-reset-panel {
  display: grid;
  gap: 12px;
}

.field {
  display: grid;
  gap: 6px;
  font-size: 13px;
}

.field input,
.field select,
.field textarea {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--muted);
  background: #fffaf5;
}

.field textarea {
  resize: vertical;
}

.template-color-field {
  position: relative;
  display: grid;
  gap: 8px;
}

.template-color-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  min-width: 132px;
  padding: 8px 12px;
  border: 1px solid var(--muted);
  border-radius: 12px;
  background: #fffaf5;
  cursor: pointer;
  color: var(--ink);
}

.template-color-trigger:hover {
  border-color: #c9b9a8;
}

.template-color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(47, 42, 38, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  background: var(--template-color, #ffffff);
  background-image: linear-gradient(45deg, rgba(47, 42, 38, 0.08) 25%, transparent 25%, transparent 75%, rgba(47, 42, 38, 0.08) 75%), linear-gradient(45deg, rgba(47, 42, 38, 0.08) 25%, transparent 25%, transparent 75%, rgba(47, 42, 38, 0.08) 75%);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
}

.template-color-trigger-value {
  font-weight: 600;
  letter-spacing: 0.01em;
}

.template-color-popover {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #decdbb;
  border-radius: 14px;
  background: #fffdf9;
  box-shadow: 0 14px 24px rgba(33, 29, 25, 0.12);
}

.template-color-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.template-color-popover-header .ghost {
  white-space: nowrap;
}

.template-color-input {
  width: min(220px, 100%);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  text-transform: uppercase;
}

.template-color-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.template-color-preset {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(47, 42, 38, 0.18);
  background: var(--template-color);
  cursor: pointer;
}

.template-color-preset:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(33, 29, 25, 0.18);
}

.field-required-marker {
  margin-left: 0.2em;
  color: #c62828;
  font-weight: 700;
}

.template-color-preset-transparent {
  background-color: #ffffff;
  background-image: linear-gradient(45deg, #d8d8d8 25%, transparent 25%, transparent 75%, #d8d8d8 75%), linear-gradient(45deg, #d8d8d8 25%, transparent 25%, transparent 75%, #d8d8d8 75%);
  background-position: 0 0, 5px 5px;
  background-size: 10px 10px;
}

.template-color-field.is-invalid .template-color-trigger,
.template-color-field.is-invalid .template-color-input {
  border-color: #d63b3b;
}

.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.primary {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 10px 16px;
  cursor: pointer;
}

.ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 8px 14px;
  cursor: pointer;
}

.form-error {
  color: #a1322f;
  font-size: 12px;
}

.form-success {
  color: #1f6d3d;
  font-size: 12px;
}

.new-user-password-mode {
  display: grid;
  gap: 6px;
}

.new-user-password-mode .radio-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
}

.new-user-result {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-soft, #f3f5f7);
  border: 1px solid var(--border-soft, #d9dee3);
  font-size: 13px;
}

.new-user-generated-password {
  font-family: "Courier New", monospace;
  font-size: 15px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: #fff5d6;
  user-select: all;
}

.setup-intro {
  margin: 0 0 12px;
  color: var(--ink-soft, #555);
  font-size: 13px;
}

.password-policy-panel {
  display: grid;
  gap: 4px;
  margin-top: -4px;
}

.password-policy-strength {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
}

.password-policy-strength[data-password-strength="weak"] {
  color: #9b2c2c;
}

.password-policy-strength[data-password-strength="medium"] {
  color: #9a6700;
}

.password-policy-strength[data-password-strength="strong"] {
  color: #1f6b45;
}

.password-policy-requirements {
  font-size: 12px;
  color: var(--ink-soft);
}

.password-policy-requirements[data-password-policy-state="valid"] {
  color: #1f6b45;
}

.password-policy-requirements[data-password-policy-state="invalid"] {
  color: #9b2c2c;
}

.login-hint {
  margin-top: 16px;
  font-size: 12px;
  color: var(--ink-soft);
}

.login-mfa-panel .login-hint,
.login-reset-panel .login-hint {
  margin-top: 0;
}

.ghost-link {
  border: 0;
  background: transparent;
  color: var(--accent-2);
  padding: 0;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}

.ghost-link:hover {
  text-decoration: underline;
}

.app-shell {
  height: 100vh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.license-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 18px;
  background: linear-gradient(90deg, #f2cd4f 0%, #f7dd7a 100%);
  color: #5f4300;
  border-bottom: 1px solid rgba(95, 67, 0, 0.18);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.3);
}

.license-banner[data-license-banner-tone="critical"] {
  background: linear-gradient(90deg, #e2a83d 0%, #f0c767 100%);
  color: #5f4300;
}

.license-banner[data-license-banner-tone="warning"] {
  background: linear-gradient(90deg, #f4d978 0%, #fae8ab 100%);
  color: #6b520d;
}

.license-banner-text {
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

.license-banner-dismiss {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(95, 67, 0, 0.25);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.license-banner-dismiss:hover {
  background: rgba(255, 255, 255, 0.34);
}

.topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  min-height: 56px;
  padding: 8px 16px;
  background: var(--accent);
  color: #f5efe8;
}

.topbar-leading {
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.responsive-nav-toggle,
.responsive-sidebar-close,
.responsive-review-action,
.responsive-review-title,
.responsive-review-empty,
.mobile-editing-notice,
.responsive-sidebar-backdrop {
  display: none;
}

.responsive-nav-toggle {
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.responsive-projects-toggle {
  display: inline-flex;
  width: auto;
  min-width: 0;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 12px;
}

.responsive-folder-icon {
  width: 19px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: 3px;
  position: relative;
}

.responsive-folder-icon::before {
  content: "";
  position: absolute;
  left: -2px;
  top: -6px;
  width: 9px;
  height: 5px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
}

.responsive-project-navigation-icon {
  display: inline-flex;
  width: 20px;
  height: 16px;
  flex-direction: column;
  justify-content: space-between;
}

.responsive-project-navigation-icon > span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.responsive-sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 64;
  background: rgba(29, 27, 26, 0.46);
}

.responsive-sidebar-backdrop.is-active {
  display: block;
}

.topbar .app-nav-action {
  color: #fff;
  border: 0;
  border-radius: 8px;
  border-color: transparent;
  background: transparent;
  transition: background-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.topbar .app-nav-action:hover {
  background: rgba(255, 255, 255, 0.13);
}

.topbar .app-nav-action:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.82);
  outline-offset: 2px;
}

.topbar .app-nav-icon-action {
  width: 40px;
  height: 40px;
  justify-content: center;
  padding: 0;
}

.topbar .responsive-projects-toggle {
  color: #a9252d;
  border-color: transparent;
  background: #fff1e5;
  box-shadow: 0 2px 8px rgba(91, 18, 22, 0.16);
}

.topbar .responsive-projects-toggle:hover {
  color: #8f1f26;
  background: #ffffff;
}

.topbar .responsive-projects-toggle[aria-expanded="true"] {
  color: #8f1f26;
  border-color: transparent;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.26);
}

.responsive-projects-icon {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}

.topbar .primary {
  background: #f5efe8;
  color: var(--accent);
}

.save-toast {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 14px;
  background: #efe7dd;
  border: 1px solid var(--muted);
  border-radius: 999px;
  font-size: 12px;
  z-index: 50;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.topbar .brand {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  justify-content: center;
  cursor: pointer;
}

.brand-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: inline-block;
}

.topbar .brand-logo {
  width: 32px;
  height: 32px;
}

.login-title .brand-logo {
  width: 42px;
  height: 42px;
}

.topbar-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.topbar .btn-icon {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}

.topbar .topbar-settings-action {
  width: 40px;
  height: 40px;
  justify-content: center;
  padding: 0;
}

.settings-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.settings-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--canvas);
  border: 1px solid var(--muted);
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(35, 26, 16, 0.18);
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 6px;
  min-width: 180px;
  z-index: 50;
}

.settings-menu:hover .settings-dropdown,
.settings-menu:focus-within .settings-dropdown,
.settings-menu.settings-menu-open .settings-dropdown {
  display: flex;
}

.settings-menu.settings-menu-closed .settings-dropdown {
  display: none !important;
}

.settings-dropdown .ghost {
  justify-content: flex-start;
  width: 100%;
  color: var(--accent);
  border-color: #c8beb3;
  background: #ffffff;
  font-weight: 600;
}

.settings-dropdown .ghost:hover {
  background: #f3ece4;
}

.settings-dropdown .ghost .btn-label {
  white-space: nowrap;
  text-align: left;
}

.settings-submenu {
  position: relative;
}

.settings-submenu > .ghost {
  position: relative;
}

.settings-submenu-arrow {
  margin-left: auto;
  font-size: 18px;
  line-height: 1;
}

.settings-legal-dropdown {
  position: absolute;
  right: calc(100% + 8px);
  top: -8px;
  z-index: 51;
  display: none;
  flex-direction: column;
  gap: 6px;
  min-width: 180px;
  padding: 8px;
  border: 1px solid var(--muted);
  border-radius: 12px;
  background: var(--canvas);
  box-shadow: 0 14px 30px rgba(35, 26, 16, 0.18);
}

.settings-submenu:hover .settings-legal-dropdown,
.settings-submenu:focus-within .settings-legal-dropdown {
  display: flex;
}

.settings-legal-dropdown a {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #c8beb3;
  border-radius: 8px;
  color: var(--accent);
  background: #ffffff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.settings-legal-dropdown a:hover,
.settings-legal-dropdown a:focus-visible {
  background: #f3ece4;
}

.settings-app-version {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 4px 2px;
  color: var(--ink-soft);
  font-size: 12px;
}

#settingsAppVersion {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.settings-language {
  display: grid;
  gap: 6px;
  padding: 6px 4px 2px;
  border-top: 1px solid var(--muted);
  margin-top: 4px;
}

.settings-language label {
  font-size: 12px;
  color: var(--ink-soft);
}

.settings-language select {
  border-radius: 8px;
  padding: 6px 8px;
  border: 1px solid var(--muted);
  background: #fffaf5;
}

.settings-dropdown-separator {
  height: 1px;
  margin: 2px 4px;
  background: var(--muted);
}

.workspace {
  flex: 1;
  display: grid;
  grid-template-columns:
    minmax(var(--workspace-main-min-width), 1fr) minmax(var(--sidebar-min-width), var(--right-sidebar-width));
  gap: 12px;
  padding: 0;
  height: auto;
  overflow: hidden;
  align-items: stretch;
  min-height: 0;
}

.workspace.sidebar-left-collapsed {
  grid-template-columns:
    minmax(var(--workspace-main-min-width), 1fr) minmax(var(--sidebar-min-width), var(--right-sidebar-width));
}

.workspace.sidebar-right-collapsed {
  grid-template-columns: minmax(var(--workspace-main-min-width), 1fr) 0;
}

.workspace.sidebar-left-collapsed.sidebar-right-collapsed {
  grid-template-columns: minmax(var(--workspace-main-min-width), 1fr) 0;
}

.workspace:has(#traceabilityView.active):not(:has(#metaPanel.meta-workitem-mode)) {
  grid-template-columns: minmax(var(--workspace-main-min-width), 1fr);
}

.workspace:has(#traceabilityView.active):not(:has(#metaPanel.meta-workitem-mode)) > #metadataSidebar,
.workspace:has(#traceabilityView.active):not(:has(#metaPanel.meta-workitem-mode)) .metadata-sidebar-reveal {
  display: none;
}

.workspace.document-toolbar-active {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  --workspace-grid-gap: 0px;
}

.workspace.document-toolbar-active > .document-toolbar-shell {
  grid-column: 1 / -1;
  grid-row: 1;
  margin-left: var(--doc-sidebar-width);
}

.workspace.document-toolbar-active > .main {
  grid-column: 1;
  grid-row: 2;
}

.workspace.document-toolbar-active > .meta-sidebar {
  grid-column: 2;
  grid-row: 2;
}

.document-toolbar-shell {
  position: relative;
  z-index: var(--document-toolbar-layer);
  min-width: 0;
  height: var(--document-toolbar-height);
}

body.doc-editor-fullscreen-mode
  .workspace.document-toolbar-active
  > .document-toolbar-shell {
  margin-left: 0;
}

.workspace.project-home-mode {
  grid-template-columns: minmax(var(--workspace-main-min-width), 1fr);
}

.workspace.project-home-mode.sidebar-left-collapsed {
  grid-template-columns: minmax(var(--workspace-main-min-width), 1fr);
}

.workspace.project-home-mode .meta-sidebar {
  display: none !important;
}

.sidebar,
.meta-sidebar,
.doc-sidebar {
  background: var(--sidebars);
  border-radius: 14px;
  padding: 12px;
  border: 1px solid var(--muted);
  box-shadow: 0 10px 30px var(--shadow);
  overflow: hidden;
  max-height: 100%;
  height: 100%;
  position: relative;
  min-height: 0;
}

.doc-sidebar {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.meta-sidebar {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.meta-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  justify-self: end;
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  transition:
    transform 180ms ease,
    opacity 180ms ease,
    visibility 0s linear 0s;
}

.workspace.sidebar-right-collapsed > .meta-sidebar {
  width: var(--right-sidebar-width);
  padding: 0;
  border-width: 0;
  transform: translateX(calc(100% + var(--workspace-grid-gap)));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 180ms ease,
    opacity 180ms ease,
    visibility 0s linear 180ms;
}

.meta-sidebar .panel-header,
.meta-sidebar .sidebar-collapsed-header {
  flex: 0 0 auto;
}

.sidebar-toggle {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 0;
}

.sidebar-collapsed {
  padding: 4px 1px;
  overflow: hidden;
}

.sidebar-collapsed .panel-header,
.sidebar-collapsed .panel-tabs,
.sidebar-collapsed .tree,
.sidebar-collapsed .list,
.sidebar-collapsed .meta-panel,
.sidebar-collapsed #metaPanel,
.sidebar-collapsed #metaQuickReview {
  display: none;
}

.sidebar-collapsed #metaPanel,
.sidebar-collapsed #metaPanel.meta-workitem-mode,
.sidebar-collapsed :is(#metaPanel, #pinnedReviewPanel, #documentReviewPanel).meta-standard-split-mode,
.sidebar-collapsed #metaQuickReview {
  display: none !important;
}

.sidebar-collapsed .sidebar-toggle {
  display: inline-flex;
}

.sidebar-collapsed .sidebar-collapsed-header {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.sidebar-collapsed .sidebar-header {
  display: none;
}

.sidebar-collapsed-header {
  display: none;
}

.sidebar:not(.sidebar-collapsed) .sidebar-collapsed-header {
  display: none;
}

.meta-sidebar:not(.sidebar-collapsed) .sidebar-collapsed-header {
  display: none;
}

.sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.workspace > .sidebar {
  position: fixed;
  inset: 68px auto 12px 12px;
  z-index: 70;
  width: min(360px, calc(100vw - 24px));
  height: auto;
  max-height: none;
  padding: 12px;
  transform: translateX(calc(-100% - 24px));
  visibility: hidden;
  pointer-events: none;
  transition: transform 180ms ease, visibility 0s linear 180ms;
}

body.responsive-projects-open .workspace > .sidebar {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform 180ms ease, visibility 0s linear 0s;
}

.workspace > .sidebar.sidebar-collapsed .sidebar-header,
.workspace > .sidebar.sidebar-collapsed .panel-tabs,
.workspace > .sidebar.sidebar-collapsed .tree {
  display: flex;
}

.workspace > .sidebar .sidebar-collapsed-header,
.workspace > .sidebar .sidebar-toggle {
  display: none !important;
}

.workspace > .sidebar .responsive-sidebar-close {
  display: inline-flex;
}

.sidebar-pin {
  display: none;
}

.sidebar-pin[aria-pressed="true"] {
  color: #ffffff;
  border-color: var(--accent);
  background: var(--accent);
}

.sidebar .panel-header,
.sidebar .panel-tabs {
  flex: 0 0 auto;
}

#projectTree {
  overflow: auto;
  min-height: 0;
  flex: 1 1 auto;
  max-height: 100%;
}

.project-list-empty {
  display: flex;
  min-height: 100%;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 112px 2px 24px;
  text-align: center;
}

.project-list-empty-pointer {
  position: absolute;
  z-index: 0;
  top: 44px;
  right: 16px;
  width: 180px;
  height: 270px;
  overflow: visible;
  pointer-events: none;
}

.project-list-empty-pointer > path:first-of-type {
  fill: none;
  stroke: #9b8b78;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 7 8;
}

.project-list-empty-pointer .project-list-empty-arrowhead {
  fill: #9b8b78;
  stroke: none;
}

.sidebar > .sidebar-header,
.sidebar > .panel-tabs {
  position: relative;
  z-index: 1;
}

.project-list-empty-graphic {
  position: relative;
  z-index: 0;
  width: min(100%, 330px);
  height: auto;
  margin-bottom: 16px;
  overflow: visible;
}

.project-list-empty-rays path {
  fill: none;
  stroke: #c6b7a4;
  stroke-width: 4;
  stroke-linecap: round;
}

.project-list-empty-title {
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.project-list-empty-text {
  max-width: 255px;
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.55;
}

.sidebar.sidebar-collapsed .project-list-empty {
  display: none;
}

#metaPanel,
#pinnedReviewPanel {
  overflow: auto;
  min-height: 0;
  flex: 1 1 auto;
}

#metaPanel.meta-workitem-mode {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

:is(#metaPanel, #pinnedReviewPanel, #documentReviewPanel).meta-standard-split-mode {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#metaPanel.meta-workitem-mode .meta-split {
  height: 100%;
  min-height: 0;
}

:is(#metaPanel, #pinnedReviewPanel, #documentReviewPanel).meta-standard-split-mode .meta-split {
  height: 100%;
  min-height: 0;
}

#metaPanel.meta-workitem-mode .meta-split.has-comments {
  display: grid;
  grid-template-rows: minmax(0, 2fr) minmax(0, 1fr);
  gap: 12px;
}

:is(#metaPanel, #pinnedReviewPanel, #documentReviewPanel).meta-standard-split-mode .meta-split.has-comments {
  display: grid;
  grid-template-rows: minmax(0, 2fr) minmax(0, 1fr);
  gap: 12px;
}

body.meta-bottom-resizing {
  user-select: none;
}

#metaPanel.meta-workitem-mode .meta-split.no-comments {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
}

#metaPanel.meta-workitem-mode .meta-split.no-comments .meta-top {
  height: 100%;
  min-height: 0;
}

#metaPanel.meta-workitem-mode .meta-split.comments-only {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
}

#metaPanel.meta-workitem-mode .meta-split.comments-only .meta-bottom {
  display: flex;
  border-top: 1px dashed #d8cbbb;
  padding: 12px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px #e6dbcf;
}

#metaPanel.meta-workitem-mode .meta-split.comments-only.no-comments .meta-bottom {
  display: flex;
}

#metaPanel.meta-workitem-mode .meta-split.comments-only #metaCommentsSection {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#metaPanel.meta-workitem-mode .meta-top.comments-toolbar-only {
  flex: 0 0 auto;
  overflow: visible;
  padding-bottom: 0;
}

#metaPanel.meta-workitem-mode .meta-split.comments-hidden {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
}

#metaPanel.meta-workitem-mode .meta-split.comments-hidden .meta-top {
  height: 100%;
  min-height: 0;
}

#metaPanel.meta-workitem-mode .meta-split.comments-hidden .meta-bottom {
  display: none !important;
}

#metaPanel.meta-workitem-mode .meta-top,
#metaPanel.meta-workitem-mode .meta-bottom {
  overflow: auto;
  min-height: 0;
}

:is(#metaPanel, #pinnedReviewPanel, #documentReviewPanel).meta-standard-split-mode .meta-top,
:is(#metaPanel, #pinnedReviewPanel, #documentReviewPanel).meta-standard-split-mode .meta-bottom {
  overflow: auto;
  min-height: 0;
}

:is(#metaPanel, #pinnedReviewPanel, #documentReviewPanel) .meta-bottom.has-resize-flag {
  position: relative;
  padding-top: 24px;
}

.meta-comments-resize-flag {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 8;
  display: flex;
  width: 52px;
  height: 18px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #c9bdb0;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: #fffdf9;
  color: #75695d;
  cursor: row-resize;
  transform: translateX(-50%);
  box-shadow: 0 2px 7px rgba(33, 29, 25, 0.14);
}

.meta-comments-resize-flag > span {
  width: 24px;
  height: 4px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  opacity: 0.72;
}

.meta-comments-resize-flag:hover,
.meta-comments-resize-flag:focus-visible {
  border-color: #9f8e7d;
  background: #f4ece4;
  color: var(--ink);
  outline: none;
}

:is(#metaPanel, #pinnedReviewPanel, #documentReviewPanel).meta-standard-split-mode .meta-standard-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

:is(#metaPanel, #pinnedReviewPanel, #documentReviewPanel).meta-standard-split-mode .meta-view-toggle {
  border: 1px solid #d8cbbb;
  background: #fffaf5;
  color: #594f44;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
}

:is(#metaPanel, #pinnedReviewPanel, #documentReviewPanel).meta-standard-split-mode .meta-view-toggle.active {
  background: #2d5b4e;
  border-color: #2d5b4e;
  color: #ffffff;
}

#metaPanel.meta-workitem-mode .workitem-meta-toggle {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 auto;
  gap: 0 14px;
  border-bottom: 1px solid var(--muted);
  padding: 0 4px;
}

#metaPanel.meta-workitem-mode .workitem-meta-toggle .meta-view-toggle {
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--ink-soft);
  border-radius: 0;
  font-size: 13px;
  line-height: 1.4;
  padding: 10px 0 8px;
  cursor: pointer;
}

#metaPanel.meta-workitem-mode .workitem-meta-toggle .meta-view-toggle.active {
  background: transparent;
  border-bottom-color: #2d5b4e;
  color: #2d5b4e;
  font-weight: 700;
}

#metaPanel.meta-workitem-mode .workitem-meta-section {
  display: grid;
  gap: 14px;
  border: 0;
  padding: 4px;
  margin: 0;
}

#metaPanel.meta-workitem-mode [hidden] {
  display: none !important;
}

.workitem-details-layout {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

.workitem-comment-detail {
  display: grid;
  align-content: start;
  gap: 12px;
  overflow-y: auto;
  min-height: 0;
  padding: 4px;
}

.workitem-details-header {
  flex: 0 0 auto;
  padding: 4px 4px 12px;
}

.workitem-details-navigation {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.workitem-details-header h2 {
  font-size: 21px;
  line-height: 1.25;
  margin: 6px 0;
  overflow-wrap: anywhere;
}

.workitem-details-code {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #2d5b4e;
}

.workitem-details-revision {
  font-size: 12px;
  color: var(--ink-soft);
  margin: 10px 0 0;
}

.workitem-details-revision.workitem-fixed-revision-info {
  padding: 8px 10px;
  border-radius: 6px;
  background: #fff3d8;
  color: #704b0b;
}

.workitem-details-remote-notice {
  padding: 8px 0;
  font-size: 12px;
  color: #704b0b;
}

.workitem-details-content {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px 0;
  scrollbar-gutter: stable;
}

.workitem-details-edit-action {
  display: flex;
  justify-content: flex-end;
}

.workitem-details-edit-action:empty {
  display: none;
}

.workitem-details-layout h3 {
  font-size: 14px;
  margin: 0 0 12px;
}

.workitem-details-values {
  margin: 0;
}

.workitem-details-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
  gap: 12px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--muted);
}

.workitem-details-row dt {
  color: var(--ink-soft);
}

.workitem-details-row dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.workitem-details-extra {
  margin-top: 18px;
}

.workitem-details-extra summary {
  color: #2d5b4e;
  cursor: pointer;
  padding: 6px 0;
  font-weight: 600;
}

#metaEditForm > .field {
  margin-bottom: 14px;
}

.workitem-details-savebar {
  position: sticky;
  bottom: -12px;
  background: var(--sidebars);
  border-top: 1px solid var(--muted);
  padding: 12px 0;
  z-index: 2;
}

#metaEditState {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--ink-soft);
}

#metaPanel .workitem-details-layout .comment-list,
#metaPanel .workitem-details-layout .trace-tree-sidebar,
#metaPanel .workitem-details-layout #metaCommentsSection {
  max-height: none;
  height: auto;
  overflow: visible;
}

#metaPanel .workitem-details-layout #metaCommentsSection {
  border-top: 1px solid var(--muted);
  padding-top: 18px;
}

#metaPanel .workitem-details-layout .workitem-fixed-disabled-actions {
  display: none;
}

@media (pointer: coarse) {
  #metaPanel .workitem-details-layout button,
  #metaPanel .workitem-details-layout summary {
    min-height: 44px;
  }
}

:is(#metaPanel, #pinnedReviewPanel, #documentReviewPanel).meta-standard-split-mode .meta-standard-split.mode-review {
  grid-template-rows: minmax(0, 1fr);
}

:is(#metaPanel, #pinnedReviewPanel, #documentReviewPanel).meta-standard-split-mode .meta-standard-split.mode-review .meta-bottom {
  display: none;
}

:is(#metaPanel, #pinnedReviewPanel, #documentReviewPanel).meta-standard-split-mode .meta-standard-split.mode-comments {
  grid-template-rows: minmax(0, 1fr);
}

:is(#metaPanel, #pinnedReviewPanel, #documentReviewPanel).meta-standard-split-mode .meta-standard-split.mode-comments .meta-top {
  display: none;
}

.main {
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  min-height: 0;
  height: 100%;
  position: relative;
}

.main-header {
  background: var(--canvas);
  border-radius: 14px;
  padding: 12px 16px;
  border: 1px solid var(--muted);
  box-shadow: 0 10px 30px var(--shadow);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topbar .main-header {
  grid-column: 2;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  gap: 24px;
}

.view-load-indicator {
  position: fixed;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 49;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--muted);
  border-radius: 999px;
  background: rgba(255, 250, 244, 0.94);
  box-shadow: 0 8px 24px rgba(86, 52, 32, 0.12);
  color: var(--ink-soft);
  font-size: 13px;
  backdrop-filter: blur(6px);
  pointer-events: none;
  max-width: calc(100vw - 32px);
  white-space: nowrap;
}

.view-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: stretch;
    justify-content: flex-end;
    align-items: stretch;
}

.project-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 10px;
  min-width: 0;
}

.project-title {
  font-size: 18px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.project-title-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.project-title.no-project .project-title-icon {
  display: none;
}

.topbar .project-title-row {
  flex: 0 0 clamp(210px, 18vw, 280px);
  gap: 6px;
  margin-right: 2px;
  padding-right: 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.topbar .project-title {
  flex: 0 1 auto;
  min-width: 0;
  max-width: calc(100% - 42px);
  font-size: 16px;
}

.topbar .project-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar .topbar-project-edit {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  justify-content: center;
  padding: 0;
  border-color: transparent;
  background: rgba(255, 255, 255, 0.07);
}

.topbar .topbar-project-edit:hover,
.topbar .topbar-project-edit:focus-visible {
  background: rgba(255, 255, 255, 0.16);
}

.topbar .view-tabs {
  min-width: 0;
  flex: 1 1 auto;
  gap: 6px;
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding-left: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.topbar .view-tabs::-webkit-scrollbar {
  display: none;
}

.topbar .view-tabs .tab-btn {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 12px;
  border: 0;
  color: #ffffff;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.topbar .view-tabs .tab-btn:hover,
.topbar .view-tabs .tab-btn:focus-visible {
  background: rgba(255, 255, 255, 0.14);
}

.topbar .view-tabs .tab-btn.active {
  background: rgba(120, 16, 16, 0.36);
  box-shadow: none;
}

.topbar .view-tabs .topbar-icon-action {
  width: 40px;
  justify-content: center;
  padding: 0;
}

.sidebar-resize-flag {
  position: absolute;
  top: 50%;
  z-index: 12;
  display: none;
  /* Keep the grip inside the sidebar's 12px padding, clear of its content. */
  width: 10px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #c9bdb0;
  background: #fffdf9;
  color: #75695d;
  cursor: col-resize;
  transform: translateY(-50%);
  box-shadow: 0 1px 3px rgba(33, 29, 25, 0.12);
  touch-action: none;
}

.sidebar-resize-flag-right {
  right: -1px;
  border-radius: 5px 0 0 5px;
}

.sidebar-resize-flag-left {
  left: -1px;
  border-radius: 0 5px 5px 0;
}

.sidebar-resize-flag > span {
  width: 3px;
  height: 20px;
  border-right: 1px solid currentColor;
  border-left: 1px solid currentColor;
  opacity: 0.72;
}

.sidebar-resize-flag:hover,
.sidebar-resize-flag:focus-visible {
  border-color: #9f8e7d;
  background: #f4ece4;
  color: var(--ink);
  outline: none;
}

.metadata-sidebar-reveal {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 68;
  display: flex;
  width: 30px;
  min-width: 30px;
  height: 112px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 5px;
  border: 1px solid #c9bdb0;
  border-right: 0;
  border-radius: 9px 0 0 9px;
  background: #fff7f7;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  writing-mode: vertical-rl;
  cursor: pointer;
  transform: translate(100%, -50%);
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 4px 14px rgba(33, 29, 25, 0.18);
  transition:
    transform 180ms ease,
    opacity 180ms ease,
    visibility 0s linear 180ms,
    background-color 120ms ease;
}

.metadata-sidebar-reveal-icon {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  writing-mode: horizontal-tb;
  transform: rotate(45deg);
}

.workspace.sidebar-right-collapsed + .metadata-sidebar-reveal {
  transform: translate(0, -50%);
  opacity: 1;
  visibility: visible;
  transition:
    transform 180ms ease,
    opacity 180ms ease,
    visibility 0s linear 0s,
    background-color 120ms ease;
}

.metadata-sidebar-reveal:hover,
.metadata-sidebar-reveal:focus-visible {
  background: #f0e5e5;
  outline: 2px solid #2d5b4e;
  outline-offset: -2px;
}

.workspace.project-home-mode + .metadata-sidebar-reveal,
.focused-view .metadata-sidebar-reveal {
  display: none;
}

.home-panel {
  background: var(--canvas);
  border-radius: 14px;
  padding: 12px;
  border: 1px solid var(--muted);
  box-shadow: 0 10px 30px var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: auto;
  height: 100%;
}

.home-content {
  min-height: 300px;
  border: 1px dashed var(--muted);
  border-radius: 10px;
  padding: 10px;
  background: #fffaf5;
  flex: 1;
  width: 100%;
}

.home-hint {
  font-size: 12px;
  color: var(--ink-soft);
}

.home-toolbar {
  display: flex;
  gap: 6px;
  align-items: center;
}

.comment-bubble {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 6px;
  vertical-align: middle;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%232d5b4e%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M19%204H5a2%202%200%200%200-2%202v15l3.467-2.6a2%202%200%200%201%201.2-.4H19a2%202%200%200%200%202-2V6a2%202%200%200%200-2-2z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  cursor: pointer;
  flex: 0 0 18px;
  align-self: center;
}

.comment-bubble.pm-comment-bubble,
.comment-bubble.comment-bubble-workitem {
  margin-right: 4px;
}

.comment-bubble.pm-comment-bubble {
  width: 0.95em;
  height: 0.95em;
  margin-left: 0.32em;
  margin-right: 0;
  line-height: 0;
  vertical-align: text-top;
  flex: none;
  align-self: auto;
}

.comment-bubble.comment-bubble-workitem {
  margin-left: 8px;
}

.comment-bubble.comment-bubble-navigation-highlight {
  position: relative;
  z-index: 4;
  border-radius: 4px;
  filter: none;
  animation: comment-bubble-navigation-pulse 600ms ease-in-out 4;
}

@keyframes comment-bubble-navigation-pulse {
  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(223, 112, 28, 0));
  }

  50% {
    transform: scale(1.45);
    filter:
      drop-shadow(0 0 2px #ffffff)
      drop-shadow(0 0 7px #df701c);
  }
}

@media (prefers-reduced-motion: reduce) {
  .comment-bubble.comment-bubble-navigation-highlight {
    animation: none;
    transform: scale(1.2);
    filter:
      drop-shadow(0 0 2px #ffffff)
      drop-shadow(0 0 7px #df701c);
  }
}


.comment-btn {
  border: none;
  background: transparent;
  padding: 0;
}

.row-actions .comment-bubble {
  margin-left: 0;
}

.meta-subtle {
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 6px;
  margin-top: 10px;
}

.comment-list {
  display: grid;
  align-content: start;
  align-items: start;
  grid-auto-rows: max-content;
  gap: 10px;
  width: 100%;
  padding: 0;
  margin: 0;
}

.comment-row {
  border: 1px solid #e2d7c9;
  background: #fffaf5;
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}

.comment-row.comment-thread-row {
  transform: translateX(0);
  opacity: 1;
  transition:
    background-color 260ms ease,
    border-color 260ms ease,
    color 260ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 220ms ease,
    max-height 320ms cubic-bezier(0.4, 0, 0.2, 1),
    padding 320ms cubic-bezier(0.4, 0, 0.2, 1),
    margin 320ms cubic-bezier(0.4, 0, 0.2, 1),
    border-width 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

.comment-row.comment-thread-row .comment-title,
.comment-row.comment-thread-row .comment-meta,
.comment-row.comment-thread-row .comment-row-body,
.comment-row.comment-thread-row .comment-source-badge,
.comment-row.comment-thread-row .comment-inline-btn,
.comment-row.comment-thread-row .comment-status {
  transition:
    color 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease;
}

.comment-row.comment-thread-row.is-closed {
  background: #f3f1ed;
  border-color: #d8d1c8;
}

.comment-row.comment-thread-row.is-closed .comment-title,
.comment-row.comment-thread-row.is-closed .comment-meta,
.comment-row.comment-thread-row.is-closed .comment-row-body {
  color: #7a736a;
}

.comment-row.comment-thread-row.is-closed .comment-source-badge {
  border-color: #d2cac0;
  background: #ebe5dd;
  color: #746b60;
}

.comment-row.comment-thread-row.is-closed .ghost {
  border-color: #b9b2a9;
  color: #766d63;
}

.review-status-counters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.comment-section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ui-space-2);
}

.comment-thread-counts,
.comment-tab-counts {
  color: var(--ink-soft);
  font-size: var(--ui-text-small);
  font-weight: 400;
  white-space: nowrap;
}

#metaReviewSection .review-status-counters {
  gap: var(--ui-space-1);
}

#metaReviewSection .review-status-counter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-1);
  padding: var(--ui-space-2);
  border-radius: var(--ui-radius);
}

#metaReviewSection .review-status-counter .count {
  font-size: var(--ui-text);
}

#metaReviewSection .review-status-counter .label {
  font-size: var(--ui-text-small);
}

#metaReviewSection .reviewer-line {
  padding: var(--ui-space-2);
}

.review-summary-controls {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-bottom: 12px;
  background: var(--sidebars);
  border-bottom: 1px solid var(--muted);
}

.review-summary-rule, .review-summary-code, .review-summary-result {
  color: var(--ink-soft);
  font-size: 12px;
}

.review-summary-rule { margin-bottom: 12px; }
.review-summary-result { padding: 12px 0 4px; }
.review-summary-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.review-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid var(--muted);
  border-radius: 7px;
  background: var(--canvas);
  color: var(--ink);
  font-size: 12px;
}
.review-summary-chip[aria-pressed="true"] {
  background: #edf4ef;
  border-color: #2c5d51;
  color: #2c5d51;
}
.review-summary-chip .count { font-weight: 700; font-variant-numeric: tabular-nums; }
.review-summary-mine { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; }
.review-summary-mine input { margin: 0; accent-color: #2c5d51; }
.review-summary-item { border-bottom: 1px solid var(--muted); padding-bottom: 12px; }
.review-summary-item:not([open]) { padding-bottom: 0; }
.review-summary-item > summary { cursor: pointer; padding: 14px 0; overflow-wrap: anywhere; }
.review-summary-item-title { display: block; font-weight: 600; margin-top: 2px; }
.review-summary-progress-label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; color: var(--ink-soft); font-size: 12px; }
.review-summary-progress { display: block; height: 3px; margin-top: 10px; background: var(--muted); border-radius: 3px; overflow: hidden; }
.review-summary-progress > span { display: block; height: 100%; background: #4f9b5f; }
.review-summary-reviewers { padding: 0; margin-bottom: 10px; border-radius: 8px; overflow: hidden; background: var(--canvas); }
.review-summary-reviewers .reviewer-line { border: 0; border-radius: 0; background: transparent; padding: 10px; flex-wrap: wrap; }
.review-summary-reviewers .reviewer-line + .reviewer-line { border-top: 1px solid var(--muted); }
.review-summary-reviewers .reviewer-name { white-space: normal; overflow-wrap: anywhere; }
.review-summary-unassigned > summary { padding: 14px 0; cursor: pointer; font-weight: 600; }
.review-summary-unassigned > summary span { float: right; color: var(--ink-soft); }
.review-summary-unassigned-item { display: grid; gap: 3px; width: 100%; text-align: left; padding: 12px 0; border: 0; border-top: 1px solid var(--muted); border-radius: 0; background: transparent; color: var(--ink); overflow-wrap: anywhere; }
.review-summary-list-link { margin-left: auto; color: var(--ink-soft); }
:is(#metaPanel, #pinnedReviewPanel, #documentReviewPanel).meta-standard-split-mode .review-summary-tabs { flex-wrap: wrap; gap: 12px; border-bottom: 1px solid var(--muted); }
:is(#metaPanel, #pinnedReviewPanel, #documentReviewPanel).meta-standard-split-mode .review-summary-tabs .meta-view-toggle { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; padding: 8px 0; color: var(--ink-soft); }
:is(#metaPanel, #pinnedReviewPanel, #documentReviewPanel).meta-standard-split-mode .review-summary-tabs .meta-view-toggle.active { border-bottom-color: #2c5d51; background: transparent; color: #2c5d51; }
@media (pointer: coarse) {
  .review-summary-chip, .review-summary-mine, .review-summary-tabs .meta-view-toggle { min-height: 44px; }
}

.review-status-counter {
  border: 1px solid #d5c8b7;
  border-radius: 10px;
  padding: 10px 8px;
  background: #f8f3ec;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
}

.review-status-counter .count {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.review-status-counter .label {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.review-status-counter.accepted {
  border-color: #79b27f;
  background: #eaf7ec;
  color: #296131;
}

.review-status-counter.rejected {
  border-color: #d18484;
  background: #fdeeee;
  color: #9f2d2d;
}

.review-status-counter.pending {
  border-color: #81a8db;
  background: #eaf2ff;
  color: #1f4f8e;
}

.review-status-counter.unassigned {
  border-color: #b9b2a9;
  background: #f3f3f3;
  color: #5f5b55;
}

.review-summary-header {
  align-items: center;
  gap: 8px;
}

.review-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.review-filter-popover {
  position: fixed;
  inset: auto;
  margin: 0;
  width: min(360px, calc(100vw - 16px));
  max-height: calc(100dvh - 16px);
  overflow: auto;
  border: 1px solid var(--muted);
  border-radius: 10px;
  background: #fffaf5;
  padding: 10px;
  margin-bottom: 8px;
  display: grid;
  gap: 8px;
}

.review-filter-popover[popover] { display: none; }
.review-filter-popover:popover-open { display: grid; }
.review-filter-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); }
.review-filter-title {
  font-weight: 700;
  font-size: 12px;
}

.review-filter-list {
  display: grid;
  gap: 6px;
  max-height: 160px;
  overflow: auto;
}

.review-filter-option {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.review-filter-actions {
  display: flex;
  justify-content: flex-end;
}

.review-workitem-row.review-state-none {
  background: #f3f3f3;
}

.review-workitem-row.review-state-self-pending {
  background: #fff8db;
}

.review-workitem-row.review-state-others-pending {
  background: #edf4ff;
}

.review-workitem-row.review-state-accepted {
  background: #edf9ef;
}

.review-workitem-row.review-state-rejected {
  background: #fdeeee;
}

.comment-title {
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.comment-source-line {
  display: flex;
  margin-bottom: 6px;
}

.comment-source-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid #d7cbbf;
  background: #f6efe7;
  color: #5a5147;
}

.comment-source-badge.document {
  border-color: #c3b2dd;
  background: #f4eefb;
  color: #5a3f82;
}

.comment-source-badge.workitem {
  border-color: #d6ba87;
  background: #fbf2df;
  color: #7a5420;
}

.comment-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.comment-meta {
  color: var(--ink-soft);
  margin-left: 6px;
}

.comment-row-body {
  color: var(--ink);
  font-size: 13px;
}

.comment-thread-toolbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-top: 10px;
}

.comment-thread-actions {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.comment-inline-btn {
  padding: 4px 8px;
  font-size: 12px;
}

.comment-thread-toggle {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.2;
}

.comment-thread-toggle-label {
  white-space: normal;
}

.comment-thread-toggle-spacer {
  min-height: 1px;
}

.comment-thread-arrow {
  display: inline-flex;
  transition: transform 220ms ease;
}

.comment-thread-toggle[aria-expanded="true"] .comment-thread-arrow {
  transform: rotate(90deg);
}

.comment-thread-children {
  margin-top: 8px;
  margin-left: 14px;
  padding-left: 12px;
  border-left: 2px solid #e4d6c6;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    max-height 320ms ease,
    opacity 260ms ease,
    transform 260ms ease;
}

.comment-thread-children.is-expanded {
  opacity: 1;
  transform: translateY(0);
}

.comment-thread-child+.comment-thread-child {
  margin-top: 8px;
}

.comment-entry.comment-entry-reply {
  margin-bottom: 0;
  background: #fffdf9;
}

.comment-status {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #d7cbbf;
  background: #f6efe7;
  color: #5a5147;
  text-transform: capitalize;
}

.comment-status.closed {
  background: #ede7df;
  color: #7d746a;
}

.comment-status.in_progress,
.comment-metadata-chip.status-in_progress {
  background: #e8f1fb;
  color: #245b91;
}

.comment-status.blocked,
.comment-metadata-chip.status-blocked,
.comment-metadata-chip.priority-critical {
  background: #fde7e5;
  color: #a83227;
}

.comment-status.resolved,
.comment-metadata-chip.status-resolved {
  background: #e5f3e9;
  color: #286640;
}

.comment-metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.comment-metadata-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  padding: 3px 7px;
  border: 1px solid #ddcfc0;
  border-radius: 999px;
  background: #f7f0e8;
  color: #544a40;
  font-size: 11px;
  line-height: 1.25;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.comment-metadata-chip.priority-high {
  background: #fff0dd;
  color: #945414;
}

.comment-metadata-chip.priority-low {
  background: #edf3f7;
  color: #456176;
}

.comment-metadata-link:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}

.comment-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.meta-split {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: 12px;
}

.meta-split.has-comments {
  flex: 1 1 auto;
  min-height: 0;
}

.meta-top,
.meta-bottom {
  flex: 1 1 50%;
  overflow: hidden;
  min-height: 0;
}

.meta-top {
  padding-bottom: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
}

.meta-split.has-comments .meta-top {
  flex: 2 1 0;
}

.meta-split.has-comments .meta-bottom {
  flex: 1 1 0;
  border-top: 1px dashed #d8cbbb;
  padding: 12px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px #e6dbcf;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.meta-split.no-comments {
  height: 100%;
  min-height: 0;
}

.meta-split.no-comments .meta-bottom {
  display: none;
}

.meta-bottom .comment-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  max-height: none;
  padding-bottom: 6px;
  box-sizing: border-box;
}

.meta-bottom .comment-row:last-child {
  margin-bottom: 0;
}

.meta-bottom .comment-filter {
  margin-bottom: 4px;
}

#metaCommentsSection,
.meta-comments-resizable {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.meta-comments-resizable {
  min-height: 0;
  max-height: none;
}

#metaCommentsSection {
  min-height: 0;
  max-height: none;
}

:is(#metaPanel, #pinnedReviewPanel, #documentReviewPanel).meta-standard-split-mode .meta-standard-split.mode-comments .meta-bottom {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

:is(#metaPanel, #pinnedReviewPanel, #documentReviewPanel).meta-standard-split-mode .meta-standard-split.mode-comments .meta-comments-resizable {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  max-height: none;
}

:is(#metaPanel, #pinnedReviewPanel, #documentReviewPanel).meta-standard-split-mode .meta-standard-split.mode-comments .comment-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  max-height: none;
}

.meta-comments-resizable .comment-list,
#metaCommentsSection .comment-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  max-height: none;
}

.meta-split.no-comments .meta-top {
  flex: 1 1 auto;
}

:is(#metaPanel, #pinnedReviewPanel, #documentReviewPanel).meta-standard-split-mode .meta-review-workspace {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}

:is(#metaPanel, #pinnedReviewPanel, #documentReviewPanel).meta-standard-split-mode .meta-review-workspace.mode-both {
  display: block;
  overflow-y: auto;
}

:is(#metaPanel, #pinnedReviewPanel, #documentReviewPanel).meta-standard-split-mode .meta-review-workspace.mode-both :is(.meta-top, .meta-bottom, .meta-comments-resizable, .comment-list) {
  height: auto;
  overflow: visible;
  flex: none;
}

:is(#metaPanel, #pinnedReviewPanel, #documentReviewPanel).meta-standard-split-mode .meta-review-workspace.mode-both .meta-bottom {
  margin-top: 20px;
  padding: 0;
}

:is(#metaPanel, #pinnedReviewPanel, #documentReviewPanel).meta-standard-split-mode .meta-review-workspace.mode-review {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.meta-review-workspace.mode-review .meta-top,
.meta-review-workspace.mode-review .review-summary-section {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.meta-review-workspace.mode-review .review-summary-items {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  overscroll-behavior-y: contain;
}

.meta-review-workspace .review-summary-controls,
.meta-review-workspace .review-summary-pagination {
  flex: none;
}

.review-summary-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.review-summary-row > .review-summary-item,
.review-summary-row > .review-summary-unassigned-item {
  flex: 1;
  min-width: 0;
}

.review-summary-row .review-summary-item > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  list-style: none;
}

.review-summary-row .review-summary-item > summary::-webkit-details-marker { display: none; }
.review-summary-chevron { width: 16px; height: 16px; flex: none; }
.review-summary-item[open] > summary .review-summary-chevron { transform: rotate(90deg); }
.review-summary-identity { flex: 1; min-width: 0; }
.review-summary-shortcut { flex: none; margin-top: 12px; }
.review-summary-pagination, .review-summary-page-actions { display: flex; align-items: center; gap: 6px; }
.review-summary-pagination { justify-content: space-between; flex-wrap: wrap; }
.review-summary-pagination .review-summary-result { padding: 10px 0; }
.comment-work-item-shortcut { display: inline-flex; align-items: center; gap: 6px; }
.comment-work-item-shortcut .btn-icon { flex: none; }

.danger {
  background: #b74a3a;
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
}

.danger:hover {
  background: #a13f31;
}

.comment-entry {
  border: 1px solid #e2d7c9;
  background: #fffaf5;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 8px;
}

.comment-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.comment-entry-body {
  font-size: 13px;
  color: var(--ink);
}

.icon-btn.small {
  padding: 2px 6px;
  border-radius: 8px;
}

.comment-bubble.closed {
  filter: grayscale(1) brightness(0.85);
  opacity: 0.3;
}

.comment-bubble.closed.comment-bubble-navigation-highlight {
  filter: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .comment-bubble.closed.comment-bubble-navigation-highlight {
    filter:
      drop-shadow(0 0 2px #ffffff)
      drop-shadow(0 0 7px #df701c);
  }
}

.comment-anchor {
  display: inline-block;
  width: 0;
  height: 0;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 800;
    margin-bottom: 8px;
    margin-top: 12px;
    font-size: 16px;
}

.panel-actions {
  display: flex;
  gap: 6px;
}

.panel-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.tab-btn {
  background: #efe7dd;
  border: 1px solid var(--muted);
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 12px;
}

.tab-btn.active {
  background: var(--accent);
  color: #fff;
}

.view {
  display: none;
  min-height: 0;
}

.view.active {
  display: flex !important;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.main > .view:not(#documentsView, #workItemsView, #homeView, #projectHomeView, #testingView, #variablesView) {
  padding: var(--view-padding, var(--ui-space-3));
  box-sizing: border-box;
}

#profileView.active {
  overflow: auto;
  padding-right: 4px;
}

.tree {
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  justify-content: flex-start;
  margin-bottom: 10px;
}

.tree-item {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  justify-content: space-between;
}

.tree-item .tree-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.folder-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%236b5b4b%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M3%206a2%202%200%200%201%202-2h3.93a2%202%200%200%201%201.664.89l.812%201.22A2%202%200%200%200%2013.07%207H19a2%202%200%200%201%202%202v9a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V6z%22%2F%3E%3C%2Fsvg%3E");
}

.tree-item.folder-open .folder-icon {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%236b5b4b%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M10%204H6a2%202%200%200%200-2%202v12a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2v-4m-8-2%208-8m0%200v5m0-5h-5%22%2F%3E%3C%2Fsvg%3E");
}

.tree-item.active {
  background: #efe7dd;
}

.tree-children {
  margin-left: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tree-children.collapsed {
  display: none;
}

.document-tree {
  flex: 1;
  min-height: 0;
  overflow: auto;
  gap: 0;
  padding: 1px 2px 8px;
}

.document-tree-node {
  min-width: 0;
}

.document-tree .document-tree-row {
  position: relative;
  min-width: 0;
  min-height: 32px;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid transparent;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    opacity 140ms ease;
}

.document-tree .document-tree-folder {
  justify-content: flex-start;
  gap: 4px;
  padding: 0 4px;
  border-radius: 6px;
}

.document-tree .document-tree-folder .tree-label {
  min-width: 0;
  flex: 1;
  gap: 8px;
}

.document-tree .document-tree-folder .folder-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.document-tree-folder-name {
  overflow-wrap: anywhere;
}

.document-tree-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}

.document-tree-toggle::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  transition: transform 140ms ease;
}

.document-tree-folder.folder-open .document-tree-toggle::before {
  transform: rotate(90deg);
}

.document-tree-toggle:hover:not(:disabled),
.document-tree-toggle:focus-visible {
  background: #e7ddd2;
}

.document-tree-toggle:focus-visible {
  outline: 1px solid #6f6257;
  outline-offset: 1px;
}

.document-tree-toggle:disabled {
  cursor: default;
}

.document-tree-toggle:disabled::before {
  visibility: hidden;
}

.document-tree .document-tree-children {
  position: relative;
  margin-left: 12px;
  padding-left: 4px;
  border-left: 1px solid #e3d8cc;
  gap: 0;
}

.document-tree .document-tree-document {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  --doc-item-bg: #f7f1e9;
}

.document-tree .document-tree-document.active {
  background: #efe7dd;
  --doc-item-bg: #efe7dd;
}

.document-tree .document-tree-document .doc-label {
  width: 100%;
  min-width: 0;
  gap: 8px;
}

.document-tree .document-tree-document .doc-icon {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}

.document-tree .doc-title-text {
  white-space: normal;
  overflow-wrap: anywhere;
}

.document-tree .doc-text {
  line-height: 1.4;
}

.document-tree .doc-title-text::after {
  display: none;
}

.document-tree-row.is-dragging {
  opacity: 0.42;
}

.document-tree-row.is-drop-before::before,
.document-tree-row.is-drop-after::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 4px;
  right: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.document-tree-row.is-drop-before::before {
  top: -3px;
}

.document-tree-row.is-drop-after::after {
  bottom: -3px;
}

.document-tree-row.is-drop-inside {
  border-color: var(--accent);
  background: rgba(45, 91, 78, 0.1);
}

.document-tree.is-drop-container,
.document-tree-children.is-drop-container {
  background: rgba(45, 91, 78, 0.06);
  border-radius: 8px;
}

.group-toggle {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%236b5b4b%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m17%2010-5%205-5-5%22%2F%3E%3C%2Fsvg%3E");
}

.group-toggle:not(.has-children) {
  opacity: 0.3;
}

.tree-item.group-collapsed .group-toggle {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%236b5b4b%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m10%207%205%205-5%205%22%2F%3E%3C%2Fsvg%3E");
}

.project-icon {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid #d6c8b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  background-color: #fffaf5;
}

.project-icon[data-icon-key="icon-01"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%232d5b4e%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M20.5%209.035a9.004%209.004%200%200%200-17%200m17%200c.324.928.5%201.926.5%202.965a8.988%208.988%200%200%201-.5%202.966m0-5.931h-17m0%200A8.987%208.987%200%200%200%203%2012a8.99%208.99%200%200%200%20.5%202.966m0%200a9.004%209.004%200%200%200%2017%200m-17%200h17%22%2F%3E%3Cpath%20stroke%3D%22%232d5b4e%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M12%2021c4.97-4.97%204.97-13.03%200-18-4.97%204.97-4.97%2013.03%200%2018z%22%2F%3E%3C%2Fsvg%3E");
}

.project-icon[data-icon-key="icon-02"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%23a15333%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m4%208%208-5%204%202.5M4%208v8l8%205M4%208l4%202.5m4%202.5%208-5m-8%205v8m0-8-4-2.5M20%208v8l-8%205m8-13-4-2.5m-8%205%208-5%22%2F%3E%3C%2Fsvg%3E");
}

.project-icon[data-icon-key="icon-03"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%20stroke%3D%22%233b6ea8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20stroke%3D%22%233b6ea8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M12%208v5m0%203v0%22%2F%3E%3C%2Fsvg%3E");
}

.project-icon[data-icon-key="icon-04"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%229%22%20r%3D%227%22%20stroke%3D%22%238a3d7a%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20stroke%3D%22%238a3d7a%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M7%2014v6.234a1%201%200%200%200%201.514.857l2.972-1.782a1%201%200%200%201%201.028%200l2.972%201.782A1%201%200%200%200%2017%2020.234V14%22%2F%3E%3C%2Fsvg%3E");
}

.project-icon[data-icon-key="icon-05"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%23a1322f%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M17%204c-3.2%200-5%202.667-5%204%200-1.333-1.8-4-5-4S3%206.667%203%208c0%207%209%2012%209%2012s9-5%209-12c0-1.333-.8-4-4-4z%22%2F%3E%3C%2Fsvg%3E");
}

.project-icon[data-icon-key="icon-06"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%235a7d9a%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M4%2014%2014%203v7h6L10%2021v-7H4z%22%2F%3E%3C%2Fsvg%3E");
}

.project-icon[data-icon-key="icon-07"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%238d6b4f%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M8%205H6a2%202%200%200%200-2%202v12a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V7a2%202%200%200%200-2-2h-2M8%205v0a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v0M8%205v0a2%202%200%200%200%202%202h4a2%202%200%200%200%202-2v0%22%2F%3E%3Cpath%20stroke%3D%22%238d6b4f%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m9%2014%202%202%204-5%22%2F%3E%3C%2Fsvg%3E");
}

.project-icon[data-icon-key="icon-08"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%236b5b4b%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M19%2020H5c-1.6%200-2-1.333-2-2V6a2%202%200%200%201%202-2h10a2%202%200%200%201%202%202v6m2%208c-.667%200-2-.4-2-2v-6m2%208c1.6%200%202-1.333%202-2v-6h-4%22%2F%3E%3C%2Fsvg%3E");
}

.project-icon[data-icon-key="icon-09"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%235d7a6a%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M9%205H7a2%202%200%200%200-2%202v2m4-4V3m0%202h6m0%200h2a2%202%200%200%201%202%202v10a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2v-2M15%205V3M9%2021v-2m6%202v-2M5%2015H3m2%200V9m0%200H3m18%206h-2m2-6h-2m-6%201h-2a1%201%200%200%200-1%201v2a1%201%200%200%200%201%201h2a1%201%200%200%200%201-1v-2a1%201%200%200%200-1-1z%22%2F%3E%3C%2Fsvg%3E");
}

.project-icon[data-icon-key="icon-10"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%20stroke%3D%22%238b7d5a%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20stroke%3D%22%238b7d5a%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m9.879%209.879%206.364-2.122-2.122%206.364-6.364%202.122L9.88%209.879z%22%2F%3E%3C%2Fsvg%3E");
}

.project-icon[data-icon-key="icon-11"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%234b6f85%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M5%2012h7m7%200h-7m0%200V5m0%207v7%22%2F%3E%3C%2Fsvg%3E");
}

.project-icon[data-icon-key="icon-12"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%238a5a5a%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M5%2012h14%22%2F%3E%3C%2Fsvg%3E");
}

.project-icon[data-icon-key="icon-13"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%236a7b8a%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M12%2012%207%207m5%205%205%205m-5-5%205-5m-5%205-5%205%22%2F%3E%3C%2Fsvg%3E");
}

.project-icon[data-icon-key="icon-14"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%237b6a8a%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M3%206a2%202%200%200%201%202-2h3.93a2%202%200%200%201%201.664.89l.812%201.22A2%202%200%200%200%2013.07%207H19a2%202%200%200%201%202%202v9a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V6z%22%2F%3E%3C%2Fsvg%3E");
}

.project-icon[data-icon-key="icon-15"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%229%22%20r%3D%224%22%20stroke%3D%22%237a844a%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20stroke%3D%22%237a844a%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M16%2019c0-3.314-3.134-6-7-6s-7%202.686-7%206m13-6a4%204%200%201%200-3-6.646%22%2F%3E%3Cpath%20stroke%3D%22%237a844a%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M22%2019c0-3.314-3.134-6-7-6-.807%200-2.103-.293-3-1.235%22%2F%3E%3C%2Fsvg%3E");
}

.project-icon[data-icon-key="icon-16"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%236a4a7a%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M3%2012V8a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202v4M3%2012h18M3%2012v4a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2v-4M6%209h.01M6%2015h.01M9%209h.01M9%2015h.01%22%2F%3E%3C%2Fsvg%3E");
}

.project-icon[data-icon-key="icon-17"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%235a6b4a%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M3%208V6a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202v2M3%208v6m0-6h6m12%200v6m0-6H9m12%206v4a2%202%200%200%201-2%202H9m12-6H9m-6%200v4a2%202%200%200%200%202%202h4m-6-6h6m0-6v6m0%200v6m6-12v12%22%2F%3E%3C%2Fsvg%3E");
}

.project-icon[data-icon-key="icon-18"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%23864f3f%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M3%2018V9a2%202%200%200%201%202-2h.93a2%202%200%200%200%201.664-.89l.812-1.22A2%202%200%200%201%2010.07%204h3.86a2%202%200%200%201%201.664.89l.812%201.22A2%202%200%200%200%2018.07%207H19a2%202%200%200%201%202%202v9a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2213%22%20r%3D%223%22%20stroke%3D%22%23864f3f%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E");
}

.project-icon[data-icon-key="icon-19"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%234a7a6b%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M9%206H5a2%202%200%200%200-2%202v8a2%202%200%200%200%202%202h4M9%206v12M9%206h6M9%2018h6m0%200h4a2%202%200%200%200%202-2V8a2%202%200%200%200-2-2h-4m0%2012V6%22%2F%3E%3C%2Fsvg%3E");
}

.project-icon[data-icon-key="icon-20"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%237a4a4a%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M12.005%2011.995v.01m0-4.01v.01m0%207.99v.01%22%2F%3E%3C%2Fsvg%3E");
}

.icon-picker {
  display: grid;
  grid-template-columns: repeat(5, 36px);
  gap: 10px;
}

.icon-picker-item {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid #d6c8b8;
  background: #fffaf5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.icon-picker-item .project-icon {
  width: 20px;
  height: 20px;
}

#projectIconPicker {
  grid-template-columns: repeat(auto-fill, 32px);
  gap: 6px;
  width: 100%;
}

#projectIconPicker .icon-picker-item {
  width: 32px;
  height: 32px;
  padding: 4px;
  border-radius: 6px;
}

.project-icon[data-icon-key="custom"] {
  background-size: contain;
}

.project-icon-upload {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

#projectEditIconPreview {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.project-icon-upload input {
  max-width: 100%;
  min-width: 0;
}

.project-edit-readonly-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid #9bbfe1;
  border-radius: 9px;
  background: #eaf4ff;
  color: #173f63;
  line-height: 1.4;
}

.project-edit-readonly-notice > span:last-child {
  display: grid;
  gap: 2px;
}

.project-edit-readonly-notice-icon {
  display: inline-grid;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: #2d6f9f;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.project-edit-readonly-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.project-edit-readonly-value {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--border, #d6c8b8);
  border-radius: 9px;
  background: var(--canvas, #fffaf5);
}

.project-edit-readonly-value > span:first-child {
  color: var(--ink-soft, #5f554c);
  font-size: 12px;
}

.project-edit-readonly-value strong {
  overflow-wrap: anywhere;
}

.project-edit-readonly-icon-value {
  align-content: start;
}

#projectEditReadOnlyIconPreview {
  width: 28px;
  height: 28px;
}

/* Project editing keeps metadata and immediate membership changes in separate tabs. */
.project-edit-heading { display: grid; gap: 4px; }
.project-edit-body { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.project-edit-tabs { display: flex; gap: 24px; flex: 0 0 auto; }
.project-edit-tabs .tab-btn { display: inline-flex; align-items: center; gap: 8px; }
#projectEditDetailsPanel { padding: 4px 0 12px; }
#projectEditFields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
#projectEditFields > .field:first-child, #projectEditFields > .field:last-child { grid-column: 1 / -1; }
#projectEditFields .field { margin: 0; min-width: 0; }
#projectEditFields .icon-picker { max-height: 124px; overflow: auto; }
.project-members { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; }
.project-members.has-member-picker { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; }
.project-members-main { min-width: 0; }
.project-members-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.project-members-search { flex: 1; max-width: 320px; min-width: 120px; margin: 0; }
.has-member-picker #projectMemberPickerToggle { display: none; }
.project-members-table-scroll { max-height: 390px; overflow: auto; overscroll-behavior: contain; }
.project-members-table { width: 100%; border-collapse: collapse; }
.project-members-table th { position: sticky; top: 0; z-index: 1; text-align: left; }
.project-members-table th, .project-members-table td { padding: 10px 12px; vertical-align: middle; }
.project-members-table td { height: 56px; overflow-wrap: anywhere; }
.project-members-table th:last-child, .project-members-table td:last-child { text-align: right; }
.project-members-table .project-member-role-badges { justify-content: flex-start; }
.project-members-table .project-member-identity .project-member-username { display: none; }
.project-members-table .project-member-identity { min-width: 130px; }
.project-member-controls { display: flex; flex-direction: column; align-self: start; gap: 10px; padding-left: 24px; min-width: 0; }
.project-member-controls .field, .project-member-controls p { margin: 0; }
.project-member-controls-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.project-member-selection-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.project-member-selection-heading label { display: flex; align-items: center; gap: 8px; }
.project-member-candidates { max-height: clamp(96px, calc(100dvh - 610px), 220px); overflow: auto; overscroll-behavior: contain; }
.project-member-candidate { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 6px; cursor: pointer; }
.project-member-candidate > input, .project-member-selection-heading input { flex: 0 0 auto; }
.project-member-candidate .project-member-identity { flex: 1; }
.project-member-identity { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; }
.project-member-avatar { display: inline-grid; width: 30px; height: 30px; place-items: center; flex: none; text-transform: uppercase; }
.project-member-name { display: grid; gap: 2px; min-width: 0; }
.project-member-display-name, .project-member-username { overflow-wrap: anywhere; }
.project-member-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.project-member-role-options, .project-member-role-badges { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.project-member-role-option { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; max-width: 100%; padding: 4px 7px; cursor: pointer; line-height: 1.3; overflow-wrap: anywhere; }
.project-member-role-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.project-member-role-check { display: inline-grid; width: 16px; height: 16px; place-items: center; }
.project-member-role-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 7px; }
.project-members-empty { padding: 20px 8px; text-align: center; }
.project-member-add { width: 100%; }
.project-edit-actions #projectEditDelete { margin-right: auto; }
@media (min-width: 621px) {
  .project-members { flex: 1; }
  .project-members-main { display: flex; flex-direction: column; min-height: 0; }
  .project-members-toolbar, .project-members-main > .meta-subtle { flex-shrink: 0; }
  .project-members-table-scroll { flex: 1 1 390px; min-height: 0; max-height: none; }
  .project-member-controls { align-self: stretch; min-height: 0; overflow-y: auto; }
  .project-member-controls > * { flex-shrink: 0; }
  .project-member-candidates { flex: 1 0 96px; max-height: none; }
}
@media (max-width: 900px) {
  .project-members.has-member-picker { grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; }
  .project-member-controls { padding-left: 16px; }
  .project-member-username-column { display: none; }
  .project-members-table .project-member-identity .project-member-username { display: block; }
}
@media (max-width: 620px) {
  #projectEditFields, .project-edit-readonly-summary { grid-template-columns: 1fr; }
  .project-members.has-member-picker { display: flex; flex-direction: column; gap: 20px; }
  .project-member-controls { order: -1; width: 100%; padding: 0 0 20px; }
  .project-member-candidates { max-height: 220px; }
  .project-members-toolbar { flex-wrap: wrap; }
  .project-members-search { max-width: none; }
  .project-members-table th, .project-members-table td { padding: 8px 4px; }
  .project-members-table .project-member-identity { min-width: 0; }
  .project-members-table .project-member-avatar { display: none; }
  .project-members-table .project-member-identity { grid-template-columns: minmax(0, 1fr); }
  .project-member-actions { flex-wrap: wrap; }
}


.icon-picker-item.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(45, 91, 78, 0.25);
}

#documentList .list-item {
  padding: 6px 8px;
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  --doc-item-bg: #f7f1e9;
}

#documentList .list-item.active {
  background: #efe7dd;
  --doc-item-bg: #efe7dd;
}

#documentList .doc-label {
  width: 100%;
  min-width: 0;
}

.versions-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.versions-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.versions-filter input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.versions-diff-hint {
  margin: 4px 0 10px;
  color: var(--muted);
  font-size: 0.9rem;
}

#versionsList {
  display: block;
  overflow-x: auto;
}

.versions-history-table {
  width: 100%;
  /* Compact action icons let all six columns fit the desktop dialog. */
  min-width: 640px;
  border-collapse: collapse;
  text-align: left;
}

.versions-history-table :is(th, td) {
  padding: var(--ui-space-1) var(--ui-space-2);
  border-bottom: 1px solid var(--muted);
  vertical-align: middle;
}

.versions-history-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--canvas);
  white-space: nowrap;
}

.versions-history-table :is(th:first-child, td:first-child) {
  width: 1%;
  text-align: center;
}

.version-item {
  height: var(--ui-control-height);
}

.version-item.is-version {
  background: var(--ui-info-soft);
}

.version-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

.version-item-kind {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #efe7dd;
  color: #5b5046;
  font-size: 0.75rem;
  font-weight: 700;
}

.version-item-kind.is-version {
  border: 1px solid #9db9e8;
  background: #dce9ff;
  color: #174a92;
}

.version-item-actions {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  flex-wrap: wrap;
}

.version-item-hash {
  font-family: ui-monospace, Consolas, monospace;
  max-width: 220px;
  overflow-wrap: anywhere;
}

.version-item-actions button,
.version-item-hash button {
  white-space: nowrap;
}

.app-starting #viewLoadIndicator,
.view-load-indicator.is-history-route {
  inset: 0;
  z-index: 200;
  width: auto;
  max-width: none;
  transform: none;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: #efe7dd;
  box-shadow: none;
  backdrop-filter: none;
  color: var(--ink);
  font-size: 15px;
}

.app-starting #viewLoadIndicator::before,
.view-load-indicator.is-history-route::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(360px, calc(100vw - 40px));
  height: 64px;
  border: 1px solid var(--muted);
  border-radius: 12px;
  background: var(--canvas);
  box-shadow: 0 10px 30px rgba(47, 42, 37, 0.14);
}

.app-starting #viewLoadIndicator > *,
.view-load-indicator.is-history-route > * {
  position: relative;
  z-index: 1;
}

.project-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.project-fav {
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  color: #9b8d7c;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 16px 16px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 16px 16px;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%229%22%20r%3D%227%22%20stroke%3D%22%232d5b4e%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20stroke%3D%22%232d5b4e%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M7%2014v6.234a1%201%200%200%200%201.514.857l2.972-1.782a1%201%200%200%201%201.028%200l2.972%201.782A1%201%200%200%200%2017%2020.234V14%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%229%22%20r%3D%227%22%20stroke%3D%22%232d5b4e%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20stroke%3D%22%232d5b4e%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M7%2014v6.234a1%201%200%200%200%201.514.857l2.972-1.782a1%201%200%200%201%201.028%200l2.972%201.782A1%201%200%200%200%2017%2020.234V14%22%2F%3E%3C%2Fsvg%3E");
  background-color: currentColor;
}

.project-item:hover .project-fav,
.project-fav.active {
  opacity: 1;
}

.project-fav.active {
  color: #c08b2c;
}

.doc-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.doc-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
  min-width: 0;
  flex: 1;
}

.doc-title-text {
  font-weight: 600;
  position: relative;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-title-text::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 24px;
  height: 100%;
  pointer-events: none;
}

.doc-type-badge {
  font-size: 11px;
  color: var(--ink-soft);
  background: #f1e9df;
  border: 1px solid var(--muted);
  padding: 1px 6px;
  border-radius: 999px;
  display: inline-flex;
  width: fit-content;
}

.doc-icon {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #efe7dd;
  border: 1px solid var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

.doc-icon[data-doc-type="test"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%232d5b4e%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M8%203h2m6%200h-2m0%200v5.46a2%202%200%200%200%20.272%201.007L15.75%2012l3.495%205.992c.778%201.334-.184%203.008-1.727%203.008H6.482c-1.544%200-2.505-1.674-1.727-3.008L8.25%2012l1.478-2.533A2%202%200%200%200%2010%208.459V3m4%200h-4%22%2F%3E%3C%2Fsvg%3E");
}

.doc-icon[data-doc-type="specification"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%232d5b4e%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M19%2020H5c-1.6%200-2-1.333-2-2V6a2%202%200%200%201%202-2h10a2%202%200%200%201%202%202v6m2%208c-.667%200-2-.4-2-2v-6m2%208c1.6%200%202-1.333%202-2v-6h-4%22%2F%3E%3C%2Fsvg%3E");
}

.doc-layout {
  display: grid;
  grid-template-columns:
    minmax(var(--doc-sidebar-min-width), var(--doc-sidebar-width)) minmax(var(--doc-main-min-width), 1fr);
  gap: 0;
  min-height: 0;
  height: 100%;
  flex: 1;
}

.doc-editor {
  background: var(--canvas);
  border-radius: 0;
  padding: 12px;
  border: 1px solid var(--muted);
  box-shadow: 0 10px 30px var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.mobile-editing-notice {
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #e0bd68;
  border-radius: 9px;
  background: #fff4d8;
  color: #6b4b0d;
  font-size: 12px;
  line-height: 1.35;
}

.mobile-editing-notice-close {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(107, 75, 13, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.48);
  color: inherit;
  cursor: pointer;
}

.doc-empty {
  flex: 1;
  display: grid;
  place-items: center;
  background: #f3ede4;
  border-radius: 0;
  border: 0;
}

.doc-empty-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  max-width: 420px;
  text-align: center;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--muted);
}

.doc-empty-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.doc-empty-text {
  color: var(--ink-soft);
  font-size: 13px;
}

.doc-sidebar {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.doc-sidebar #documentList {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.doc-sidebar #folderTree.document-tree {
  margin-bottom: 0;
}

.doc-sidebar > .panel-header {
  align-items: center;
  padding-bottom: 8px;
}

.document-tree-create {
  flex: 0 0 auto;
  margin-bottom: 8px;
  width: 100%;
}

.document-tree-create .btn-label {
  flex: 1;
}

.document-tree-create-chevron {
  transform: rotate(90deg);
}

.document-sidebar-reveal {
  display: none;
}

.document-sidebar-flag {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 120px;
  padding: 10px 7px;
  border: 1px solid var(--muted);
  border-left: 0;
  border-radius: 0 10px 10px 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 2px 4px 10px rgba(33, 29, 25, 0.12);
  cursor: pointer;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.document-sidebar-flag:hover {
  background: var(--sidebars);
  transform: translateX(3px);
}

.document-sidebar-flag:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (min-width: 1201px) {
  .doc-sidebar {
    z-index: 1;
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition:
      transform 180ms ease,
      opacity 180ms ease,
      visibility 0s linear 0s;
  }

  .document-sidebar-collapsed .doc-layout {
    grid-template-columns: 0 minmax(0, 1fr);
    column-gap: 0;
  }

  .document-sidebar-collapsed .doc-sidebar {
    width: max(var(--doc-sidebar-min-width), var(--doc-sidebar-width));
    transform: translateX(calc(-100% - var(--workspace-grid-gap)));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      transform 180ms ease,
      opacity 180ms ease,
      visibility 0s linear 180ms;
  }

  .document-sidebar-collapsed .document-sidebar-reveal {
    display: flex;
    position: absolute;
    z-index: 3;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .workspace.document-toolbar-active.document-sidebar-collapsed > .document-toolbar-shell {
    margin-left: 0;
  }
}

.document-list-empty {
  display: flex;
  min-height: 100%;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 8px 26px;
  text-align: center;
}

.document-list-empty-graphic {
  width: 100%;
  height: auto;
  margin: -6px auto 12px;
  overflow: visible;
}

.document-list-empty-arrow {
  fill: none;
  stroke: #9b8b78;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 7 8;
}

.document-list-empty-rays path {
  fill: none;
  stroke: #c6b7a4;
  stroke-width: 4;
  stroke-linecap: round;
}

.document-list-empty-title {
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.document-list-empty-text {
  max-width: 250px;
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.55;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.document-toolbar-shell > .toolbar {
  width: 100%;
  min-height: var(--document-toolbar-base-height);
  height: auto;
  flex-wrap: nowrap;
  gap: 5px 2px;
  padding: 5px;
  border: 1px solid #ded7ce;
  border-radius: 9px 0 0 9px;
  background: #fbf9f6;
  overflow: visible;
}

.toolbar .icon {
  filter: none;
}

:is(.document-toolbar-shell, .project-home-editor-area) .toolbar-group {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  min-height: 32px;
  padding-right: 7px;
  margin-right: 5px;
  border-right: 1px solid #d8d0c7;
}

:is(.document-toolbar-shell, .project-home-editor-area) .toolbar-group:last-of-type {
  padding-right: 0;
  margin-right: 0;
  border-right: 0;
}

.tool-btn,
.icon-btn {
  background: #efe7dd;
  border: 1px solid var(--muted);
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
}

:is(.document-toolbar-shell, .project-home-editor-area) .toolbar .tool-btn,
:is(.document-toolbar-shell, .project-home-editor-area) .toolbar .icon-btn {
  padding: 1px;
  font-size: 12px;
  min-height: 32px;
  line-height: 1.1;
  border-color: transparent;
  background: transparent;
  border-radius: 6px;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

:is(.document-toolbar-shell, .project-home-editor-area) .toolbar .tool-btn:hover:not(:disabled):not(.tool-context-disabled),
:is(.document-toolbar-shell, .project-home-editor-area) .toolbar .icon-btn:hover:not(:disabled):not(.tool-context-disabled) {
  border-color: #ddd4ca;
  background: #f5f1ec;
  box-shadow: inset 0 0 0 1px rgba(91, 79, 67, 0.04);
}

:is(.document-toolbar-shell, .project-home-editor-area) .toolbar .tool-btn.is-active {
  border-color: #7fa596;
  background: #dcebe6;
  color: #204d40;
  box-shadow: inset 0 0 0 1px rgba(45, 91, 78, 0.08);
}

:is(.document-toolbar-shell, .project-home-editor-area) .toolbar .tool-btn.is-active:hover:not(:disabled):not(.tool-context-disabled) {
  border-color: #688f81;
  background: #cfe3dc;
}

:is(.document-toolbar-shell, .project-home-editor-area) .toolbar .tool-btn:focus-visible,
:is(.document-toolbar-shell, .project-home-editor-area) .toolbar .icon-btn:focus-visible,
:is(.document-toolbar-shell, .project-home-editor-area) .toolbar .tool-select:focus-visible {
  outline: 2px solid #2d5b4e;
  outline-offset: 1px;
}

:is(.document-toolbar-shell, .project-home-editor-area) .toolbar .tool-btn:disabled,
:is(.document-toolbar-shell, .project-home-editor-area) .toolbar .icon-btn:disabled,
:is(.document-toolbar-shell, .project-home-editor-area) .toolbar .tool-btn.tool-context-disabled,
:is(.document-toolbar-shell, .project-home-editor-area) .toolbar .icon-btn.tool-context-disabled,
:is(.document-toolbar-shell, .project-home-editor-area) .toolbar .tool-btn[aria-disabled="true"],
:is(.document-toolbar-shell, .project-home-editor-area) .toolbar .icon-btn[aria-disabled="true"] {
  background: #e5ddd2;
  border-color: #c8beaf;
  color: #948877;
  cursor: not-allowed;
  opacity: 0.62;
  box-shadow: none;
}

:is(.document-toolbar-shell, .project-home-editor-area) .toolbar .tool-btn:disabled .icon,
:is(.document-toolbar-shell, .project-home-editor-area) .toolbar .icon-btn:disabled .icon,
:is(.document-toolbar-shell, .project-home-editor-area) .toolbar .tool-btn.tool-context-disabled .icon,
:is(.document-toolbar-shell, .project-home-editor-area) .toolbar .icon-btn.tool-context-disabled .icon,
:is(.document-toolbar-shell, .project-home-editor-area) .toolbar .tool-btn[aria-disabled="true"] .icon,
:is(.document-toolbar-shell, .project-home-editor-area) .toolbar .icon-btn[aria-disabled="true"] .icon {
  opacity: 0.38;
  filter: grayscale(1) brightness(0.85);
}

.tool-btn.icon-only {
  width: 36px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

:is(.document-toolbar-shell, .project-home-editor-area) .toolbar .tool-btn.icon-only {
  width: 34px;
  min-width: 34px;
  height: 32px;
}

:is(.document-toolbar-shell, .project-home-editor-area) .toolbar .tool-btn.icon-glyph {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  font-size: 17px;
  font-family: Arial, sans-serif;
}

.document-toolbar-shell .toolbar .dropdown-icon-btn {
  width: 42px;
  min-width: 42px;
  gap: 3px;
}

.document-toolbar-shell .toolbar .toolbar-format-menu-btn {
  width: 22px;
  min-width: 22px;
  padding: 0;
}

.document-toolbar-shell .toolbar .dropdown-icon-btn::after {
  content: "";
  width: 0;
  height: 0;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-top: 6px solid currentColor;
  opacity: 0.78;
}

.document-toolbar-shell .toolbar .work-item-create-smart {
  border-color: #91afa5;
  background: #dcebe6;
  box-shadow: inset 0 0 0 1px rgba(45, 91, 78, 0.06);
}

.document-toolbar-shell .toolbar .work-item-create-smart:hover:not(:disabled):not(.tool-context-disabled) {
  border-color: #779e91;
  background: #cfe3dc;
}

.document-toolbar-shell .toolbar .work-item-create-smart[data-work-item-action="convert"] {
  border-color: #6e998b;
  background: #c8e1d8;
}

.document-toolbar-shell .toolbar .toolbar-work-item-type-icon {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  font-size: 14px;
}

.document-toolbar-shell .toolbar .ai-tool-btn.icon-only {
  width: 36px;
  min-width: 36px;
  padding: 0;
}

.icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

:is(.document-toolbar-shell, .project-home-editor-area) .toolbar .icon {
  width: 22px;
  height: 22px;
}

.editor-toolbar-menu .icon {
  width: 20px;
  height: 20px;
}

.editor-toolbar-menu .icon {
  filter: none;
}

.document-toolbar-shell .toolbar-split-control {
  display: inline-flex;
  align-items: stretch;
}

.document-toolbar-shell .toolbar-split-control .work-item-create-smart {
  border-radius: 6px 0 0 6px;
}

.document-toolbar-shell .toolbar .toolbar-split-menu-btn {
  width: 20px;
  min-width: 20px;
  padding: 0;
  border-left: 1px solid #d8d0c7;
  border-radius: 0 6px 6px 0;
}

.toolbar-chevron {
  width: 0;
  height: 0;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-top: 6px solid currentColor;
  opacity: 0.78;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.document-toolbar-shell .toolbar .ai-tool-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-inline: 8px;
}

.format-brush-active :is(.doc-canvas, .mini-editor, .wi-inline-rich-surface),
.format-brush-active :is(.doc-canvas, .mini-editor, .wi-inline-rich-surface) * {
  /* Arrow plus brush remains visible over text, links and table cells. */
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M2 2v20l5-5 4 9 4-2-4-8h8Z' fill='white' stroke='%231b1b1b' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='m18 19 8-13c2-3 6 0 4 3l-9 12Z' fill='%232d5b4e' stroke='white' stroke-width='1.5'/%3E%3Cpath d='M18 19c-5 1-1 7-6 9 7 3 12-2 9-7Z' fill='%232d5b4e' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E") 2 2, copy !important;
}

.tool-select {
  padding: 6px;
  border-radius: 8px;
  border: 1px solid var(--muted);
  background: #efe7dd;
}

:is(.document-toolbar-shell, .project-home-editor-area) .toolbar .tool-select {
  padding: 4px 24px 4px 7px;
  font-size: 12px;
  min-height: 32px;
  border-color: #d8d0c7;
  background: #ffffff;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

:is(.document-toolbar-shell, .project-home-editor-area) .toolbar .tool-select:hover {
  border-color: #ddd4ca;
  background-color: #fdfbf9;
  box-shadow: inset 0 0 0 1px rgba(91, 79, 67, 0.04);
}

:is(.document-toolbar-shell, .project-home-editor-area) .toolbar .tool-style-select {
  width: 116px;
}

.document-toolbar-shell .toolbar .tool-font-size-select {
  width: 54px;
  padding-right: 18px;
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #5b4f43 50%),
    linear-gradient(135deg, #5b4f43 50%, transparent 50%);
  background-position:
    calc(100% - 9px) 50%,
    calc(100% - 5px) 50%;
  background-repeat: no-repeat;
  background-size: 4px 4px;
}

.tool-color {
  position: relative;
  z-index: 1;
}

.tool-color:has(.tool-color-popover:not([hidden])) {
  z-index: 3200;
}

.tool-color-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.document-toolbar-shell .toolbar .tool-color-btn {
  min-width: 38px;
  height: 32px;
  justify-content: center;
  padding: 4px 6px;
}

.document-toolbar-shell.toolbar-density-compact > .toolbar {
  gap: 3px 1px;
  padding: 4px;
}

.document-toolbar-shell.toolbar-density-compact .toolbar-group {
  gap: 1px;
  min-height: 28px;
  padding-right: 4px;
  margin-right: 2px;
}

.document-toolbar-shell.toolbar-density-compact .toolbar .tool-btn,
.document-toolbar-shell.toolbar-density-compact .toolbar .icon-btn,
.document-toolbar-shell.toolbar-density-compact .toolbar .tool-select {
  min-height: 28px;
  font-size: 11px;
}

.document-toolbar-shell.toolbar-density-compact .toolbar .tool-btn.icon-only {
  width: 30px;
  min-width: 30px;
  height: 28px;
}

.document-toolbar-shell.toolbar-density-compact .toolbar .tool-btn.icon-glyph {
  width: 28px;
  min-width: 28px;
  height: 28px;
  font-size: 15px;
}

.document-toolbar-shell.toolbar-density-compact .toolbar .dropdown-icon-btn {
  width: 36px;
  min-width: 36px;
  gap: 2px;
}

.document-toolbar-shell.toolbar-density-compact
  .toolbar
  .toolbar-format-menu-btn {
  width: 18px;
  min-width: 18px;
}

.document-toolbar-shell.toolbar-density-compact
  .toolbar
  .toolbar-split-menu-btn {
  width: 18px;
  min-width: 18px;
}

.document-toolbar-shell.toolbar-density-compact
  .toolbar
  .toolbar-work-item-type-icon {
  width: 21px;
  height: 21px;
  font-size: 12px;
}

.document-toolbar-shell.toolbar-density-compact
  .toolbar
  .ai-tool-btn.icon-only {
  width: 31px;
  min-width: 31px;
}

.document-toolbar-shell.toolbar-density-compact .toolbar .icon {
  width: 18px;
  height: 18px;
}

.document-toolbar-shell.toolbar-density-compact .toolbar .tool-select {
  padding: 3px 20px 3px 5px;
}

.document-toolbar-shell.toolbar-density-compact
  .toolbar
  .tool-style-select {
  width: 98px;
}

.document-toolbar-shell.toolbar-density-compact
  .toolbar
  .tool-font-size-select {
  width: 48px;
  padding-right: 16px;
  background-position:
    calc(100% - 8px) 50%,
    calc(100% - 4px) 50%;
}

.document-toolbar-shell.toolbar-density-compact .toolbar .tool-color-btn {
  min-width: 33px;
  height: 28px;
  padding: 3px 4px;
}

.document-toolbar-shell.toolbar-density-compact .toolbar .tool-color-chip {
  width: 13px;
  height: 13px;
}

.document-toolbar-shell.toolbar-density-wrapped > .toolbar {
  flex-wrap: wrap;
  align-content: flex-start;
  row-gap: 3px;
}

.document-toolbar-shell.toolbar-density-wrapped .toolbar-group {
  max-width: 100%;
  flex-wrap: wrap;
}

.tool-color-chip {
  width: 15px;
  height: 15px;
  border-radius: 2px;
  border: 1px solid #b9aca0;
  background: #1d1b1a;
  display: inline-block;
}

.tool-color-chip.is-empty {
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 45%, #d63b3b 45%, #d63b3b 55%, #ffffff 55%, #ffffff 100%);
}

.tool-color-chip.is-mixed {
  background: repeating-linear-gradient(
    135deg,
    #ffffff 0,
    #ffffff 3px,
    #7f756a 3px,
    #7f756a 6px
  ) !important;
}

.tool-color-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 210px;
  padding: 8px;
  border: 1px solid #d8cbbb;
  border-radius: 10px;
  background: #fffaf5;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.14);
  z-index: 3200;
  display: grid;
  gap: 8px;
}

.tool-color-title {
  font-size: 11px;
  color: var(--ink-soft);
  font-weight: 700;
}

.tool-color-grid {
  display: block;
}

.tool-color-palette-grid,
.tool-color-recent-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.tool-color-recent {
  display: grid;
  gap: 7px;
}

.tool-color-separator {
  height: 1px;
  margin-top: 8px;
  background: #d8cbbb;
}

.tool-color-swatch {
  width: 26px;
  height: 22px;
  border: 1px solid #c4b6a5;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
}

.tool-color-clear {
  width: 100%;
  justify-content: center;
}

.divider {
  width: 1px;
  height: 22px;
  background: var(--muted);
  margin: 0 4px;
}

.doc-type-select {
  border: 1px solid var(--muted);
  padding: 6px 9px;
  border-radius: 8px;
  background: #fffaf5;
  font-size: 13px;
  min-width: 138px;
  min-height: 34px;
}

.inline-select {
  border: 1px solid var(--muted);
  padding: 4px 8px;
  border-radius: 8px;
  background: #fffaf5;
  font-size: 12px;
}

.template-manager-section {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #e5d7ca;
  border-radius: 12px;
  background: linear-gradient(180deg, #fffdfa 0%, #fff7ef 100%);
  margin: 12px 0;
}

.template-manager-section-accent {
  border-color: #f0c6a8;
  background: linear-gradient(180deg, #fff9f2 0%, #fff2e6 100%);
}

.template-manager-section-header {
  display: grid;
  gap: 4px;
}

.template-manager-section-header > div:first-child {
  font-weight: 700;
  color: #5d3b22;
}

.template-preview-mode-switch {
  display: inline-flex;
  gap: 6px;
  margin: 10px 0 8px;
  padding: 4px;
  border: 1px solid #e5d7ca;
  border-radius: 999px;
  background: #fffaf5;
}

.template-preview-mode-switch .tool-btn {
  min-width: 96px;
  border-radius: 999px;
}

.template-split-editor {
  display: grid;
}

.template-split-pane {
  min-width: 0;
}

.template-split-editor[data-template-view-mode="preview"] .template-split-pane-html,
.template-split-editor[data-template-view-mode="html"] .template-split-pane-preview {
  display: none;
}

.template-split-editor[data-template-view-mode="preview"] .template-split-pane-preview,
.template-split-editor[data-template-view-mode="html"] .template-split-pane-html {
  display: block;
}

.template-preview-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid #e5d7ca;
  border-radius: 10px;
  background: #fffaf5;
  margin-bottom: 8px;
}

.template-preview-toolbar-compact {
  gap: 6px;
  padding: 6px;
  position: sticky;
  top: 0;
  z-index: 2;
}

.template-preview-toolbar-group {
  display: flex;
  gap: 6px;
  align-items: center;
  padding-right: 6px;
  border-right: 1px solid #ead9c8;
}

.template-preview-toolbar-group:last-child {
  border-right: 0;
  padding-right: 0;
}

.template-preview-toolbar .tool-btn {
  min-width: 30px;
  min-height: 28px;
  padding: 4px 8px;
  font-size: 11px;
}

.document-toolbar-shell > .toolbar > .responsive-review-action {
  display: none !important;
}

.template-preview-toolbar .tool-btn.icon-only {
  width: 30px;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.template-preview-toolbar .tool-btn.is-active {
  background: #ffe4c7;
  border-color: #e28a3b;
  color: #8a4e1c;
}

.template-font-size-input {
  width: 58px;
  min-width: 58px;
  height: 30px;
  padding: 3px 6px;
}

.template-font-size-input.is-invalid {
  border-color: #b42318;
  background: #fff5f5;
}

.template-preview-italic {
  font-style: italic;
}

.template-preview-underline {
  text-decoration: underline;
}

.template-preview-color-control {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  font-size: 12px;
  color: #5d3b22;
}

.template-preview-color-control input {
  width: 36px;
  height: 28px;
  padding: 0;
  border: 1px solid #d9c1ab;
  border-radius: 8px;
  background: #fff;
}

.template-preview-surface {
  min-height: 360px;
  background: #ffffff;
}

.template-preview-chrome {
  margin-bottom: 12px;
  pointer-events: none;
  user-select: none;
}

.template-preview-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  row-gap: 4px;
  align-items: center;
}

.template-preview-header-zone {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 26px;
  white-space: pre-line;
  overflow-wrap: break-word;
}

.template-preview-header-left {
  justify-content: flex-start;
  text-align: left;
}

.template-preview-header-center {
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

.template-preview-header-right {
  justify-content: flex-end;
  text-align: right;
}

.template-preview-header-zone img {
  max-width: 100%;
  max-height: none;
  object-fit: contain;
  vertical-align: middle;
}

.template-preview-header-line {
  grid-column: 1 / -1;
  height: 1px;
  width: 100%;
  background: var(--doc-header-accent);
}

.template-preview-footer {
  margin-top: 28px;
  margin-bottom: 0;
  font-size: 10px;
}

.template-preview-footer-note {
  min-height: 14px;
  text-align: center;
  font-size: 8px;
}

.template-preview-footer-line {
  height: 1px;
  background: var(--doc-header-accent);
  margin: 3px 0;
}

.template-preview-footer-segments {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.template-preview-footer-segments > :nth-child(2) {
  text-align: center;
}

.template-preview-footer-segments > :nth-child(3) {
  text-align: right;
}

.template-preview-surface .template-toc-placeholder {
  margin: 12px 0;
  padding: 12px 14px;
  border: 2px dashed #d9c1ab;
  border-radius: 10px;
  background: linear-gradient(180deg, #fffaf5 0%, #f8efe5 100%);
  color: #7a5a41;
  font-weight: 700;
  letter-spacing: 0.02em;
}

#templateHtmlSource {
  min-height: 420px;
  width: 100%;
  resize: vertical;
  background: #ffffff;
}

.doc-page > .doc-presence {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: 12px;
  right: 12px;
  z-index: 18;
  display: flex;
  align-items: center;
  width: max-content;
  height: 30px;
  margin: 12px 12px 0 0;
  overflow: visible;
  align-self: start;
  justify-self: end;
  transition: width 220ms ease;
}

.doc-presence:empty {
  display: none;
}

.doc-presence .presence-avatar + .presence-avatar {
  margin-left: 6px;
}

.doc-presence.is-stacked {
  width: var(--presence-collapsed-width);
}

.doc-presence.is-stacked .presence-avatar {
  transition: margin-left 220ms ease, transform 220ms ease;
}

.doc-presence.is-stacked .presence-avatar + .presence-avatar {
  margin-left: -14px;
}

.doc-presence.is-stacked:hover,
.doc-presence.is-stacked:focus-within {
  width: var(--presence-expanded-width);
}

.doc-presence.is-stacked:hover .presence-avatar + .presence-avatar,
.doc-presence.is-stacked:focus-within .presence-avatar + .presence-avatar {
  margin-left: 6px;
}

.presence-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #c9c9c9;
  background: #efe7dd;
  overflow: hidden;
  position: relative;
  flex: 0 0 28px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
  transition: margin-left 220ms ease, transform 220ms ease;
  appearance: none;
  padding: 0;
  cursor: pointer;
}

.document-read-only-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #9bbfe1;
  border-radius: 9px;
  background: #eaf4ff;
  color: #173f63;
  font-size: 13px;
  line-height: 1.4;
}

.document-read-only-notice-icon {
  display: inline-grid;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: #2d6f9f;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.document-read-only-notice-copy {
  display: grid;
  gap: 2px;
}

.document-read-only-notice-copy strong {
  color: #123653;
}

.presence-avatar:hover {
  transform: translateY(-1px);
}

.presence-avatar img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.presence-avatar:focus-visible {
  outline: 2px solid #2d5b4e;
  outline-offset: 2px;
}

.presence-badge {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.38);
  border: 1px solid var(--presence-color, #c9c9c9);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  display: grid;
  place-items: center;
  pointer-events: none;
}

.presence-badge[data-mode="writing"]::before {
  content: "";
  width: 11px;
  height: 11px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%232d5b4e%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m14%206%202.293-2.293a1%201%200%200%201%201.414%200l2.586%202.586a1%201%200%200%201%200%201.414L18%2010m-4-4-9.707%209.707a1%201%200%200%200-.293.707V19a1%201%200%200%200%201%201h2.586a1%201%200%200%200%20.707-.293L18%2010m-4-4%204%204%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  opacity: 0.82;
}

.presence-badge[data-mode="viewing"]::before {
  content: "";
  width: 11px;
  height: 11px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%232d5b4e%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M12%205c-6.307%200-9.367%205.683-9.91%206.808a.435.435%200%200%200%200%20.384C2.632%2013.317%205.692%2019%2012%2019s9.367-5.683%209.91-6.808a.435.435%200%200%200%200-.384C21.368%2010.683%2018.308%205%2012%205z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%20stroke%3D%22%232d5b4e%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  opacity: 0.82;
}

#docCanvas.ProseMirror {
  outline: none;
}

/* Block selections used for dragging have their own outline, not a text highlight. */
.ProseMirror-hideselection *::selection {
  background: transparent;
}

.ProseMirror-hideselection *::-moz-selection {
  background: transparent;
}

.ProseMirror-hideselection {
  caret-color: transparent;
}

.ProseMirror-yjs-cursor {
  position: relative;
  margin-left: -1px;
  margin-right: -1px;
  border-left: 2px solid;
  border-right: 0;
  word-break: normal;
  pointer-events: none;
}

.ProseMirror-yjs-cursor>div {
  position: absolute;
  top: -1.15em;
  left: -1px;
  font-size: 0.72em;
  font-family: "Segoe UI", sans-serif;
  font-weight: 600;
  color: #ffffff;
  border-radius: 6px;
  padding: 1px 5px;
  white-space: nowrap;
  line-height: 1.2;
  user-select: none;
}

.ProseMirror-yjs-cursor-selection {
  background: rgba(161, 83, 51, 0.18);
}

.doc-page {
  --doc-workspace-background: #d7cdc1;
  background: var(--doc-workspace-background);
  padding: 24px;
  display: grid;
  grid-template-columns: minmax(max-content, 1fr);
  grid-template-rows: max-content;
  justify-items: center;
  align-items: flex-start;
  gap: 0;
  overflow: auto;
  border-radius: 12px;
  position: relative;
  min-height: 0;
  flex: 1 1 0;
  overflow-y: auto;
  overflow-x: auto;
}

.doc-sheet-stage {
  grid-column: 1;
  grid-row: 1;
  width: 210mm;
  min-height: 297mm;
  position: relative;
}

@media screen {
  .doc-page.document-loading .doc-sheet {
    background: #fff;
    filter: blur(3px);
  }

  .doc-page.document-loading .doc-sheet > * {
    visibility: hidden;
    opacity: 0;
  }

  .doc-page.document-revealing .doc-sheet {
    animation: document-sheet-reveal 240ms cubic-bezier(0.16, 1, 0.3, 1);
  }
}

@keyframes document-sheet-reveal {
  from { filter: blur(3px); opacity: 0.35; }
  to { filter: blur(0); opacity: 1; }
}

@media screen and (prefers-reduced-motion: reduce) {
  .doc-page.document-loading .doc-sheet {
    filter: none;
  }

  .doc-page.document-revealing .doc-sheet {
    animation: document-sheet-reveal-reduced 120ms ease-out;
  }
}

@keyframes document-sheet-reveal-reduced {
  from { opacity: 0.6; }
  to { opacity: 1; }
}

/* Floating TOC panel -------------------------------------------------- */
.doc-external-toc {
  position: fixed;
  top: 80px;
  right: 20px;
  width: 280px;
  max-height: 60vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fffaf5;
  border: 1px solid var(--muted);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  z-index: var(--document-floating-panel-layer);
  padding: 0;
}

.doc-toc-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 7px;
  border-bottom: 1px solid var(--muted);
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
  background: #fff5eb;
  border-radius: 9px 9px 0 0;
}

.doc-toc-panel-header:active {
  cursor: grabbing;
}

.doc-toc-panel-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.doc-toc-panel-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: var(--ink-soft);
  padding: 2px 4px;
  border-radius: 4px;
  transition: background 0.15s;
}

.doc-toc-panel-close:hover {
  background: #f2e9dd;
  color: var(--ink);
}

.doc-external-toc .toc {
  font-size: 13px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 10px;
  flex: 1 1 auto;
}

.doc-external-toc .toc-item {
  margin-bottom: 0;
  border-radius: 8px;
  padding: 3px 4px;
}

.doc-external-toc .toc-item:hover {
  background: #f2e9dd;
}

.doc-external-toc .toc-link {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: start;
}

.doc-external-toc .toc-number {
  min-width: 28px;
  font-size: 12px;
}

.doc-external-toc .toc-title {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.doc-external-toc .toc-dots,
.doc-external-toc .toc-page {
  display: none;
}
/* End floating TOC panel ---------------------------------------------- */

.doc-fullscreen-controls {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
  padding: 0;
}

.doc-zoom-control {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.doc-zoom-control input[type="range"] {
  width: 64px;
  height: 18px;
}

.doc-fit-width-button {
  width: var(--ui-control-compact);
  min-width: var(--ui-control-compact);
  height: var(--ui-control-compact);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#docEditorZoomValue {
  min-width: 38px;
  text-align: right;
}

body.doc-editor-fullscreen-mode .workspace {
  grid-template-columns: minmax(0, 1fr) var(--right-sidebar-width);
}

body.doc-editor-fullscreen-mode .workspace.sidebar-right-collapsed {
  grid-template-columns: minmax(0, 1fr) 0;
}

body.doc-editor-fullscreen-mode .workspace>.sidebar {
  display: none;
}

body.doc-editor-fullscreen-mode .main-header {
  display: none;
}

body.doc-editor-fullscreen-mode .topbar .main-header {
  display: none;
}

body.doc-editor-fullscreen-mode #documentsView {
  height: 100%;
}

body.doc-editor-fullscreen-mode #documentsView .doc-layout {
  grid-template-columns: minmax(0, 1fr);
  height: 100%;
}

body.doc-editor-fullscreen-mode #documentsView .doc-sidebar {
  display: none;
}

body.doc-editor-fullscreen-mode #documentsView .doc-editor {
  padding-bottom: 0;
}

.doc-sheet {
  width: 210mm;
  min-height: 297mm;
  background: var(--canvas);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  border: 1px solid #d7d0c1;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: top center;
}

.doc-canvas-wrapper {
  position: relative;
  width: 100%;
}

.doc-canvas {
  --doc-content-inline-padding: 22mm;
  background: transparent;
  width: 100%;
  min-height: 100%;
  margin: 0 auto;
  padding: var(--doc-content-top-padding, 12mm) var(--doc-content-inline-padding) 14mm;
  outline: none;
  position: relative;
  font-family: var(--doc-font-family);
  font-size: var(--doc-default-font-size);
  color: var(--doc-text-color);
  box-sizing: border-box;
}

.doc-canvas p {
  margin: 6px 0;
}

/* Toolbar highlights retain the text color set on their surrounding span. */
.doc-canvas mark,
.wi-inline-rich-surface mark {
  color: inherit;
}

.doc-header,
.doc-footer {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  pointer-events: none;
  color: var(--ink-soft);
  font-size: 11px;
  z-index: 2;
}

.doc-header {
  top: 6mm;
  padding: 0 18mm;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto;
  align-items: end;
  column-gap: 10px;
  row-gap: 4px;
}

.doc-header-title {
  font-weight: 700;
}

.field-img-tools {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.template-chrome-default-info {
  color: var(--ink-soft);
  font-size: 12px;
  margin-top: 4px;
}

.template-chrome-field-default textarea:disabled {
  background: #f5f5f5;
  color: var(--ink-soft);
  cursor: not-allowed;
}

.template-chrome-field-default .field-img-tools {
  opacity: 0.55;
}

.doc-header-zone {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.doc-header-left {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

.doc-header-center {
  grid-column: 2;
  grid-row: 1;
  justify-content: center;
  justify-self: center;
  text-align: center;
}

.doc-header-right {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  justify-content: flex-end;
  text-align: right;
}

.doc-header-custom img,
.doc-header-zone img {
  max-width: 100%;
  max-height: none;
  object-fit: contain;
  vertical-align: middle;
}

.doc-header-line {
  grid-column: 1 / -1;
  grid-row: 2;
  height: 1px;
  background: var(--doc-header-accent);
  width: 100%;
}

.doc-header-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
}

.doc-header-logo img {
  height: 26px;
  object-fit: contain;
}

.doc-footer {
  bottom: 6mm;
  padding: 0 18mm;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}

.doc-footer-page {
  text-align: center;
  font-weight: 700;
}

.doc-footer #docFooterVersion {
  text-align: right;
  justify-self: end;
  white-space: pre-line;
}

.doc-footer-meta,
.doc-header-meta {
  display: none;
}

.doc-canvas img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 10px 0;
}

.doc-canvas img.ProseMirror-separator {
  display: inline;
  width: 0;
  height: 0;
  margin: 0;
  max-width: 0;
  pointer-events: none;
}

.img-resizable {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.img-resizable img {
  display: block;
  max-width: 100%;
  height: auto;
}

.img-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #efe7dd;
  border: 1px solid var(--muted);
  opacity: 0;
  pointer-events: none;
}

.img-handle.tl {
  top: -6px;
  left: -6px;
  cursor: nwse-resize;
}

.img-handle.tr {
  top: -6px;
  right: -6px;
  cursor: nesw-resize;
}

.img-handle.bl {
  bottom: -6px;
  left: -6px;
  cursor: nesw-resize;
}

.img-handle.br {
  bottom: -6px;
  right: -6px;
  cursor: nwse-resize;
}

.img-resizable.active .img-handle {
  opacity: 1;
  pointer-events: auto;
}

.doc-canvas h1,
.doc-canvas h2,
.doc-canvas h3,
.doc-canvas h4,
.doc-canvas h5,
.doc-canvas h6,
.doc-canvas .doc-heading[data-heading-level] {
  font-family: var(--doc-font-family);
  margin-top: 18px;
  color: var(--doc-heading-color);
}

.doc-canvas {
  counter-reset: h1;
}

.doc-canvas h1 {
  font-size: 16pt;
  color: var(--doc-heading-color);
}

.doc-canvas h1::before {
  content: attr(data-hnum) ". ";
  color: var(--doc-heading-color);
  margin-right: 4px;
}

.doc-canvas h2 {
  font-size: 14pt;
  color: var(--doc-heading-color);
}

.doc-canvas h2::before {
  content: attr(data-hnum) " ";
  color: var(--doc-heading-color);
  margin-right: 4px;
}

.doc-canvas h3 {
  font-size: 12pt;
  color: var(--doc-heading-color);
}

.doc-canvas h3::before {
  content: attr(data-hnum) " ";
  color: var(--doc-heading-color);
  margin-right: 4px;
}

.doc-canvas h4 {
  font-size: 11pt;
  color: var(--doc-heading-color);
}

.doc-canvas h4::before {
  content: attr(data-hnum) " ";
  color: var(--doc-heading-color);
  margin-right: 4px;
}

.doc-canvas h5 {
  font-size: 10.5pt;
  color: var(--doc-heading-color);
}

.doc-canvas h6,
.doc-canvas .doc-heading[data-heading-level] {
  font-size: 10pt;
  color: var(--doc-heading-color);
}

.doc-canvas h5::before,
.doc-canvas h6::before,
.doc-canvas .doc-heading[data-heading-level]::before {
  content: attr(data-hnum) " ";
  color: var(--doc-heading-color);
  margin-right: 4px;
}

.doc-canvas .doc-heading-level-7 {
  font-weight: 700;
}

.doc-canvas .doc-heading-level-8,
.doc-canvas .doc-heading-level-9,
.doc-canvas .doc-heading-level-10 {
  font-weight: 600;
}

.doc-canvas .doc-callout {
  border: 1px solid transparent;
  border-radius: 6px;
  margin: 12px 0;
  padding: 10px 12px;
  break-inside: avoid;
  page-break-inside: avoid;
}

.doc-canvas .doc-callout-note {
  background: #eaf3ff;
  border-color: #a9cdf7;
  border-left-color: #2a6fdb;
  color: #174a8b;
}

.doc-canvas .doc-callout-warning {
  background: #fff7dd;
  border-color: #f0d37a;
  border-left-color: #c88700;
  color: #694600;
}

.doc-canvas .doc-callout-error {
  background: #fdecec;
  border-color: #efa9a9;
  border-left-color: #c93636;
  color: #7c2020;
}

.doc-canvas pre,
.wi-inline-rich-surface pre {
  overflow-x: auto;
  box-sizing: border-box;
  margin: 12px 0;
  padding: 14px 16px;
  border: 1px solid #263449;
  border-radius: 8px;
  background: #0f1724;
  color: #d8e2f0;
  font-family: "Cascadia Code", "Consolas", "Courier New", monospace;
  font-size: 10.5pt;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  line-height: 1.55;
  tab-size: 4;
  white-space: pre;
  break-inside: avoid;
  page-break-inside: avoid;
}

.doc-canvas pre code,
.wi-inline-rich-surface pre code {
  color: inherit;
  font: inherit;
}

.c-token-comment {
  color: #7fba7a;
  font-style: italic;
}

.c-token-preprocessor {
  color: #c792ea;
}

.c-token-keyword {
  color: #ff7b72;
  font-weight: 600;
}

.c-token-type {
  color: #79c0ff;
}

.c-token-string {
  color: #a5d6ff;
}

.c-token-number,
.c-token-constant {
  color: #f2cc60;
}

.c-token-function {
  color: #d2a8ff;
}

.page-break {
    page-break-before: always;
    break-before: page;
    height: 0;
    margin-top: 0;
    position: relative;
    clear: both;
    display: block;
    margin-bottom: 35px;
    margin-left: 0;
    margin-right: 0;
}

.page-break-label {
  display: block;
  text-align: center;
  font-size: 11px;
  color: var(--ink-soft);
  margin: 0;
  border-top: 1px dashed var(--muted);
  border-bottom: 1px dashed var(--muted);
  padding: 3px 0;
  user-select: none;
}

.page-break-remove {
  position: absolute;
  top: -6px;
  right: 6px;
  background: #efe7dd;
  border: 1px solid var(--muted);
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 11px;
  cursor: pointer;
  display: none;
  pointer-events: auto;
}

.page-break:hover .page-break-remove {
  display: inline-flex;
}

/* Screen-only sheet edges: extend over the content gutter and sheet border.
   The model remains a single page-break atom; exports retain their own pagination. */
@media screen {
  .doc-sheet {
    /* Keep the shadow reach below the gap mask's side overhang. */
    --doc-sheet-shadow-mask: 32px;
    --doc-sheet-edge-color: #d7d0c1;
    border-radius: 0;
    border-color: var(--doc-sheet-edge-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }

  .doc-canvas > .page-break {
    --doc-page-gap: 28px;
    height: var(--doc-page-gap);
    margin: 44px calc(-1 * (var(--doc-content-inline-padding) + 1px));
    background: var(--doc-workspace-background, #d7cdc1);
    isolation: isolate;
  }

  .doc-canvas > .page-break::before,
  .doc-canvas > .page-break::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
  }

  .doc-canvas > .page-break::before {
    /* Hide the continuous sheet shadow as well as its side borders in the gap. */
    left: calc(-1 * var(--doc-sheet-shadow-mask, 32px));
    right: calc(-1 * var(--doc-sheet-shadow-mask, 32px));
    background: var(--doc-workspace-background, #d7cdc1);
  }

  .doc-canvas > .page-break::after {
    left: 0;
    right: 0;
    border-top: 1px solid var(--doc-sheet-edge-color, #d7d0c1);
    border-bottom: 1px solid var(--doc-sheet-edge-color, #d7d0c1);
    /* The upper sheet casts a short downward shadow; the next sheet starts flat. */
    box-shadow: inset 0 6px 8px -8px rgba(0, 0, 0, 0.24);
  }

  .doc-canvas > .page-break .page-break-label {
    border: 0;
    padding: 0;
    line-height: var(--doc-page-gap);
    font-family: var(--ui-font);
    color: var(--ink-soft);
    opacity: 0;
  }

  .doc-canvas > .page-break .page-break-remove {
    top: 50%;
    right: var(--doc-content-inline-padding);
    transform: translateY(-50%);
  }

  .doc-canvas > .page-break:is(:hover, :focus-within, .ProseMirror-selectednode) .page-break-label {
    opacity: 1;
  }

  .doc-canvas > .page-break:is(:focus-within, .ProseMirror-selectednode) .page-break-remove {
    display: inline-flex;
  }
}

.toc {
  font-size: 12pt;
}

.doc-generated-toc {
  display: block;
  min-height: 24px;
}

.toc-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
  cursor: pointer;
  color: #1d1b1a;
}

.toc-item.toc-level-1 {
  margin-left: 0;
}

.toc-item.toc-level-2 {
  margin-left: 12px;
}

.toc-item.toc-level-3 {
  margin-left: 24px;
}

.toc-item.toc-level-4,
.toc-item.toc-level-5,
.toc-item.toc-level-6 {
  margin-left: 36px;
}

.toc-number {
  font-weight: 700;
  color: #1d1b1a;
  min-width: 40px;
}

.toc-title {
  white-space: nowrap;
}

.toc-dots {
  flex: 1;
  border-bottom: 1px dotted #333;
  margin-bottom: 2px;
}

.toc-page {
  min-width: 24px;
  text-align: right;
  font-weight: 700;
  color: #1d1b1a;
}

.toc-link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: #1d1b1a;
  text-decoration: none;
  width: 100%;
}

.doc-canvas table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  table-layout: auto;
}

.template-preview-surface table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  table-layout: auto;
}

.doc-canvas table.table-fixed-layout {
  table-layout: fixed;
  width: 100%;
  max-width: 100%;
}

/* Clipboard tables carry bounded widths in their shared model. Keep imported
   unbreakable text and fixed-size child blocks inside those columns as well. */
table.doc-table-fit {
  table-layout: fixed !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

table.doc-table-fit :is(td, th),
table.doc-table-fit :is(td, th) :is(p, span, a, pre) {
  overflow-wrap: anywhere !important;
  white-space: pre-wrap !important;
}

table.doc-table-fit :is(td, th) > :not(.column-resize-handle) {
  box-sizing: border-box;
  max-width: 100% !important;
  min-width: 0 !important;
}

table.doc-table-fit img {
  max-width: 100% !important;
  height: auto;
}

/* Global table branding applies to every document table, including tables
   inserted directly in the editor without the template-table class. */
.doc-canvas table th,
:is(.template-preview-surface, .variable-value-preview) table th {
  background: var(--doc-table-th-bg);
  color: var(--doc-table-th-text);
  text-align: left;
}

.doc-canvas table > thead > tr > th,
:is(.template-preview-surface, .variable-value-preview) table > thead > tr > th,
#docCanvas.ProseMirror table > tbody > tr[data-table-header="true"] > th,
.variable-value-preview table > tbody > tr[data-table-header="true"] > th {
  background: var(--doc-table-header-bg);
  color: var(--doc-table-header-text);
}

/* Serialized HTML (print/export): proper <thead> structure. */
.doc-canvas table.template-table thead > tr > th {
  background: var(--doc-table-header-bg);
  color: var(--doc-table-header-text);
  text-align: left;
}

/* PDF exports repeat table heads only for tables that explicitly opt in. */
body.pdf-export-root table > thead {
  break-inside: auto;
  display: table-row-group;
  page-break-inside: auto;
}

body.pdf-export-root table[data-pdf-repeat-header="true"] > thead {
  break-inside: avoid;
  display: table-header-group;
  page-break-inside: avoid;
}

body.pdf-export-root table[data-pdf-repeat-header="true"] > tbody > tr {
  break-inside: avoid;
  page-break-inside: avoid;
}

:is(.template-preview-surface, .variable-value-preview) table.template-table thead > tr > th {
  background: var(--doc-table-header-bg);
  color: var(--doc-table-header-text);
  text-align: left;
}

table.wi-inline-table {
  min-width: min(400px, 100%);
  max-width: 100%;
  width: auto;
}

/* Serialized HTML (print/export): proper <thead> structure. */
table.wi-inline-table thead > tr > th {
  background: var(--doc-table-header-bg);
  color: var(--doc-table-header-text);
  text-align: left;
}

/* All <th> in template-table get the secondary header color. */
.doc-canvas table.template-table > tbody th {
  background: var(--doc-table-th-bg);
  color: var(--doc-table-th-text);
  text-align: left;
}

:is(.template-preview-surface, .variable-value-preview) table.template-table > tbody th {
  background: var(--doc-table-th-bg);
  color: var(--doc-table-th-text);
  text-align: left;
}

/* All <th> in template-table get the secondary header color. */
table.wi-inline-table > tbody th {
  background: var(--doc-table-th-bg);
  color: var(--doc-table-th-text);
  text-align: left;
}

/* ProseMirror stores section state on rows and serializes it as <thead>. */
table.wi-inline-table>tbody>tr[data-table-header="true"]>th {
  background: var(--doc-table-header-bg);
  color: var(--doc-table-header-text);
}

.doc-caption {
  margin: 2px 0 12px;
  font-size: 0.92em;
  font-style: italic;
}

.doc-caption::before {
  content: attr(data-caption-label);
  white-space: pre;
}

/* Reusable Work-Item and variable HTML stores `#`; the live document derives
   independent figure/table numbers from the actual rendered document order. */
#docCanvas.ProseMirror {
  counter-reset: doc-figure-caption doc-table-caption;
}

#docCanvas.ProseMirror .doc-caption-figure {
  counter-increment: doc-figure-caption;
}

#docCanvas.ProseMirror .doc-caption-table {
  counter-increment: doc-table-caption;
}

#docCanvas.ProseMirror .doc-caption-figure::before {
  content: "Fig. " counter(doc-figure-caption) ": ";
}

#docCanvas.ProseMirror .doc-caption-table::before {
  content: "Tab. " counter(doc-table-caption) ": ";
}

.doc-caption-figure {
  text-align: center;
}

.doc-caption-table {
  text-align: center;
}

.doc-caption-list {
  margin: 10px 0 18px;
}

.caption-list-placeholder {
  color: var(--muted);
  font-style: italic;
  min-height: 1.2em;
}

.doc-canvas h1[data-unnumbered="true"]::before {
  content: none;
  margin-right: 0;
}

.wi-inline-table .doc-canvas table caption {
  caption-side: top;
  font-weight: 700;
  margin-bottom: 4px;
}

.wi-inline-table table,
.wi-inline-table th,
.wi-inline-table td,
.doc-canvas table,
.doc-canvas th,
.doc-canvas td {
  border: 1px solid var(--doc-table-border);
}

:is(.template-preview-surface, .variable-value-preview) table,
:is(.template-preview-surface, .variable-value-preview) th,
:is(.template-preview-surface, .variable-value-preview) td {
  border: 1px solid var(--doc-table-border);
}

.wi-inline-table td,
.doc-canvas td,
:is(.template-preview-surface, .variable-value-preview) td {
  background-color: var(--doc-table-td-bg);
}

.wi-inline-table th,
.wi-inline-table td,
.doc-canvas th,
.doc-canvas td {
  padding: 6px;
  /* Keep tall rows aligned identically in the live editor and serialized PDF. */
  vertical-align: top;
  hyphens: auto;
  overflow-wrap: break-word;
  word-break: normal;
}

:is(.template-preview-surface, .variable-value-preview) th,
:is(.template-preview-surface, .variable-value-preview) td {
  padding: 6px;
  hyphens: auto;
  overflow-wrap: break-word;
  word-break: normal;
  cursor: text;
  vertical-align: top;
}

.template-preview-surface td:hover,
.template-preview-surface th:hover {
  box-shadow: inset 0 0 0 1px rgba(45, 91, 78, 0.42);
}

.template-preview-surface td.template-cell-selected,
.template-preview-surface th.template-cell-selected {
  outline: 2px solid #2d5b4e;
  outline-offset: -2px;
  box-shadow: inset 0 0 0 2px rgba(45, 91, 78, 0.35);
}

.template-table-context-menu {
  position: fixed;
  z-index: 1200;
  display: grid;
  min-width: 210px;
  padding: 4px;
  border: 1px solid #cfc2b2;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(33, 29, 25, 0.22);
}

.template-table-context-menu button {
  width: 100%;
  min-height: 30px;
  padding: 5px 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.template-table-context-menu button:hover,
.template-table-context-menu button:focus-visible {
  background: #f3ece4;
  outline: none;
}

.template-table-context-menu button:disabled {
  cursor: default;
  opacity: 0.5;
}

.template-table-context-menu button:disabled:hover {
  background: transparent;
}

.template-table-context-menu button[role="menuitemcheckbox"][aria-checked="true"]::before {
  content: "\2713";
  display: inline-block;
  margin-right: 6px;
  font-weight: 700;
}

.template-table-context-menu button.is-danger {
  color: #a32626;
}

.wi-inline-table th>p,
.wi-inline-table td>p,
.doc-canvas td>p,
.doc-canvas th>p {
  margin-top: 0;
  margin-bottom: 0;
}

.template-preview-surface td > p,
.template-preview-surface th > p {
  margin-top: 0;
  margin-bottom: 0;
}

/* Serialized editor paragraphs lack the live editor's placeholder <br>.
   Preserve empty lines before document fields mount, including PDF exports. */
.doc-canvas .wi-desc p:empty::before,
.doc-canvas .wi-inline-rich-surface p:empty::before,
.doc-canvas :is(td, th) > p:empty::before,
.wi-inline-table :is(td, th) > p:empty::before,
.template-preview-surface :is(td, th) > p:empty::before {
  content: "\00a0";
}

/* ProseMirror live editor: cells need position:relative for resize handles
   and cursor:text so any click in the cell area is understood as editable. */
#docCanvas.ProseMirror th,
#docCanvas.ProseMirror td {
  position: relative;
  cursor: text;
  vertical-align: top;
  min-height: 1.8em;
}

/* Remove paragraph margins inside live-editor cells so the entire padding area is
  part of the click target (no dead zone below the last paragraph). */
#docCanvas.ProseMirror td>p,
#docCanvas.ProseMirror th>p {
  margin-top: 0;
  margin-bottom: 0;
}

/* Active cell: outline on all four sides — clearly visible without overlaying
   any user-set background colour (outline is drawn outside/over the border box
   so it does not change layout or background). */
#docCanvas.ProseMirror td.pm-active-cell,
#docCanvas.ProseMirror th.pm-active-cell,
.wi-inline-rich-surface.ProseMirror td.pm-active-cell,
.wi-inline-rich-surface.ProseMirror th.pm-active-cell,
.wi-inline-rich-surface .ProseMirror td.pm-active-cell,
.wi-inline-rich-surface .ProseMirror th.pm-active-cell,
.wi-test-step-pair-table td:has(> [data-test-step-field]:focus) {
  outline: 2px solid #2d5b4e;
  outline-offset: -2px;
}

.doc-canvas.table-col-resize-candidate {
  cursor: col-resize;
}

body.table-col-resizing {
  user-select: none;
  cursor: col-resize;
}

.work-toolbar {
  display: flex;
  gap: 10px;
  padding: 8px 0;
}

.workitem-details-navigation .ghost.compact {
  padding: 6px 10px;
  font-size: 12px;
  min-height: 32px;
}

.workitem-details-navigation .ghost.compact.meta-suspect-toggle-clear {
  border-color: #4f9963;
  color: #23683a;
  background: #eaf6ee;
}

.workitem-details-navigation .ghost.compact.meta-suspect-toggle-clear:hover {
  background: #ddf0e3;
}

.work-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
  transition: opacity 0.24s ease, transform 0.24s ease, max-height 0.24s ease, margin-bottom 0.24s ease;
  transform-origin: top;
  overflow: hidden;
  max-height: 220px;
}

.work-filters.is-closed {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  max-height: 0;
  margin-bottom: 0;
}

.work-filters.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.work-query-builder {
  border: 1px solid var(--muted);
  border-radius: 12px;
  background: #fffaf5;
  padding: 10px;
  margin-bottom: 10px;
  display: grid;
  gap: 10px;
  transition: opacity 0.26s ease, transform 0.26s ease, max-height 0.26s ease, margin-bottom 0.26s ease;
  transform-origin: top;
  max-height: 540px;
}

.work-query-builder.is-closed {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  max-height: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
}

.work-query-builder.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#workItemFilterApplyBtn {
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    max-width 0.2s ease,
    margin 0.2s ease,
    padding 0.2s ease,
    border-width 0.2s ease;
  max-width: 180px;
  overflow: hidden;
  white-space: nowrap;
}

#workItemFilterApplyBtn.query-mode-hidden {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  max-width: 0;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  border-width: 0;
}

.work-query-rows {
  display: grid;
  gap: 8px;
}

.work-query-row {
  display: grid;
  grid-template-columns: 56px minmax(160px, 1fr) 140px minmax(180px, 1fr) 40px;
  gap: 8px;
  align-items: center;
}

.work-query-and {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
}

.work-query-row input,
.work-query-row select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#workItemsView .work-filters input,
#workItemsView .work-filters select,
.work-query-row input,
.work-query-row select {
  border: 1px solid #cfc2b2;
  border-radius: 10px;
  background: #ffffff;
  min-height: 40px;
  padding: 8px 12px;
}

#workItemsView .work-filters select,
.work-query-row select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #7d6f61 50%),
    linear-gradient(135deg, #7d6f61 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

#workItemQueryToggleBtn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: #fff1f1;
}

.work-list {
  overflow: auto;
  min-height: 0;
  flex: 1;
}

.work-table-wrapper {
  flex: 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: auto;
  max-height: 60vh;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border-radius: 12px;
  border: 1px solid var(--muted);
  background: var(--canvas);
  box-shadow: 0 10px 30px var(--shadow);
}

#workItemsView {
  min-height: 0;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#usersView {
  min-height: 0;
  min-width: 0;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#usersView .users-table-wrapper {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
}

.users-header .users-create-actions {
  order: 2;
}

.users-filter-controls {
  flex-wrap: wrap;
}

.users-filter-controls .field {
  min-width: 0;
}

.users-filter-controls input,
.users-filter-controls select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.users-filter-result {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 var(--ui-space-3) var(--ui-space-2);
}

@media (max-width: 560px) {
  #usersView {
    overflow: auto;
  }

  #usersView .users-table-wrapper {
    flex: 1 0 auto;
    min-height: 240px;
  }
}

#licenseView {
  min-width: 0;
  min-height: 0;
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-4);
}

.admin-license-panel,
.admin-license-request-panel {
  display: grid;
  gap: var(--ui-space-4);
  padding: var(--ui-space-4);
}

.admin-license-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ui-space-3);
}

.admin-license-panel-header > div {
  min-width: 0;
}

.admin-license-notice {
  padding: var(--ui-space-3);
}

.admin-license-cards {
  display: grid;
}

.admin-license-card {
  display: grid;
  grid-template-columns: minmax(100px, 0.6fr) minmax(160px, 1fr) minmax(180px, 1.2fr);
  gap: var(--ui-space-3);
  align-items: center;
  padding: var(--ui-space-4) 0;
}

.admin-license-card-usage {
  min-width: 0;
}

.admin-license-request-header {
  display: grid;
  gap: var(--ui-space-2);
}

.admin-license-request-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
}

.admin-license-progress {
  margin-top: var(--ui-space-2);
  height: var(--ui-space-1);
  overflow: hidden;
}

.admin-license-progress-fill {
  height: 100%;
}

@media (max-width: 900px) {
  .admin-license-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--ui-space-2) var(--ui-space-3);
  }

  .admin-license-card-usage {
    grid-column: 2;
  }
}

@media (max-width: 520px) {
  .admin-license-panel-header {
    flex-direction: column;
  }

  .admin-license-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-license-card-usage {
    grid-column: auto;
  }

  .admin-license-request-grid {
    flex-direction: column;
    align-items: flex-start;
  }
}

#auditView {
  min-height: 0;
  min-width: 0;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#auditView .audit-table-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
}

#auditView .audit-filters { align-items: center; flex-wrap: wrap; }
#auditView .work-table { width: 100%; min-width: 1120px; table-layout: fixed; }
#auditView .audit-time-column { width: 165px; }
#auditView .audit-user-column { width: 145px; }
#auditView .audit-severity-column { width: 115px; }
#auditView .audit-action-column { width: 225px; }
#auditView .audit-ip-column { width: 130px; }
#auditView td:first-child { font-variant-numeric: tabular-nums; }
#auditView td { vertical-align: top; overflow-wrap: anywhere; white-space: normal; }
#auditView summary { display: list-item; list-style-position: inside; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#auditView pre { margin: var(--ui-space-2) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 600px) {
  #auditView .workitem-searchbar .audit-filters > .field { flex: 1 1 100%; }
}


#workItemsView .work-table-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  height: calc(100vh - 340px);
  container-type: inline-size;
  scrollbar-gutter: auto;
  --work-item-detail-inline-gutter: 28px;
}

.workitem-load-status {
  flex: 0 0 auto;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 4px 0;
  padding: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

#variablesView {
  min-height: 0;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#variablesView .work-table-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  height: calc(100vh - 280px);
  scrollbar-gutter: auto;
}

#variablesView .work-table {
  --work-table-actions-min-width: 40px;
  min-width: 680px;
  width: 100%;
  table-layout: fixed;
}

#variablesView .work-table .variable-select-column {
  width: 36px;
}

#variablesView .work-table .variable-name-column {
  width: 28%;
}

#variablesView .work-table .variable-updated-column {
  width: 180px;
  white-space: nowrap;
}

#variablesView .work-table .variable-actions-column {
  width: 40px;
}

#variablesView .work-table tr[data-var-id] {
  cursor: pointer;
}

#variablesView .work-table tr[data-var-id]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

#variablesView .work-table tr.bulk-selected > td {
  background: var(--ui-selected);
}

#variablesView .work-table tbody td.variable-value-cell {
  height: auto;
  max-width: 0;
  overflow: hidden;
  text-overflow: clip;
  white-space: normal;
  vertical-align: top;
}

#variablesView .variable-value-preview {
  --variable-value-preview-max-height: 6.75em;
  font-family: var(--doc-font-family);
  color: var(--doc-text-color);
  background: transparent;
  line-height: 1.35;
  max-height: var(--variable-value-preview-max-height);
  overflow: auto;
  overflow-wrap: anywhere;
  white-space: normal;
}

#variablesView .variable-value-preview p,
#variablesView .variable-value-preview ul,
#variablesView .variable-value-preview ol,
#variablesView .variable-value-preview figure,
#variablesView .variable-value-preview blockquote {
  margin: 0 0 4px;
}

#variablesView .variable-value-preview table {
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-collapse: collapse;
  table-layout: fixed;
}

#variablesView .variable-value-preview th,
#variablesView .variable-value-preview td {
  height: auto;
  min-width: 0;
  padding: 3px 5px;
  border: 1px solid var(--doc-table-border);
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  vertical-align: top;
  white-space: normal;
}

#variablesView .variable-value-preview img {
  display: block;
  max-width: 100%;
  max-height: 64px;
  object-fit: contain;
}

#variablesView .variable-value-preview .img-resizable {
  max-width: 100% !important;
}

.var-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid #cfc2b2;
  background: #f5efe7;
  color: #5a524a;
  margin-left: 6px;
}

#variableModal {
  width: min(980px, 96vw);
  inset: 8vh auto auto 50%;
  max-height: 84vh;
}

#variableModal .modal-body {
  overflow: auto;
}

#variableEditModal.modal--user-sized #variableValue {
  flex: 1 1 auto;
  min-height: 120px;
  overflow: auto;
}

#variableList {
  display: grid;
  gap: 12px;
}

.variable-pick-section {
  border: 1px solid var(--muted);
  border-radius: 10px;
  background: #fff;
  padding: 10px;
}

.variable-pick-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.variable-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}

.variable-pick-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  border: 1px solid #cfc2b2;
  border-radius: 8px;
  background: #f8f3ec;
  color: var(--ink);
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
}

.variable-pick-item:hover {
  background: #f1e7db;
}

.variable-pick-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.variable-pick-empty {
  font-size: 12px;
  color: var(--ink-soft);
  padding: 6px 2px;
}

.work-table {
  --work-table-actions-min-width: 208px;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}

#workItemsView .work-table {
  font-size: var(--ui-text);
}

.work-table > thead > tr > th {
  position: sticky;
  top: 0;
  background: #efe7dd;
  z-index: 3;
  text-align: left;
  border-bottom: 1px solid var(--muted);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.work-table > thead th.column-header-draggable {
  user-select: none;
}

.workitem-column-resize-handle {
  position: absolute;
  top: 0;
  right: -5px;
  z-index: 7;
  width: 11px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
}

.workitem-column-resize-handle::after {
  content: "";
  position: absolute;
  top: 20%;
  bottom: 20%;
  left: 5px;
  width: 1px;
  background: transparent;
}

.workitem-column-resize-handle:hover::after,
body.workitem-column-resizing .workitem-column-resize-handle::after {
  background: #a99073;
}

body.workitem-column-resizing,
body.workitem-column-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

.work-table > thead th.column-header-draggable.dragging {
  opacity: 0.45;
}

.work-table > thead th.column-header-drop-target {
  outline: 2px dashed #bda98f;
  outline-offset: -3px;
}

.work-table > thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

.work-table > thead th.actions-col {
  position: sticky;
  right: 0;
  z-index: 5;
  min-width: var(--work-table-actions-min-width);
  width: var(--work-table-actions-min-width);
  background: #efe7dd;
  cursor: default;
}

.work-table th.bulk-select-col,
.work-table td.bulk-select-col {
  width: 36px;
  text-align: center;
}

.work-table > tbody > tr > td {
  border-bottom: 1px solid #eee3d7;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 34px;
}

#workItemsView .work-table tbody tr.workitem-lazy-spacer,
#workItemsView .work-table tbody tr.workitem-lazy-spacer:hover {
  background: transparent;
}

#workItemsView .work-table tbody tr.workitem-lazy-spacer > td {
  padding: 0;
  height: 0;
  border: 0;
  pointer-events: none;
}

.work-table tbody tr:not(.work-item-detail)>td.actions-col {
  position: sticky;
  right: 0;
  min-width: var(--work-table-actions-min-width);
  width: var(--work-table-actions-min-width);
  overflow: visible;
  text-overflow: clip;
  background: var(--canvas);
}

.work-table tbody tr:hover:not(.work-item-detail)>td.actions-col {
  background: #f7f0e7;
}

.work-table tbody tr.active:not(.work-item-detail)>td.actions-col {
  background: #efe7dd;
}

.work-table tbody tr.bulk-selected:not(.work-item-detail)>td.actions-col {
  background: #f3ece2;
}

.template-history-changes-cell {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  height: auto !important;
  line-height: 1.35;
}

.work-table > tbody > tr:hover {
  background: #f7f0e7;
}

.work-table tbody tr.active {
  background: #efe7dd;
}

.work-table tbody tr.bulk-selected {
  background: #f3ece2;
}

#workItemsView .work-table > tbody > tr.work-item-detail > td {
  background: #fbf6ef;
  border-bottom: 1px solid #eee3d7;
  padding: 10px 14px;
  height: auto;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-width: 0;
}

#workItemsView .work-item-detail-body {
  font-size: 12px;
  color: var(--ink);
  inline-size: auto;
  width: auto;
  min-inline-size: 0;
  min-width: 0;
  max-inline-size: calc(100cqw - var(--work-item-detail-inline-gutter));
  max-width: calc(100cqw - var(--work-item-detail-inline-gutter));
  box-sizing: border-box;
  overflow-x: auto;
}

#workItemsView .work-item-detail-body img {
  max-width: 100%;
  height: auto;
}

#workItemsView .work-item-detail-body > .wi-test-table {
  inline-size: 100%;
  width: 100%;
  max-inline-size: 100%;
  max-width: 100%;
  table-layout: fixed;
}

#workItemsView .work-item-detail-body > .wi-test-table th {
  inline-size: clamp(140px, 18vw, 180px);
}

#workItemsView .work-item-detail-body > .wi-test-table td {
  inline-size: auto;
}

/* The expanded test overview uses one visual header level for prerequisites
   and test steps. Keep both tied to the configured secondary table colors. */
#workItemsView
  .work-item-detail-body
  > .wi-test-step-pair-table
  > thead
  > tr
  > th {
  background: var(--doc-table-th-bg);
  color: var(--doc-table-th-text);
}

#workItemsView .work-item-detail-body > .wi-test-table td table,
#workItemsView .work-item-detail-body > .wi-test-table td .wi-test-steps-table {
  inline-size: 70% !important;
  width: 70% !important;
  min-inline-size: 0 !important;
  min-width: 0 !important;
  max-inline-size: 70% !important;
  max-width: 70% !important;
  table-layout: fixed !important;
  margin-right: auto;
}

#workItemsView .work-item-detail-body > .wi-test-table td table colgroup col:first-child,
#workItemsView .work-item-detail-body > .wi-test-table td .wi-test-steps-table colgroup col:first-child {
  width: 20% !important;
}

#workItemsView .work-item-detail-body > .wi-test-table td table colgroup col:nth-child(2),
#workItemsView .work-item-detail-body > .wi-test-table td .wi-test-steps-table colgroup col:nth-child(2) {
  width: 80% !important;
}

#workItemsView .work-item-detail-body > .wi-test-table td table .test-step-id-cell,
#workItemsView .work-item-detail-body > .wi-test-table td .wi-test-steps-table .test-step-id-cell {
  width: 20% !important;
  min-width: 20% !important;
  max-width: 20% !important;
}

#workItemsView .work-item-detail-body > .wi-test-table td table .test-step-text-cell,
#workItemsView .work-item-detail-body > .wi-test-table td .wi-test-steps-table .test-step-text-cell {
  width: 80% !important;
  min-width: 80% !important;
  max-width: 80% !important;
}

#workItemsView .work-item-detail-body > .wi-test-table td table th,
#workItemsView .work-item-detail-body > .wi-test-table td table td,
#workItemsView .work-item-detail-body > .wi-test-table td .wi-test-steps-table th,
#workItemsView .work-item-detail-body > .wi-test-table td .wi-test-steps-table td {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.work-table .cell-id {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}

.suspect-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff3c7;
  border: 1px solid #d6ae49;
  color: #6d4b00;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  flex: 0 0 auto;
}

.lock-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #d9d1c7;
  color: #4a4340;
  border: 1px solid #c8beb3;
}


.work-table .sort-indicator::after {
  content: attr(data-indicator);
  margin-left: 6px;
  font-size: 11px;
  color: var(--ink-soft);
}

.work-table .row-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  min-width: calc(var(--work-table-actions-min-width) - 20px);
  gap: 6px;
  justify-content: flex-end;
}

.work-table .row-actions .icon-action.workitem-suspect-active {
  border-color: #4f9963;
  color: #23683a;
  background: #eaf6ee;
}

.work-table .row-actions .icon-action.workitem-suspect-active:hover {
  background: #ddf0e3;
}

.work-table.workitem-table-wrap-text tbody td {
  white-space: normal;
  word-break: break-word;
  height: auto;
}

.profile-fields {
  display: grid;
  gap: 12px;
}

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

.profile-mfa-status-row {
  display: grid;
  gap: 8px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--muted);
  background: #f4ece3;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  width: fit-content;
}

.status-pill[data-mfa-enabled="1"] {
  border-color: #9cc8aa;
  background: #eaf6ee;
  color: #23683a;
}

.profile-mfa-status-text {
  font-size: 13px;
  color: var(--ink-soft);
}

.profile-mfa-setup-panel {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--muted);
  border-radius: 12px;
  background: #fffaf5;
}

.profile-mfa-setup-panel[data-mfa-method="email"] {
  grid-template-columns: minmax(0, 1fr);
}

.login-mfa-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.profile-mfa-qr-card {
  display: grid;
  place-items: center;
  min-height: 220px;
  border: 1px solid var(--muted);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
}

.profile-mfa-qr-card img {
  width: 100%;
  max-width: 220px;
  height: auto;
}

.profile-mfa-setup-fields,
.profile-mfa-disable-panel {
  display: grid;
  gap: 12px;
}

.help-panel {
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  border-radius: 14px;
  border: 1px solid var(--muted);
  box-shadow: 0 10px 30px var(--shadow);
  height: 100%;
  overflow: hidden;
}

.help-panel .panel-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.help-content {
  padding: 20px 24px 28px;
  overflow: auto;
}

.help-content h2 {
  margin: 18px 0 10px;
  font-size: 18px;
  color: var(--accent);
}

.help-content p {
  margin: 0 0 12px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.help-content ul {
  margin: 0 0 14px 18px;
  padding: 0;
  color: var(--ink-soft);
  line-height: 1.5;
}

.help-panel {
  flex: 1 1 auto;
  width: 100%;
}

@media (max-width: 900px) {
  .profile-mfa-setup-panel {
    grid-template-columns: 1fr;
  }
}

.help-mode .main {
  gap: 0;
}

.help-licenses-table {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
}

.help-licenses-table table {
  width: 100%;
  border-collapse: collapse;
}

.help-licenses-table th,
.help-licenses-table td {
  text-align: left;
}

.help-licenses-table th {
  position: sticky;
  top: 0;
  z-index: 1;
}
#openSourceLicensesView > .help-panel { border: 0; border-radius: 0; box-shadow: none; min-height: 0; }
#openSourceLicensesView .help-header { padding: var(--ui-space-2) var(--ui-space-3); }
#openSourceLicensesView .help-header h1 { margin: 0; }
#helpLicenses { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; padding: 0; overflow: hidden; }
.help-licenses-table td:first-child { overflow-wrap: anywhere; }

.help-side-card {
  border: 1px solid var(--muted);
  border-radius: 12px;
  padding: 12px;
  background: #fffaf5;
  display: grid;
  gap: 10px;
}

.help-side-card h4 {
  margin: 0;
  font-size: 14px;
  color: var(--ink);
}

.help-side-card p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.4;
}

.help-topic-title {
  margin-top: 0;
  font-size: 22px;
  color: var(--ink);
}

.help-shot {
  margin: 14px 0 18px;
  border: 1px dashed #cdbfb2;
  background: #fbf6f1;
  padding: 18px;
  border-radius: 12px;
  color: #9b8f84;
  text-align: center;
  font-size: 13px;
}

.help-note {
  background: #f5ede2;
  border: 1px solid #e2d6c9;
  border-radius: 10px;
  padding: 10px 12px;
  color: #6b5b4f;
  font-size: 13px;
}

.help-mode .panel-tabs,
.help-mode .panel-actions,
.help-mode .main-header {
  display: none !important;
}

.help-mode .sidebar .panel-header>div:first-child {
  font-weight: 700;
}

.help-mode .meta-sidebar {
  display: flex;
}

/* Focused settings/admin views (profile, users, audit log, backups) hide the
   project-specific main header and metadata sidebar and collapse the workspace
   to two columns so the content fills the freed space. The project sidebar
   ("Projektleiste") stays visible. */
.focused-view .main-header,
.focused-view .meta-sidebar {
  display: none !important;
}

.focused-view .workspace {
  grid-template-columns: minmax(var(--workspace-main-min-width), 1fr);
}

.focused-view .workspace.sidebar-left-collapsed {
  grid-template-columns: minmax(var(--workspace-main-min-width), 1fr);
}

.help-topic-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  color: var(--ink);
  border: 1px solid transparent;
}

.help-topic-item:hover {
  background: #f3ece4;
  border-color: #e2d6c9;
}

.help-topic-item.active {
  background: #efe7dd;
  border-color: #d8cbbd;
  font-weight: 600;
}

.diff-panel {
  border: 1px solid var(--muted);
  border-radius: 12px;
  padding: 10px;
  background: #fffaf5;
  display: grid;
  gap: 10px;
}

.diff-body {
  display: grid;
  gap: 10px;
  align-content: start;
}

#workItemHistoryModal .modal-body {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  gap: 16px;
  max-height: 78vh;
  overflow: hidden;
}

#workItemHistoryModal {
  width: min(96vw, 1320px);
  inset: 4% auto auto 50%;
}

#workItemHistoryModal .diff-body img {
  max-width: 100%;
  height: auto;
}

#workItemHistoryList {
  overflow: auto;
  max-height: 78vh;
  padding-right: 6px;
}

#workItemHistoryList .workitem-history-list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ui-space-1);
  margin-bottom: var(--ui-space-2);
}
.workitem-history-select {
  min-width: 0;
  padding: var(--ui-space-3);
  text-align: left;
  display: grid;
  gap: var(--ui-space-1);
}
.workitem-history-select :is(strong, span) { overflow-wrap: anywhere; }
.workitem-history-revision-line, .workitem-history-detail-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--ui-space-2);
}
.workitem-history-revision-line { flex-wrap: wrap; }
.workitem-history-detail-heading > div { min-width: 0; overflow-wrap: anywhere; }
.workitem-history-copy-link { margin-right: var(--ui-space-1); }
.workitem-history-copy-link .btn-label { display: none; }
.workitem-history-list-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ui-space-1) var(--ui-space-3);
  padding: 0 var(--ui-space-2) var(--ui-space-3);
}
.workitem-history-list-heading > .meta-subtle { margin: 0; }
.workitem-history-list-heading button { grid-column: 2; grid-row: 1 / span 2; }
#workItemHistoryDiff { overflow: auto; max-height: 78vh; min-width: 0; align-content: start; }
.workitem-history-controls { display: grid; gap: var(--ui-space-3); margin-bottom: var(--ui-space-4); }
.workitem-history-detail-heading h3 { margin: 0; }
.workitem-history-detail-heading p { margin: var(--ui-space-1) 0 0; }
.workitem-history-view-toolbar { display: flex; gap: var(--ui-space-4); }
.workitem-history-comparison-controls {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--ui-space-3);
}
.workitem-history-comparison-controls .field { margin: 0; min-width: 0; max-width: 100%; }
.workitem-history-comparison-controls select { min-width: 0; width: 100%; }
.workitem-history-direction { padding-bottom: var(--ui-space-2); }
.workitem-history-mobile-picker { display: none; }
.workitem-history-mobile-picker select { min-width: 0; width: 100%; box-sizing: border-box; }
.workitem-history-unchanged summary { cursor: pointer; padding: var(--ui-space-3) 0; min-height: 44px; box-sizing: border-box; }
.workitem-history-restore-form { display: grid; gap: var(--ui-space-3); }
.workitem-history-restore-form :is(h3, p) { margin: 0; }
.workitem-history-restore-fields { display: grid; gap: var(--ui-space-3); }
.workitem-history-restore-checkbox { display: flex; align-items: center; gap: var(--ui-space-2); }
.workitem-history-restore-value { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-3); margin-top: var(--ui-space-3); }
.workitem-history-restore-value > div { min-width: 0; overflow: auto; }

.workitem-history-snapshot-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid #d8cbbd;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff 0%, #faf3eb 100%);
}

.workitem-history-snapshot-header h3 {
  margin: 3px 0 0;
  font-size: 1.15rem;
}
.workitem-history-snapshot-header > div { min-width: 0; overflow-wrap: anywhere; }

.workitem-history-snapshot-code {
  color: var(--ink-soft);
  font-weight: 700;
}

.workitem-history-revision-badge {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid #c8b7a5;
  border-radius: 999px;
  color: #56483d;
  background: #f3e9df;
  font-weight: 700;
}

.workitem-history-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid #e3d8cc;
  border-radius: 10px;
  background: #e3d8cc;
}

.workitem-history-snapshot-grid > div {
  min-width: 0;
  padding: 9px 11px;
  background: #fffdfa;
}
.workitem-history-snapshot-grid > div:only-child { grid-column: 1 / -1; }

.workitem-history-snapshot-grid dt {
  margin: 0 0 3px;
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 700;
}

.workitem-history-snapshot-grid dd {
  margin: 0;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

.workitem-history-snapshot-rich-section .workitem-history-rich,
.workitem-history-snapshot-plain {
  min-height: 48px;
  white-space: pre-wrap;
  line-height: 1.5;
}

.workitem-history-state-note {
  padding: 10px 12px;
  border: 1px solid #d8bb77;
  border-radius: 8px;
  color: #684914;
  background: #fff4d8;
}

@media (max-width: 980px) {
  .workitem-history-snapshot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #workItemHistoryModal .modal-body {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  #workItemHistoryList,
  #workItemHistoryDiff {
    max-height: none;
  }

  .workitem-history-mobile-picker { display: grid; }
  #workItemHistoryList .workitem-history-list-item { display: none; }
  .workitem-history-detail-heading { flex-wrap: wrap; }
}

@media (max-width: 720px) {
  .workitem-history-restore-value { grid-template-columns: 1fr; }

  .workitem-history-visual-compare {
    grid-template-columns: 1fr;
  }

  .workitem-history-snapshot-header {
    flex-direction: column;
  }

  .workitem-history-snapshot-grid {
    grid-template-columns: 1fr;
  }
}

#requirementModal .modal-body {
  max-height: 60vh;
  overflow: auto;
}

#requirementList {
  max-height: 46vh;
  overflow: auto;
}

.requirement-document-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  font-size: 13px;
  cursor: pointer;
}

.requirement-document-filter > input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
}

.workitem-select-item {
  display: flex;
  align-items: center;
  padding: 0;
}

.workitem-select-item.is-selected {
  background: color-mix(in srgb, var(--accent) 10%, var(--canvas));
}

.workitem-reference-selection {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  cursor: pointer;
}

.workitem-reference-selection > input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0;
}

.workitem-reference-label-content {
  min-width: 0;
  flex: 1 1 auto;
}

.workitem-select-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.workitem-select-text {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.workitem-select-code {
  white-space: nowrap;
}

.workitem-select-sep {
  color: var(--ink-soft);
}

.workitem-select-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#workItemModal .modal-body {
  max-height: 60vh;
  overflow: auto;
}

#workItemModal.modal--user-sized #workItemDescField {
  display: flex;
  flex: 1 1 220px;
  flex-direction: column;
  min-height: 0;
}

#workItemModal.modal--user-sized #workItemDesc {
  flex: 1 1 auto;
  min-height: 120px;
  overflow: auto;
}

#commentModal .modal-body {
  display: flex;
  flex-direction: column;
}

#commentModal .modal-body .field {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

#commentModal .comment-editor {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

#commentModal .comment-editor-toolbar,
#commentModal .comment-editor-hint,
#commentModal .comment-editor-error {
  flex: 0 0 auto;
}

#commentModal .comment-editor-content {
  flex: 1 1 auto;
  min-width: 0;
}

/* The resized dialog supplies the height; only its text area scrolls. */
#commentModal.modal--user-sized .comment-editor-content {
  min-height: 0;
  max-height: none;
}

#commentModal .comment-input-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

#commentModal .comment-input-hint {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 400;
}

#commentModal #commentInput {
  flex: 1 1 auto;
  min-height: 96px;
  resize: none;
}

.diff-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: start;
}

.diff-cell {
  background: #ffffff;
  border: 1px solid var(--muted);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  min-height: 72px;
  max-height: 148px;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 4px;
}

.diff-label {
  font-weight: 700;
  color: var(--ink-soft);
}

.diff-value {
  white-space: pre-wrap;
  line-height: 1.35;
}

.workitem-history-section {
  background: #ffffff;
  border: 1px solid var(--muted);
  border-radius: 12px;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.workitem-history-unchanged { padding-block: 0; }
.workitem-history-unchanged[open] { padding-bottom: var(--ui-space-3); }

.workitem-history-section-title {
  font-weight: 700;
  color: var(--ink);
}

.workitem-history-meta-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.workitem-history-meta-table th,
.workitem-history-meta-table td {
  border: 1px solid #e6dbcf;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  white-space: pre-wrap;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.workitem-history-meta-table thead th {
  background: #f2ebe3;
}

.workitem-history-meta-table th:first-child,
.workitem-history-meta-table td:first-child {
  width: 33.3333%;
}

.workitem-history-meta-table th:last-child,
.workitem-history-meta-table td:last-child {
  width: 66.6667%;
}

.workitem-history-meta-table tbody th {
  background: #faf5ef;
}

.workitem-history-meta-table tbody td {
  background: #fffdfa;
}

@media (max-width: 720px) {
  .workitem-history-meta-table :is(th, td):first-child { width: 40%; }
  .workitem-history-meta-table :is(th, td):last-child { width: 60%; }
}

.workitem-history-diff-text,
.workitem-history-plain {
  white-space: pre-wrap;
  line-height: 1.5;
}

.workitem-history-rich-diff {
  display: grid;
  gap: 10px;
}

.workitem-history-visual-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.workitem-history-visual-pane {
  border: 1px solid #e6dbcf;
  border-radius: 10px;
  background: #fffdfa;
  padding: 10px;
  min-width: 0;
  overflow: auto;
}

.workitem-history-visual-pane-before {
  border-color: #e1b3b3;
  background: #fff7f7;
}

.workitem-history-visual-pane-after {
  border-color: #a8d2ab;
  background: #f6fff6;
}

.workitem-history-visual-label {
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.workitem-history-rich img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 8px 0;
  border: 1px solid #e1d6c9;
  border-radius: 8px;
}

.workitem-history-rich table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
}

.workitem-history-rich td,
.workitem-history-rich th {
  border: 1px solid #e6dbcf;
  padding: 6px 8px;
  vertical-align: top;
}

.workitem-history-table-compare {
  display: grid;
  gap: 12px;
  margin-top: 10px;
  overflow-x: auto;
}

.workitem-history-table-compare table {
  width: 100%;
  border-collapse: collapse;
  background: #fffdfa;
}

.workitem-history-table-compare td,
.workitem-history-table-compare th {
  border: 1px solid #e6dbcf;
  padding: 6px 8px;
  vertical-align: top;
}

.workitem-history-table-compare img {
  max-width: 100%;
  height: auto;
}

.workitem-history-table-row-added > td,
.workitem-history-table-row-added > th,
.workitem-history-table-added td,
.workitem-history-table-added th {
  color: #185f22;
  background: #e2f6e2;
}

.workitem-history-table-row-removed > td,
.workitem-history-table-row-removed > th,
.workitem-history-table-removed td,
.workitem-history-table-removed th {
  color: #8a1f1f;
  background: #ffe4e4;
}

.workitem-history-table-row-removed > td,
.workitem-history-table-row-removed > th {
  text-decoration: line-through;
}

.workitem-history-table-cell-removed,
.workitem-history-table-cell-added {
  display: block;
  margin: -2px -4px;
  padding: 2px 4px;
  border-radius: 3px;
}

.workitem-history-table-cell-removed {
  color: #8a1f1f;
  background: #ffe0e0;
  text-decoration: line-through;
}

.workitem-history-table-cell-added {
  color: #185f22;
  background: #dff3df;
}

.workitem-history-table-cell-removed + .workitem-history-table-cell-added {
  margin-top: 4px;
}

.workitem-history-rich p {
  margin: 0 0 0.75em;
}

.workitem-history-rich p:last-child {
  margin-bottom: 0;
}

.workitem-history-rich ul,
.workitem-history-rich ol {
  margin: 0.5em 0 0.75em;
  padding-left: 1.75em;
}

.workitem-history-rich ul {
  list-style: disc;
}

.workitem-history-rich ol {
  list-style: decimal;
}

.workitem-history-rich li + li {
  margin-top: 0.25em;
}

.workitem-history-rich blockquote {
  margin: 0.75em 0;
  padding: 0.4em 0.8em;
  border-left: 3px solid #c8b7a5;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.6);
}

.workitem-history-rich h1,
.workitem-history-rich h2,
.workitem-history-rich h3,
.workitem-history-rich h4,
.workitem-history-rich h5,
.workitem-history-rich h6 {
  margin: 0.75em 0 0.4em;
  line-height: 1.25;
}

.workitem-history-rich pre {
  max-width: 100%;
  overflow: auto;
  padding: 8px 10px;
  border-radius: 6px;
  white-space: pre-wrap;
  background: #f4eee7;
}

.workitem-history-rich a {
  color: var(--accent);
  text-decoration: underline;
}

.workitem-history-rich-node-added,
.workitem-history-rich-node-removed {
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.workitem-history-rich-node-added {
  color: #185f22;
  background: #dff3df;
}

.workitem-history-rich-node-removed {
  color: #8a1f1f;
  background: #ffe0e0;
  text-decoration: line-through;
}

.workitem-history-diagram-placeholder {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #d6ae49;
  border-radius: 10px;
  background: linear-gradient(180deg, #fff9e7 0%, #fff3cf 100%);
  color: #6d4b00;
  font-weight: 700;
  text-align: center;
  padding: 16px;
}

.workitem-history-meta-table .workitem-history-diff-text,
.workitem-history-meta-table .workitem-history-plain {
  min-height: 20px;
}

.workitem-history-added {
  background: #dff3df;
  color: #185f22;
  padding: 0 1px;
  border-radius: 3px;
}

.workitem-history-removed {
  background: #ffe0e0;
  color: #8a1f1f;
  text-decoration: line-through;
  padding: 0 1px;
  border-radius: 3px;
}

.workitem-history-empty {
  color: var(--ink-soft);
  font-style: italic;
}

.work-list {
  display: grid;
  gap: 10px;
}

.work-card {
  background: var(--canvas);
  border-radius: 12px;
  border: 1px solid var(--muted);
  padding: 12px;
  display: grid;
  gap: 10px;
  box-shadow: 0 10px 30px var(--shadow);
  position: relative;
  max-height: 180px;
  overflow: hidden;
}

.work-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

.work-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 6px;
  font-size: 12px;
  color: var(--ink-soft);
}

.work-desc {
  display: none;
}

.work-card.expanded {
  max-height: 520px;
}

.work-card.expanded .work-desc {
  display: block;
}

.work-card .work-toolbar {
  justify-content: flex-end;
}

.work-card .work-warning {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #f7d9b8;
  border: 1px solid #d7a064;
  border-radius: 8px;
  padding: 2px 6px;
  font-size: 12px;
}

.work-card.highlight {
  box-shadow: 0 0 0 3px #2d5b4e;
}

.type-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--type-icon-bg, #efe7dd);
  border: 1px solid var(--muted);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex: 0 0 auto;
}

.type-icon.type-icon-custom {
  background-color: var(--type-icon-bg, #efe7dd) !important;
  background-image: none !important;
  font-size: 14px;
  color: #1f4b3f;
  margin-right: 5px;
}

.type-icon.type-icon-custom::before {
  content: attr(data-icon-key);
}

.meta-inline-icon {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  font-size: 12px;
}

.field-label-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.custom-field-icon {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  font-size: 11px;
}

.type-icon[data-type="system_requirement"] {
  background-color: #e5f0e8;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%232d5b4e%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M15%208h2m-2%204h2m0%204H7m0-8v4h4V8H7zM5%2020h14a2%202%200%200%200%202-2V6a2%202%200%200%200-2-2H5a2%202%200%200%200-2%202v12a2%202%200%200%200%202%202z%22%2F%3E%3C%2Fsvg%3E");
}

.type-icon[data-type="system_architecture"] {
  background-color: #e3edf7;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%232a4f7a%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M10%204h4v4h-4zm0%2012h4v4h-4zm-7%200h4v4H3zm14%200h4v4h-4zm-5-8v4m0%204v-4m0%200h5a2%202%200%200%201%202%202v2m-7-4H7a2%202%200%200%200-2%202v2%22%2F%3E%3C%2Fsvg%3E");
}

.type-icon[data-type="system_detailed_design"] {
  background-color: #e7eff9;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%232a4f7a%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m6%2012-1.586%201.586a2%202%200%200%200%200%202.828l3.172%203.172a2%202%200%200%200%202.828%200l9.172-9.172a2%202%200%200%200%200-2.828l-3.172-3.172a2%202%200%200%200-2.828%200L12%206m-6%206%202%202m-2-2%203-3m3-3%202%202m-2-2L9%209m0%200%203%203%22%2F%3E%3C%2Fsvg%3E");
}

.type-icon[data-type="software_requirement"] {
  background-color: #eaf1f6;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%232a4f7a%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M15%208h2m-2%204h2m0%204H7m0-8v4h4V8H7zM5%2020h14a2%202%200%200%200%202-2V6a2%202%200%200%200-2-2H5a2%202%200%200%200-2%202v12a2%202%200%200%200%202%202z%22%2F%3E%3C%2Fsvg%3E");
}

.type-icon[data-type="software_architecture"] {
  background-color: #e1ecf8;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%232a4f7a%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M10%204h4v4h-4zm0%2012h4v4h-4zm-7%200h4v4H3zm14%200h4v4h-4zm-5-8v4m0%204v-4m0%200h5a2%202%200%200%201%202%202v2m-7-4H7a2%202%200%200%200-2%202v2%22%2F%3E%3C%2Fsvg%3E");
}

.type-icon[data-type="software_detailed_design"] {
  background-color: #e7eff9;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%232a4f7a%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m6%2012-1.586%201.586a2%202%200%200%200%200%202.828l3.172%203.172a2%202%200%200%200%202.828%200l9.172-9.172a2%202%200%200%200%200-2.828l-3.172-3.172a2%202%200%200%200-2.828%200L12%206m-6%206%202%202m-2-2%203-3m3-3%202%202m-2-2L9%209m0%200%203%203%22%2F%3E%3C%2Fsvg%3E");
}

.type-icon[data-type="hardware_requirement"] {
  background-color: #f0ece6;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%23724f2b%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M15%208h2m-2%204h2m0%204H7m0-8v4h4V8H7zM5%2020h14a2%202%200%200%200%202-2V6a2%202%200%200%200-2-2H5a2%202%200%200%200-2%202v12a2%202%200%200%200%202%202z%22%2F%3E%3C%2Fsvg%3E");
}

.type-icon[data-type="hardware_architecture"] {
  background-color: #efe8dd;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%23724f2b%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M10%204h4v4h-4zm0%2012h4v4h-4zm-7%200h4v4H3zm14%200h4v4h-4zm-5-8v4m0%204v-4m0%200h5a2%202%200%200%201%202%202v2m-7-4H7a2%202%200%200%200-2%202v2%22%2F%3E%3C%2Fsvg%3E");
}

.type-icon[data-type="hardware_detailed_design"] {
  background-color: #f5eee4;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%23724f2b%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m6%2012-1.586%201.586a2%202%200%200%200%200%202.828l3.172%203.172a2%202%200%200%200%202.828%200l9.172-9.172a2%202%200%200%200%200-2.828l-3.172-3.172a2%202%200%200%200-2.828%200L12%206m-6%206%202%202m-2-2%203-3m3-3%202%202m-2-2L9%209m0%200%203%203%22%2F%3E%3C%2Fsvg%3E");
}

.type-icon[data-type="mechanical_requirement"] {
  background-color: #f3e9e1;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%238d4c2f%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M15%208h2m-2%204h2m0%204H7m0-8v4h4V8H7zM5%2020h14a2%202%200%200%200%202-2V6a2%202%200%200%200-2-2H5a2%202%200%200%200-2%202v12a2%202%200%200%200%202%202z%22%2F%3E%3C%2Fsvg%3E");
}

.type-icon[data-type="mechanical_architecture"] {
  background-color: #f6ebe2;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%238d4c2f%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M10%204h4v4h-4zm0%2012h4v4h-4zm-7%200h4v4H3zm14%200h4v4h-4zm-5-8v4m0%204v-4m0%200h5a2%202%200%200%201%202%202v2m-7-4H7a2%202%200%200%200-2%202v2%22%2F%3E%3C%2Fsvg%3E");
}

.type-icon[data-type="mechanical_detailed_design"] {
  background-color: #f7ede6;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%238d4c2f%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m6%2012-1.586%201.586a2%202%200%200%200%200%202.828l3.172%203.172a2%202%200%200%200%202.828%200l9.172-9.172a2%202%200%200%200%200-2.828l-3.172-3.172a2%202%200%200%200-2.828%200L12%206m-6%206%202%202m-2-2%203-3m3-3%202%202m-2-2L9%209m0%200%203%203%22%2F%3E%3C%2Fsvg%3E");
}

.type-icon[data-type="risk_mitigation"] {
  background-color: #efe7f3;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%23523b6a%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M19%2014c0%204-7%207-7%207s-7-3-7-7V5c1.5.167%205%200%207-2%202%202%205.5%202.167%207%202v9z%22%2F%3E%3C%2Fsvg%3E");
}

.type-icon[data-type="bug"] {
  background-color: #f7e7e2;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%23a1322f%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m16%204-2.251%202.251m0%200A5.782%205.782%200%200%200%2012%206a5.56%205.56%200%200%200-1.711.289m3.46-.038c1.551.49%202.417%201.623%202.858%202.749M8%204l2.289%202.289m0%200C9.135%206.67%207.914%207.479%207.339%209m9.268%200A5.66%205.66%200%200%201%2017%2011v2m-.393-4H18c.667%200%202-.4%202-2m-3%206v2a5.66%205.66%200%200%201-.393%202M17%2013h3m-3.393%204c-.585%201.494-1.918%203-4.607%203s-4.022-1.506-4.607-3m9.214%200H18c.667%200%202%20.4%202%202M7.338%209C7.125%209.564%207%2010.226%207%2011v2m.338-4H6c-.667%200-2-.4-2-2m3%206v2c0%20.546.107%201.272.393%202M7%2013H4m3.393%204H6c-.667%200-2%20.4-2%202m8-9h.001M10%2013h.001M14%2013h.001%22%2F%3E%3C%2Fsvg%3E");
}

.type-icon[data-type="system_test"] {
  background-color: #e6f0ef;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%232d5b4e%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M8%205H6a2%202%200%200%200-2%202v12a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V7a2%202%200%200%200-2-2h-2M8%205v0a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v0M8%205v0a2%202%200%200%200%202%202h4a2%202%200%200%200%202-2v0%22%2F%3E%3Cpath%20stroke%3D%22%232d5b4e%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m9%2014%202%202%204-5%22%2F%3E%3C%2Fsvg%3E");
}

.type-icon[data-type="software_test"] {
  background-color: #e7eef7;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%232a4f7a%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M8%205H6a2%202%200%200%200-2%202v12a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V7a2%202%200%200%200-2-2h-2M8%205v0a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v0M8%205v0a2%202%200%200%200%202%202h4a2%202%200%200%200%202-2v0%22%2F%3E%3Cpath%20stroke%3D%22%232a4f7a%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m9%2014%202%202%204-5%22%2F%3E%3C%2Fsvg%3E");
}

.type-icon[data-type="hardware_test"] {
  background-color: #f0ece6;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%23724f2b%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M8%205H6a2%202%200%200%200-2%202v12a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V7a2%202%200%200%200-2-2h-2M8%205v0a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v0M8%205v0a2%202%200%200%200%202%202h4a2%202%200%200%200%202-2v0%22%2F%3E%3Cpath%20stroke%3D%22%23724f2b%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m9%2014%202%202%204-5%22%2F%3E%3C%2Fsvg%3E");
}

.type-icon[data-type="mechanical_test"] {
  background-color: #f3e9e1;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%238d4c2f%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M8%205H6a2%202%200%200%200-2%202v12a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V7a2%202%200%200%200-2-2h-2M8%205v0a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v0M8%205v0a2%202%200%200%200%202%202h4a2%202%200%200%200%202-2v0%22%2F%3E%3Cpath%20stroke%3D%22%238d4c2f%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m9%2014%202%202%204-5%22%2F%3E%3C%2Fsvg%3E");
}

.meta-panel {
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.meta-resizable {
  overflow: auto;
  height: 100%;
}

.reviewer-line {
  font-size: 12px;
  color: var(--ink);
  padding: 8px 10px;
  border: 1px solid #e2d7c9;
  border-radius: 10px;
  background: #fffaf5;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.reviewer-line.review-status-accepted {
  border-left: 4px solid #4f9b5f;
}

.reviewer-line.review-status-rejected {
  border-left: 4px solid #c65252;
}

.reviewer-line.review-status-pending {
  border-left: 4px solid #5d87c0;
}

.reviewer-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.reviewer-name {
  font-weight: 700;
  color: #2a2521;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reviewer-meta {
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.35;
}

.reviewer-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.review-status-pill {
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 8px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.review-status-pill.accepted {
  color: #296131;
  background: #eaf7ec;
  border-color: #79b27f;
}

.review-status-pill.rejected {
  color: #9f2d2d;
  background: #fdeeee;
  border-color: #d18484;
}

.review-status-pill.pending {
  color: #1f4f8e;
  background: #eaf2ff;
  border-color: #81a8db;
}

.reviewer-pick-list {
  border: 1px solid #d6c8b8;
  border-radius: 12px;
  background: linear-gradient(180deg, #fffaf5 0%, #f9f3ea 100%);
  padding: 10px;
  display: grid;
  gap: 8px;
  max-height: 180px;
  overflow: auto;
}

.workitem-searchable-picker {
  position: relative;
  width: 100%;
}

.workitem-searchable-picker-trigger {
  width: 100%;
  min-height: 36px;
  padding: 7px 34px 7px 10px;
  border: 1px solid var(--muted);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
}

.workitem-searchable-picker-trigger::after {
  content: "▾";
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-soft);
}

.workitem-searchable-picker-trigger[aria-expanded="true"]::after {
  transform: translateY(-50%) rotate(180deg);
}

.workitem-searchable-picker-selection {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

.workitem-searchable-picker-chip,
.workitem-searchable-picker-overflow {
  display: inline-block;
  min-width: 0;
  padding: 2px 6px;
  border-radius: 999px;
  background: #eef5ff;
  color: #285985;
  font-size: 12px;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
}

.workitem-searchable-picker-overflow {
  flex: 0 0 auto;
  background: #e8ddd1;
  color: var(--ink);
  font-weight: 700;
}

.workitem-searchable-picker-chip[hidden],
.workitem-searchable-picker-overflow[hidden] {
  display: none !important;
}

.workitem-searchable-picker-overlay {
  position: absolute;
  z-index: 1200;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  padding: 8px;
  border: 1px solid #ccb9a4;
  border-radius: 11px;
  background: #fffaf5;
  box-shadow: 0 12px 30px rgba(64, 46, 32, 0.2);
}

.workitem-searchable-picker-search {
  width: 100%;
  margin-bottom: 7px;
  background: #fff;
}

.workitem-searchable-picker-overlay .reviewer-pick-list {
  max-height: 220px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.workitem-searchable-picker-native {
  display: none !important;
}

.work-item-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin: 5px 0 4px;
  padding: 5px;
  border: 1px solid #ded7ce;
  border-radius: 9px;
  background: #fbf9f6;
  overflow: visible;
  position: relative;
  z-index: 20;
}

.field:has(> .work-item-toolbar .tool-color-popover:not([hidden])),
.work-item-test-fields > .field:has(.work-item-toolbar .tool-color-popover:not([hidden])) {
  position: relative;
  z-index: 3100;
}

.work-item-toolbar[hidden] {
  display: none !important;
}

.work-item-toolbar .tool-btn,
.wi-inline-rich-toolbar .tool-btn {
  min-height: 32px;
  padding: 1px;
  border-color: transparent;
  border-radius: 6px;
  background: transparent;
  line-height: 1.1;
}

.work-item-toolbar .tool-btn:hover:not(:disabled),
.wi-inline-rich-toolbar .tool-btn:hover:not(:disabled) {
  border-color: #d4c9bd;
  background: #f0eae3;
}

.work-item-toolbar .tool-btn.is-active,
.wi-inline-rich-toolbar .tool-btn.is-active {
  border-color: #7fa596;
  background: #dcebe6;
  color: #204d40;
  box-shadow: inset 0 0 0 1px rgba(45, 91, 78, 0.08);
}

.work-item-toolbar .tool-btn.is-mixed,
.wi-inline-rich-toolbar .tool-btn.is-mixed,
.work-item-toolbar .tool-select.is-mixed,
.wi-inline-rich-toolbar .tool-select.is-mixed {
  border-color: #b9a98f;
  background: repeating-linear-gradient(
    135deg,
    #f7f2ec,
    #f7f2ec 4px,
    #ede4da 4px,
    #ede4da 8px
  );
}

.work-item-toolbar .tool-btn.icon-only,
.wi-inline-rich-toolbar .tool-btn.icon-only {
  width: 34px;
  min-width: 34px;
  height: 32px;
}

.work-item-toolbar .tool-btn.icon-glyph,
.wi-inline-rich-toolbar .tool-btn.icon-glyph {
  width: 32px;
  min-width: 32px;
  height: 32px;
  font-family: Arial, sans-serif;
  font-size: 17px;
}

.work-item-toolbar .tool-color-btn,
.wi-inline-rich-toolbar .tool-color-btn {
  min-width: 38px;
  height: 32px;
  justify-content: center;
  padding: 4px 6px;
}

.work-item-toolbar .icon,
.wi-inline-rich-toolbar .icon {
  width: 22px;
  height: 22px;
}

.workitem-custom-rich-editor {
  min-height: 150px;
  max-height: 360px;
  overflow: auto;
}

.field-validation-error {
  display: block;
  margin-top: 4px;
  color: #a12622;
  font-size: 12px;
  font-weight: 600;
}

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

.field input.is-invalid,
.field textarea.is-invalid,
.field select.is-invalid {
  border-color: #c53a32;
  box-shadow: 0 0 0 2px rgba(197, 58, 50, 0.14);
}

.workitem-color-symbol {
  color: #2d5ea8;
  border-bottom: 3px solid #2d5ea8;
  font-weight: 700;
}

.workitem-highlight-symbol {
  padding: 0 2px;
  background: #fff2a8;
  font-weight: 700;
}

.trace-tree-section {
  margin-top: 0;
  padding: 16px;
  border: 1px solid var(--muted);
  border-radius: 14px;
  background: #fffdf9;
}

.traceability-projection-panel[hidden] {
  display: none !important;
}

.trace-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.meta-traceability-header {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.meta-traceability-view-toggle {
  flex: 0 0 auto;
}

.meta-traceability-view-toggle .ghost {
  padding: 6px 9px;
  font-size: 12px;
}

.meta-traceability-view-panel[hidden] {
  display: none !important;
}

#metaTraceabilityCompactView {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #ded2c5;
}

.meta-traceability-subheading {
  margin-top: 0;
}

.trace-tree-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.trace-tree-heading h2 {
  margin: 0;
  font-size: 18px;
}

.trace-tree-heading p {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
}

.trace-tree {
  overflow: auto;
  padding: 2px 2px 8px;
}

.trace-tree-root,
.trace-tree-node ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.trace-tree-node {
  position: relative;
  min-width: 320px;
  margin-left: calc(var(--trace-tree-level-gap, 0) * 48px);
}

.trace-tree-node + .trace-tree-node {
  margin-top: 8px;
}

.trace-tree-node ul {
  position: relative;
  margin: 7px 0 0 24px;
  padding-left: 24px;
  border-left: 1px solid #cbbba9;
}

.trace-tree-node ul > .trace-tree-node::before {
  content: "";
  position: absolute;
  top: 22px;
  left: -24px;
  width: 24px;
  border-top: 1px solid #cbbba9;
}

.trace-tree-node details > summary {
  list-style: none;
  cursor: pointer;
}

.trace-tree-node details > summary::-webkit-details-marker {
  display: none;
}

.trace-tree-node details > summary .trace-tree-node-card::before {
  content: "▸";
  width: 16px;
  color: var(--ink-soft);
  transition: transform 120ms ease;
}

.trace-tree-node details[open] > summary .trace-tree-node-card::before {
  transform: rotate(90deg);
}

.trace-tree-leaf > .trace-tree-node-card::before {
  content: "";
  width: 16px;
}

.trace-tree-node-card {
  display: grid;
  grid-template-columns: 16px minmax(90px, auto) minmax(220px, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 7px 10px;
  border: 1px solid #ded2c5;
  border-radius: 10px;
  background: #fff;
}

.trace-tree-node-card:hover {
  border-color: #bfa991;
  box-shadow: 0 3px 10px rgba(65, 47, 34, 0.08);
}

.trace-tree-node-card.is-current {
  border-color: #2d5b4e;
  background: #e5f2ed;
  box-shadow: 0 0 0 2px rgba(45, 91, 78, 0.16);
}

.meta-trace-tree-section {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #ded2c5;
}

.trace-tree-sidebar {
  max-height: 460px;
  overflow: auto;
}

.trace-tree-compact .trace-tree-node {
  min-width: 0;
  margin-left: 0;
}

.trace-tree-compact .trace-tree-node ul {
  margin-left: 9px;
  padding-left: 11px;
}

.trace-tree-compact .trace-tree-node ul > .trace-tree-node::before {
  left: -11px;
  width: 11px;
}

.trace-tree-compact .trace-tree-node-card {
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 5px;
  min-height: 38px;
  padding: 6px;
}

.trace-tree-compact .trace-tree-level-badge {
  grid-column: 2;
  width: max-content;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trace-tree-compact .trace-tree-node-main,
.trace-tree-compact .trace-tree-node-meta {
  grid-column: 2;
  flex-wrap: wrap;
}

.trace-tree-compact .trace-tree-node-meta {
  justify-content: flex-start;
}

.trace-tree-compact .trace-tree-title {
  flex-basis: 100%;
  white-space: normal;
}

.trace-tree-level-badge {
  padding: 3px 7px;
  border-radius: 999px;
  background: #eaf4f0;
  color: #28594e;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.trace-tree-node-main,
.trace-tree-node-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.trace-tree-code {
  color: var(--accent-2);
  font-weight: 700;
  white-space: nowrap;
}

.trace-tree-code.is-deleted {
  color: var(--ink-soft);
  text-decoration: line-through;
}

.trace-tree-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trace-tree-node-meta {
  justify-content: flex-end;
  color: var(--ink-soft);
  font-size: 11px;
  white-space: nowrap;
}

.trace-tree-status,
.trace-tree-result {
  padding: 2px 6px;
  border-radius: 999px;
  background: #f0ece7;
}

.trace-tree-result.result-pass,
.trace-tree-result.result-passed {
  background: #eaf7ec;
  color: #296131;
}

.trace-tree-result.result-fail,
.trace-tree-result.result-failed {
  background: #fdeeee;
  color: #9f2d2d;
}

@media (max-width: 760px) {
  .trace-tree-node-card {
    grid-template-columns: 16px auto minmax(180px, 1fr);
  }

  .trace-tree-node-meta {
    grid-column: 2 / -1;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

.reviewer-pick-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid #e4d9cd;
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.reviewer-pick-row:hover {
  border-color: #d0b9a1;
  background: #fff9f2;
}

.reviewer-pick-row:has(input:checked) {
  border-color: #81a8db;
  background: #eef5ff;
  box-shadow: inset 0 0 0 1px #81a8db;
}

.reviewer-pick-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.meta-panel .placeholder {
  color: var(--ink-soft);
}

.meta-suspect-hint {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #e5be67;
  background: #fff6df;
  color: #7a5300;
  font-weight: 700;
}

.meta-collab-card {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #d8ddd7;
  background: #f8faf7;
  color: var(--ink-soft);
  font-size: 12px;
  display: grid;
  gap: 3px;
}

.meta-collab-card.locked {
  background: #f6ece7;
  border-color: #d7b8a5;
  color: #7a4a2b;
}

.meta-collab-card.owned {
  background: #eef5ef;
  border-color: #b9d0ba;
  color: #2f5d39;
}

.meta-collab-card.changed {
  background: #eef4ff;
  border-color: #b7caea;
  color: #294f86;
}

.meta-collab-title {
  font-weight: 700;
  color: var(--ink);
}

.wi-block {
  border: 1px solid var(--muted);
  border-left: 6px solid #c8c8c8;
  padding: 10px;
  margin: 8px 0 10px;
  background: #f7f7f7;
  position: relative;
  overflow: visible;
}

.wi-block-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 22px;
  margin-bottom: 6px;
}

.wi-block-below-controls,
.wi-review-actions {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px;
  z-index: 2;
}

.wi-block-below-controls { left: calc(100% + 6px); }
/* Account for the work-item status border on the left. */
.wi-review-actions { right: calc(100% + 12px); }

/* Keep the page gutter usable with custom margins and work items in cells. */
.doc-canvas .wi-block {
  --wi-action-gutter: 44px;
  margin-right: max(0px, calc(var(--wi-action-gutter) - var(--doc-content-inline-padding, 0px)));
}
.doc-canvas :is(td, th) .wi-block { margin-right: var(--wi-action-gutter); }
.doc-canvas .wi-block:has(.wi-review-actions:not([hidden])) {
  margin-left: max(0px, calc(var(--wi-action-gutter) - var(--doc-content-inline-padding, 0px)));
}
.doc-canvas :is(td, th) .wi-block:has(.wi-review-actions:not([hidden])) { margin-left: var(--wi-action-gutter); }


.wi-block-below-controls::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -7px;
  width: 7px;
}

@media (pointer: coarse) {
  .doc-canvas .wi-block { --wi-action-gutter: 56px; }
}
@media print {
  .wi-block-below-controls, .wi-lock { display: none !important; }
  .doc-canvas .wi-block { margin-right: 0; margin-left: 0; }
}

.wi-test-prerequisite-label,
.testing-prerequisite-heading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wi-block.wi-review-none {
  border-left-color: #c8c8c8;
  background: #f3f3f3;
}

.wi-block.wi-review-self-pending {
  border-left-color: #d7b44a;
  background: #fff8db;
}

.wi-block.wi-review-others-pending {
  border-left-color: #6d96cd;
  background: #edf4ff;
}

.wi-block.wi-review-accepted {
  border-left-color: #5ea36a;
  background: #edf9ef;
}

.wi-block.wi-review-rejected {
  border-left-color: #cf4b4b;
  background: #fdeeee;
}

.wi-block.wi-review-filtered {
  min-height: 42px;
  padding: 8px 12px;
  border-color: #d1c7bc;
  border-left-color: #8d8378;
  background: #f2eee9;
  cursor: default;
}

.wi-block.wi-review-filtered .wi-block-controls,
.wi-block.wi-review-filtered .wi-block-content,
.wi-block.wi-review-filtered .wi-block-below-controls {
  display: none;
}

.wi-block.wi-review-filtered::before {
  content: attr(data-review-filter-label);
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  background: #fffaf5;
  border: 1px solid #d1c7bc;
  color: #6a5f54;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
}

body.sidebar-resizing,
body.sidebar-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

body.sidebar-resizing [data-sidebar-resize-preview="1"] {
  z-index: 20;
}

.wi-gap {
  margin: 6px 0 10px;
}

.wi-block.wi-document-editing {
  box-shadow: 0 0 0 2px var(--accent-2);
}

.wi-block.wi-selected,
.wi-block.ProseMirror-selectednode {
  outline: none;
}

.wi-block.wi-status-draft .wi-status {
  color: #7a6d62;
}

.wi-block.wi-status-accepted .wi-status {
  color: #2a7a39;
  font-weight: 700;
}

.wi-block.wi-status-denied .wi-status {
  color: #a33131;
  font-weight: 700;
}

.wi-block.wi-inline-editing:not(.wi-document-editing) {
  background: #fffdf8;
}

.wi-inline-title-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #cdbca8;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  padding: 6px 8px;
  margin-bottom: 8px;
  font-weight: 700;
}

.wi-inline-desc-host {
  border: 1px solid #d5c6b5;
  border-radius: 8px;
  background: #fff;
  overflow: visible;
  position: relative;
}

.wi-inline-rich-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 5px;
  border-bottom: 1px solid #ded7ce;
  background: #fbf9f6;
  overflow: visible;
  position: relative;
  z-index: 20;
}

.wi-inline-desc-host:has(.tool-color-popover:not([hidden])),
.wi-inline-desc-editor:has(.tool-color-popover:not([hidden])) {
  z-index: 3100;
}

.wi-inline-font-size {
  width: 58px;
  min-height: 30px;
  padding: 3px 5px;
}

.wi-inline-color-input {
  width: 32px;
  min-width: 32px;
  height: 30px;
  padding: 2px;
  border: 1px solid #cdbca8;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.wi-inline-rich-surface {
  min-height: 120px;
  max-height: 360px;
  overflow: auto;
}

.wi-inline-rich-surface.ProseMirror,
.wi-inline-rich-surface .ProseMirror {
  min-height: 120px;
  max-height: 800px;
  padding: 8px 8px 8px 14px;
  outline: none;
  font-family: var(--doc-font-family);
  font-size: var(--doc-default-font-size);
  line-height: 1.45;
}

.wi-inline-rich-surface.ProseMirror p,
.wi-inline-rich-surface .ProseMirror p {
  margin: 0 0 8px;
}

/* Document fields share the page typography and paragraph rhythm. */
:is(.wi-document-editing, .wi-document-prepared) .wi-inline-rich-surface.ProseMirror {
  font: inherit;
}
.doc-canvas :is(.wi-document-editing, .wi-document-prepared) .wi-inline-rich-surface p {
  margin: 6px 0;
}
.doc-canvas :is(.wi-document-editing, .wi-document-prepared) .wi-inline-rich-surface :is(td, th) > p {
  margin: 0;
}

.wi-inline-rich-surface.ProseMirror table.wi-inline-table,
.wi-inline-rich-surface .ProseMirror table.wi-inline-table {
  border: 1px solid #cdbca8;
  border-collapse: collapse;
}

.wi-inline-rich-surface.ProseMirror table.wi-inline-table th,
.wi-inline-rich-surface.ProseMirror table.wi-inline-table td,
.wi-inline-rich-surface .ProseMirror table.wi-inline-table th,
.wi-inline-rich-surface .ProseMirror table.wi-inline-table td {
  border: 1px solid #cdbca8;
}

.wi-inline-rich-surface.ProseMirror img,
.wi-inline-rich-surface .ProseMirror img,
.wi-desc img {
  max-width: 100%;
  height: auto;
}

.wi-desc.wi-desc-empty {
  min-height: 26px;
  border: 1px dashed #d8cab9;
  border-radius: 6px;
  background: #fffaf5;
  padding: 2px 6px;
}

.wi-inline-actions {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.wi-inline-test-step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.wi-inline-test-step-action {
  min-height: 34px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 12px;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.wi-inline-add-test-step {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 5px rgba(177, 35, 40, 0.2);
}

.wi-inline-add-test-step:hover,
.wi-inline-add-test-step:focus-visible {
  background: #bd242a;
  box-shadow: 0 3px 8px rgba(177, 35, 40, 0.28);
}

.wi-inline-remove-test-step {
  background: #fff;
  color: var(--accent);
}

.wi-inline-remove-test-step:hover,
.wi-inline-remove-test-step:focus-visible {
  background: #fff0f0;
}

.wi-inline-test-step-icon {
  font-size: 18px;
  line-height: 1;
}

.wi-inline-test-step-action:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

.wi-inline-save,
.wi-inline-cancel {
  border: 1px solid #cdbca8;
  border-radius: 8px;
  background: #fffaf5;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  cursor: pointer;
}

.wi-inline-save {
  border-color: #6ca676;
  background: #edf9ef;
  color: #296131;
}

.wi-inline-custom-fields-section,
.work-item-custom-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.wi-inline-editing .wi-inline-custom-fields-section {
  font-family: var(--doc-font-family);
  font-size: var(--doc-default-font-size);
  line-height: 1.45;
}

.wi-inline-editing .wi-inline-custom-fields-section input,
.wi-inline-editing .wi-inline-custom-fields-section select,
.wi-inline-editing .wi-inline-custom-fields-section textarea,
.wi-inline-editing .wi-inline-custom-fields-section button {
  font: inherit;
}

.wi-inline-pre-condition-section {
  margin-top: 8px;
}

.wi-inline-pre-condition-section .workitem-custom-rich-editor {
  background: #fff;
}

.wi-remove {
  background: #efe7dd;
  border: 1px solid var(--muted);
  border-radius: 8px;
  padding: 2px 6px;
  font-size: 12px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.wi-drag-handle {
  border: 1px solid var(--muted);
  border-radius: 8px;
  background: #efe7dd;
  color: #5c564f;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1;
  min-width: 22px;
  min-height: 22px;
  cursor: move;
  margin-left: -24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.wi-insert,
.wi-trace-link {
  background: #efe7dd;
  border: 1px solid var(--muted);
  border-radius: 8px;
  width: 22px;
  height: 22px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.wi-trace-link .btn-icon {
  width: 13px;
  height: 13px;
  flex-basis: 13px;
}

.wi-trace-link:disabled {
  cursor: not-allowed;
}

.wi-block:hover .wi-remove,
.wi-block:hover .wi-insert,
.wi-block:hover .wi-trace-link,
.wi-block:hover .wi-drag-handle,
.wi-block.wi-selected .wi-remove,
.wi-block.wi-selected .wi-insert,
.wi-block.wi-selected .wi-trace-link,
.wi-block.wi-selected .wi-drag-handle,
.wi-block.ProseMirror-selectednode .wi-remove,
.wi-block.ProseMirror-selectednode .wi-insert,
.wi-block.ProseMirror-selectednode .wi-trace-link,
.wi-block.ProseMirror-selectednode .wi-drag-handle {
  opacity: 1;
  pointer-events: auto;
}

.wi-block:hover .wi-trace-link:disabled,
.wi-block.wi-selected .wi-trace-link:disabled,
.wi-block.ProseMirror-selectednode .wi-trace-link:disabled {
  opacity: 0.45;
}

.trace-link-recent {
  width: 100%;
  border: 1px solid #d8cbbb;
  border-radius: 8px;
  background: #fffaf5;
  color: var(--ink-soft);
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.trace-link-recent:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trace-link-recent:hover,
.trace-link-recent:focus-visible {
  border-color: #bca88f;
  background: #f7eee4;
}

.trace-link-recent-prefix {
  flex: 0 0 auto;
}

.trace-link-recent-item {
  min-width: 0;
  flex: 1 1 auto;
}

.wi-block-content {
  cursor: text;
}

.wi-title,
.wi-desc {
  outline: none;
  margin-top: 6px;
}

.wi-block .wi-title {
  position: relative;
  padding-left: 30px;
}
.doc-canvas .wi-block .wi-title {
  display: block;
}

.wi-block .wi-block-content>p:first-child {
  position: relative;
  padding-left: 30px;
}

.wi-block .wi-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--muted);
  background-color: #e5f0e8;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%232d5b4e%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M15%208h2m-2%204h2m0%204H7m0-8v4h4V8H7zM5%2020h14a2%202%200%200%200%202-2V6a2%202%200%200%200-2-2H5a2%202%200%200%200-2%202v12a2%202%200%200%200%202%202z%22%2F%3E%3C%2Fsvg%3E");
  pointer-events: none;
}

.wi-block .wi-title:has(> .type-icon)::before {
  display: none;
}

.wi-block .wi-block-content>p:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--muted);
  background-color: #e5f0e8;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%232d5b4e%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M15%208h2m-2%204h2m0%204H7m0-8v4h4V8H7zM5%2020h14a2%202%200%200%200%202-2V6a2%202%200%200%200-2-2H5a2%202%200%200%200-2%202v12a2%202%200%200%200%202%202z%22%2F%3E%3C%2Fsvg%3E");
  pointer-events: none;
}

.wi-block .wi-title>.type-icon {
  position: absolute;
  left: 0;
  top: 1px;
  display: inline-flex;
}

.wi-meta-table-wrap {
  margin-top: 8px;
}

.wi-meta-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
  background: transparent;
}

.wi-meta-table th,
.wi-meta-table td {
  border: 1px solid var(--doc-table-border);
  padding: 6px 8px;
  vertical-align: top;
}

.wi-meta-table th {
  width: 25%;
  background: var(--doc-table-th-bg);
  font-weight: 700;
  color: var(--doc-table-th-text);
}

/* Work-item metadata is a label/value table, not a document table header. */
#docCanvas.ProseMirror .wi-meta-table > tbody > tr > th {
  background: var(--doc-table-th-bg);
  color: var(--doc-table-th-text);
}

.wi-meta-table td {
  width: 75%;
  background-color: var(--doc-table-td-bg);
}

.wi-meta-empty {
  color: #7a6f64;
  font-style: italic;
}

.doc-wi-meta-link-row {
  display: block;
  margin: 2px 0;
}

.doc-wi-meta-link-dir {
  color: #62584f;
  font-weight: 600;
}

.wi-test-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
  table-layout: fixed;
}

.wi-test-table th {
  width: 25%;
  background: var(--doc-table-th-bg);
  color: var(--doc-table-th-text);
  text-align: left;
  padding: 6px 8px;
  border: 1px solid var(--doc-table-border);
  font-weight: 600;
  vertical-align: top;
  user-select: none;
}

.wi-test-table td {
  width: 75%;
  padding: 6px 8px;
  border: 1px solid var(--doc-table-border);
  background-color: var(--doc-table-td-bg);
  vertical-align: top;
  min-height: 36px;
}

.wi-test-table th>p,
.wi-test-table td>p {
  margin-top: 0;
  margin-bottom: 0;
}

.wi-test-table td[contenteditable="false"] {
  background: var(--doc-table-td-bg);
}

.wi-test-table td[contenteditable="true"]:focus {
  outline: 2px solid var(--accent-2);
  background: #fffdf9;
}

.wi-test-rating {
  padding: 4px 6px;
  border-radius: 8px;
  border: 1px solid var(--muted);
  background: #fffaf5;
}

.wi-test-rating-value {
  font-weight: 600;
}

.wi-test-rating-meta {
  margin-top: 4px;
  font-size: 11px;
  color: var(--ink-soft);
}

.wi-test-steps-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  table-layout: fixed;
}

.wi-test-steps-table.teststep-table {
  width: 100%;
  table-layout: fixed;
}

.wi-test-steps-table.teststep-table th,
.wi-test-steps-table.teststep-table td {
  border: 1px solid var(--doc-table-border);
  padding: 6px 8px;
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.wi-test-steps-table.teststep-table .test-step-id-cell {
  width: 60px;
  min-width: 60px;
  max-width: 60px;
  text-align: center;
  font-weight: 700;
  background: var(--doc-table-th-bg);
  color: var(--doc-table-th-text);
  user-select: none;
}

.wi-test-step-chapters {
  display: grid;
  gap: 0;
}

.wi-test-step-chapter {
  display: grid;
  gap: 8px;
  padding: 14px 0 18px;
  border-bottom: 2px solid var(--doc-table-border);
}

.wi-test-step-chapter:first-child {
  padding-top: 4px;
}

.wi-test-step-chapter h4,
.wi-test-step-chapter h5,
.wi-test-overall-result h4,
.wi-test-overall-result h5 {
  margin: 0;
}

.wi-test-step-chapter h4,
.wi-test-overall-result h4 {
  color: var(--doc-heading-color);
}

.wi-test-step-field {
  display: grid;
  gap: 4px;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid var(--doc-table-border);
  border-radius: 4px;
  background: var(--doc-table-td-bg);
}

.wi-test-overall-result .wi-test-result {
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid var(--doc-table-border);
  border-radius: 4px;
  background: var(--doc-table-td-bg);
}

.wi-test-overall-result {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 2px solid var(--doc-table-border);
  border-radius: 6px;
  background: #fffaf5;
}

.test-run-snapshot-provenance, .test-run-snapshot-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    margin: 2px 0 8px;
    font-size: 0.8rem;
    font-weight: 400;
    margin-top: 8px;
}

.test-run-snapshot-provenance:not(a) {
  color: var(--ink-soft);
}

.wi-test-steps-table.teststep-table td {
  background-color: var(--doc-table-td-bg);
}

.wi-test-steps-table.teststep-table > thead > tr > th,
.wi-test-steps-table.teststep-table > tbody > tr:first-child > th {
  background: var(--doc-table-header-bg);
  color: var(--doc-table-header-text);
}

.wi-test-steps-table.teststep-table > thead > tr > th.test-step-id-cell,
.wi-test-steps-table.teststep-table > tbody > tr:first-child > th.test-step-id-cell {
  background: var(--doc-table-header-bg);
  color: var(--doc-table-header-text);
}

.wi-test-steps-table.teststep-table .test-step-text-cell {
  width: auto;
  min-height: 28px;
}

.wi-test-steps-table.teststep-table colgroup col:first-child {
  width: 60px !important;
}

.wi-test-steps-table.teststep-table colgroup col:nth-child(2) {
  width: auto !important;
}

.work-item-test-fields {
  display: grid;
  gap: 10px;
}

.work-item-test-step-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.work-item-test-step-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.work-item-test-step-editor {
  padding: 0;
  overflow-x: visible;
}

.work-item-test-step-storage {
  display: none !important;
}

.wi-test-step-pair-table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
}

.wi-test {
  max-width: 100%;
  overflow-x: visible;
}

.wi-test-step-pair-table.has-results {
  font-size: 0.92em;
}

.work-item-test-step-editor .wi-test-step-pair-table {
  min-width: 0;
}

.wi-inline-test-step-pair-host,
.wi-inline-test-step-pair-host .wi-inline-desc-editor,
.wi-inline-test-step-pair-host .wi-inline-rich-surface,
.wi-inline-test-step-pair-host .tableWrapper {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.wi-inline-test-step-pair-host .tableWrapper {
  overflow-x: visible;
}

.wi-inline-test-step-pair-host table.wi-inline-table.wi-test-step-pair-table {
  width: 100% !important;
  max-width: 100%;
  min-width: 100%;
}

.wi-inline-test-step-pair-host .wi-test-step-pair-table > tbody {
  counter-reset: wi-inline-test-step;
}

.wi-inline-test-step-pair-host .wi-test-step-pair-table > tbody
  > tr:not(.wi-test-step-attachment-row):has(> td:first-child) {
  counter-increment: wi-inline-test-step;
}

.wi-inline-test-step-pair-host .wi-test-step-pair-table > tbody
  > tr:not(.wi-test-step-attachment-row):has(> td:first-child) > td:first-child::before {
  content: counter(wi-inline-test-step);
}

.wi-test-step-pair-table.has-results th,
.wi-test-step-pair-table.has-results td {
  width: 33.333%;
}

.wi-test-step-pair-table th,
.wi-test-step-pair-table td {
  width: 50%;
  border: 1px solid var(--doc-table-border);
  padding: 8px 10px;
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.wi-test-step-pair-table th {
  background: var(--doc-table-header-bg);
  color: var(--doc-table-header-text);
  text-align: left;
}

.wi-test-step-pair-table > tbody > tr:not(.wi-test-step-attachment-row):not(.testing-step-attachment-table-row) > td:first-child {
  position: relative;
}

.wi-test-step-pair-table > tbody > tr:not(.wi-test-step-attachment-row):not(.testing-step-attachment-table-row) > td:first-child::before {
  content: attr(data-test-step-number);
  /* Keep the row-border marker outside the text flow. */
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  width: max-content;
  margin: 0;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 12px;
  padding: 0;
  border-radius: 999px;
  background: var(--doc-table-th-bg);
  color: var(--doc-table-th-text);
  font-size: 9px;
  line-height: 12px;
  font-weight: 600;
  user-select: none;
}

.wi-test-step-description-content,
.wi-test-step-criteria-content,
.wi-test-step-result-content {
  min-height: 1lh;
  outline: none;
  cursor: text;
}

:is(.wi-test-step-pair-table, .wi-test-steps-table.teststep-table) td p,
:is(.wi-document-editing, .wi-document-prepared) :is(.wi-test-step-pair-table, .wi-test-steps-table.teststep-table) td p {
  margin: 0 0 4px;
}
:is(.wi-test-step-pair-table, .wi-test-steps-table.teststep-table) td p:last-child,
:is(.wi-document-editing, .wi-document-prepared) :is(.wi-test-step-pair-table, .wi-test-steps-table.teststep-table) td p:last-child {
  margin-bottom: 0;
}

.work-item-test-step-editor .wi-test-step-pair-table td:has([data-test-step-field]) {
  cursor: text;
}

.wi-test-step-attachment-row td {
  width: auto !important;
  padding: 6px 10px;
  background: var(--doc-table-td-bg);
  font-size: 0.9em;
}

.wi-test-step-attachment-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-left: 8px;
}

.wi-test-step-attachment-links a {
  overflow-wrap: anywhere;
}

.wi-test-dut-summary {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.wi-test-dut-components {
  display: grid;
  gap: 2px;
  margin: 4px 0 0;
  padding-left: 18px;
  font-size: 0.9em;
}

@media print {
  .wi-test-step-pair-table,
  .wi-test-step-pair-table.has-results {
    min-width: 0;
    font-size: 9pt;
  }
}

.wi-status {
  color: var(--ink-soft);
  font-size: 12px;
}

.wi-warning {
  background: #f7d9b8;
  border: 1px solid #d7a064;
  border-radius: 8px;
  padding: 2px 6px;
  font-size: 12px;
  display: none;
  align-items: center;
}

.wi-block.missing-link .wi-warning {
  display: inline-flex;
}

.wi-lock {
  background: #d9d1c7;
  border: 1px solid #c8beb3;
  border-radius: 8px;
  padding: 2px 6px;
  font-size: 10px;
  color: #4a4340;
}


.comment-command-menu {
  position: fixed;
  z-index: 3300;
  display: grid;
  max-height: min(320px, 48vh);
  overflow-y: auto;
  padding: 5px;
  border: 1px solid #d4c5b5;
  border-radius: 10px;
  background: #fffdf9;
  box-shadow: 0 14px 34px rgba(48, 37, 26, 0.24);
}

.comment-command-option {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 8px 9px;
  border: 0;
  border-radius: 7px;
  color: var(--ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.comment-command-option:hover,
.comment-command-option.active {
  background: #f1e7db;
}

.comment-command-syntax {
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  font-weight: 700;
}

.comment-command-description {
  min-width: 0;
  color: var(--ink-soft);
  font-size: 12px;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 15, 11, 0.55);
  z-index: 20;
}

.modal {
  position: fixed;
  inset: 10% auto auto 50%;
  transform: translateX(-50%);
  background: var(--canvas);
  border-radius: 16px;
  border: 1px solid var(--muted);
  box-shadow: 0 20px 40px var(--shadow);
  width: min(720px, 92vw);
  max-height: 86vh;
  z-index: 30;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px;
}

#pasteModal {
  z-index: 70;
}
.branding-modal {
  height: min(780px, 88vh);
}
.branding-modal .modal-body { min-height: 0; }
.branding-workspace {
  display: grid;
  flex-shrink: 0;
  grid-template-columns: minmax(300px, 1fr) minmax(300px, 0.9fr);
  gap: var(--ui-space-5);
  height: min(590px, calc(88dvh - 190px));
  min-height: 420px;
  padding-block: var(--ui-space-3);
}
.branding-preview-area { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: var(--ui-space-3); background: var(--ui-workspace); }
.branding-preview-area > p { margin: var(--ui-space-2) 0 0; }
.branding-preview-caption { display: flex; justify-content: space-between; gap: var(--ui-space-3); flex-wrap: wrap; margin-bottom: var(--ui-space-2); }
.branding-page { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: var(--ui-space-2); background: var(--canvas); border: 1px solid var(--muted); }
.branding-page-zones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-space-1); }
.branding-page-zones > :nth-child(2) { text-align: center; }
.branding-page-zones > :nth-child(3) { text-align: right; }
.branding-page-content { flex: 1; min-height: 24px; overflow: hidden; padding: var(--ui-space-3) var(--ui-space-2); overflow-wrap: anywhere; }
.branding-page-lines { display: grid; gap: var(--ui-space-2); margin-top: var(--ui-space-3); }
.branding-page-lines span { height: 2px; background: var(--muted); }
.branding-page-lines span:nth-child(3n) { width: 72%; margin-bottom: var(--ui-space-3); }
.branding-note-zone { margin-bottom: var(--ui-space-2); }
.branding-note-zone > button { width: 100%; }
.branding-region-editor { min-width: 0; min-height: 0; overflow: auto; padding-inline-end: var(--ui-space-3); }
.branding-region-editor h3 { margin: 0 0 var(--ui-space-4); }
.branding-region-editor textarea { width: 100%; resize: vertical; }
.branding-region-editor .field-img-tools { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); margin-block: var(--ui-space-3); }
.branding-tokens { margin-block: var(--ui-space-4); }
.branding-tokens summary { cursor: pointer; }
.branding-logo-workspace { display: grid; flex-shrink: 0; grid-template-columns: 1fr 1fr; gap: var(--ui-space-5); padding: var(--ui-space-5); }
.branding-logo-settings { min-width: 0; }
.branding-logo-stage { display: grid; align-content: center; justify-items: center; min-height: 220px; background: var(--paper); padding: var(--ui-space-5); overflow: hidden; }
.branding-logo-stage img { max-width: 100%; object-fit: contain; }
@media (max-width: 760px) {
  .branding-workspace, .branding-logo-workspace { grid-template-columns: 1fr; }
  .branding-workspace { height: auto; min-height: 0; }
  .branding-modal { height: 90vh; inset-block-start: 5vh; }
  .branding-preview-area { min-height: auto; }
  .branding-page { min-height: 400px; }
  .branding-region-editor { min-height: auto; overflow: visible; padding: var(--ui-space-3); }
}

#promptModal {
  z-index: 80;
}

#diagramModal {
  width: min(100%, 96vw);
  height: min(92vh, 980px);
  inset: 4vh auto auto 50%;
  grid-template-rows: auto 1fr;
  z-index: 60;
}

#diagramModal .modal-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

#diagramModal .diagram-embed {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  height: 100%;
  width: 100%;
  max-width: none;
  margin: 0;
}
.diagram-status {
  flex-shrink: 0;
  max-height: 65%;
  overflow: auto;
}
.diagram-status p {
  margin: 0 0 var(--ui-space-3);
}
.diagram-status pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  margin: 0 0 var(--ui-space-3);
}

#diagramModal iframe {
  width: 100%;
  height: 100%;
  border: none;
  flex: 1 1 auto;
}

#imagePreviewModal {
  width: min(1180px, 96vw);
  height: min(92vh, 920px);
  inset: 4vh auto auto 50%;
  grid-template-rows: auto 1fr auto;
  z-index: 65;
}

#imagePreviewModal .modal-header,
#imagePreviewModal .modal-actions {
  flex: 0 0 auto;
}

#imagePreviewModal .image-preview-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 12px;
  overflow: hidden;
}

.image-preview-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.image-preview-toolbar input[type="range"] {
  width: min(240px, 48vw);
}

.image-preview-zoom-label {
  min-width: 60px;
  font-weight: 700;
  color: #2f2a26;
}

.image-preview-viewport {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--muted);
  border-radius: 12px;
  background:
    linear-gradient(45deg, rgba(214, 206, 196, 0.32) 25%, transparent 25%, transparent 75%, rgba(214, 206, 196, 0.32) 75%),
    linear-gradient(45deg, rgba(214, 206, 196, 0.32) 25%, transparent 25%, transparent 75%, rgba(214, 206, 196, 0.32) 75%);
  background-color: #faf6f0;
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
  padding: 18px;
  cursor: default;
  user-select: none;
}

.image-preview-viewport.is-pannable {
  cursor: grab;
}

.image-preview-viewport.is-panning {
  cursor: grabbing;
}

.image-preview-image {
  display: block;
  max-width: none;
  height: auto;
  margin: 0 auto;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
  background: #ffffff;
}

.context-menu {
  position: fixed;
  background: #fffaf5;
  border: 1px solid var(--muted);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  padding: 6px;
  display: grid;
  gap: 4px;
  z-index: 40;
  min-width: 200px;
}

.workitem-table-header-menu,
#editorContextMenu {
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.context-item {
  background: transparent;
  border: none;
  text-align: left;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #2f2a26;
}

.context-item.has-submenu {
  position: relative;
  justify-content: space-between;
}

.has-submenu::after {
  content: "";
  position: absolute;
  top: 0;
  right: -10px;
  width: 10px;
  height: 100%;
}

.context-arrow {
  font-size: 14px;
  color: #8a8178;
  margin-left: auto;
}

.context-item:hover {
  background: #efe7dd;
}

.context-item:disabled {
  cursor: default;
  opacity: 0.5;
}

.context-item:disabled:hover {
  background: transparent;
}

.editor-toolbar-menu {
  z-index: 90;
  min-width: 224px;
  max-height: min(70vh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.editor-toolbar-menu-more {
  min-width: 250px;
}

.editor-toolbar-menu .context-item {
  min-height: 34px;
  font-size: 13px;
  font-weight: 500;
}

.editor-toolbar-menu .context-item:focus-visible {
  outline: 2px solid #2d5b4e;
  outline-offset: -1px;
  background: #e7efeb;
}

.editor-toolbar-menu-heading {
  padding: 7px 8px 3px;
  color: #756b61;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.editor-toolbar-menu-separator {
  height: 1px;
  margin: 3px 4px;
  background: #ded6cc;
}

.context-item.context-item-checkbox {
  justify-content: space-between;
  gap: 12px;
}

.doc-wi-meta-field-list {
  display: grid;
  gap: 8px;
  max-height: 320px;
  overflow: auto;
  border: 1px solid #d7cbbd;
  border-radius: 10px;
  padding: 10px;
  background: #fffdf9;
}

.doc-wi-meta-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.context-item-checkbox input[type="checkbox"] {
  margin: 0;
  pointer-events: none;
}

.context-item-checkbox .context-check {
  width: 16px;
  display: inline-flex;
  justify-content: center;
  color: #2f2a26;
  font-weight: 700;
}

.context-label {
  padding: 6px 8px 2px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #786e65;
  font-weight: 700;
}

.context-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #efe7dd;
  border: 1px solid #d7d1c7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #2f2a26;
  flex: 0 0 auto;
}

.submenu {
  position: absolute;
  top: -6px;
  left: 100%;
  min-width: 220px;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  display: none;
  pointer-events: none;
  z-index: 45;
}

.has-submenu:hover .submenu,
.has-submenu.submenu-open .submenu {
  display: grid;
  pointer-events: auto;
}

.submenu .context-item {
  font-weight: 600;
}

.context-text {
  flex: 1;
}

.context-menu-hint {
  padding: 4px 8px 2px;
  font-size: 11px;
  line-height: 1.35;
  color: #8f867d;
  font-weight: 500;
  cursor: default;
  user-select: none;
}

.context-item[data-action="cell-color-yellow"] .context-icon {
  background: #fff4cc;
}

.context-item[data-action="cell-color-green"] .context-icon {
  background: #e3f2e1;
}

.context-item[data-action="cell-color-blue"] .context-icon {
  background: #e3ecf7;
}

.context-item[data-action="cell-color-gray"] .context-icon {
  background: #efe7dd;
}

.context-item[data-action="cell-color-custom"] .context-icon {
  background: var(
    --table-cell-custom-color,
    linear-gradient(135deg, #f87171 0 33%, #facc15 33% 66%, #38bdf8 66% 100%)
  );
}

.context-item[data-action="border-color-standard"] .context-icon {
  border-color: #2f2a26;
  color: #2f2a26;
}

.context-item[data-action="border-color-gray"] .context-icon {
  border-color: #808080;
  color: #808080;
}

.context-item[data-action="border-color-transparent"] .context-icon {
  background:
    linear-gradient(45deg, transparent 46%, #b85b5b 47%, #b85b5b 53%, transparent 54%),
    #fffaf5;
  border-color: transparent;
}

.context-item[data-action="border-color-custom"] .context-icon {
  border-color: var(--table-border-custom-color, #2d5b4e);
  color: var(--table-border-custom-color, #2d5b4e);
}

.context-control-row {
  display: grid;
  grid-template-columns: 28px minmax(48px, 1fr) 52px 28px;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
}

.context-color-row {
  grid-template-columns: 34px minmax(92px, 1fr);
}

.context-step-btn {
  width: 28px;
  height: 28px;
  border: 1px solid #d7d1c7;
  border-radius: 6px;
  background: #efe7dd;
  color: #2f2a26;
  font-weight: 700;
  cursor: pointer;
}

.context-step-btn:hover {
  background: #e4d8ca;
}

.context-number-label {
  font-size: 12px;
  font-weight: 700;
  color: #2f2a26;
}

.context-number-input {
  width: 52px;
  min-width: 0;
  height: 28px;
  border: 1px solid #d7d1c7;
  border-radius: 6px;
  background: #fffdf9;
  color: #2f2a26;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.context-color-input {
  width: 100%;
  min-width: 0;
  height: 28px;
  border: 1px solid #d7d1c7;
  border-radius: 6px;
  background: #fffdf9;
  color: #2f2a26;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  text-transform: lowercase;
}

.context-separator {
  height: 1px;
  background: #e0d6c9;
  margin: 4px 2px;
}

/* DOM-level multi-cell selection (drag-select): outline only, no gradient overlay
   so user-defined background colors remain visible. */
.table-cell-selected {
  outline: 2px solid #2d5b4e;
  outline-offset: -2px;
  box-shadow: inset 0 0 0 2px rgba(45, 91, 78, 0.45);
}

/* ProseMirror CellSelection (shift-click range): same style without gradient. */
#docCanvas.ProseMirror td.selectedCell,
#docCanvas.ProseMirror th.selectedCell,
.wi-inline-rich-surface.ProseMirror td.selectedCell,
.wi-inline-rich-surface.ProseMirror th.selectedCell,
.wi-inline-rich-surface .ProseMirror td.selectedCell,
.wi-inline-rich-surface .ProseMirror th.selectedCell {
  outline: 2px solid #2d5b4e;
  outline-offset: -2px;
  box-shadow: inset 0 0 0 2px rgba(45, 91, 78, 0.45);
}

/* A ProseMirror CellSelection keeps its browser caret in the head cell. Tint
   the content of every selected cell as well, so a multi-cell selection is
   visible across all selected text without changing persisted cell colours. */
#docCanvas.ProseMirror td.selectedCell > :not(.column-resize-handle),
#docCanvas.ProseMirror th.selectedCell > :not(.column-resize-handle),
#docCanvas.ProseMirror td.table-cell-selected > :not(.column-resize-handle),
#docCanvas.ProseMirror th.table-cell-selected > :not(.column-resize-handle),
.wi-inline-rich-surface.ProseMirror td.selectedCell > :not(.column-resize-handle),
.wi-inline-rich-surface.ProseMirror th.selectedCell > :not(.column-resize-handle),
.wi-inline-rich-surface.ProseMirror td.table-cell-selected > :not(.column-resize-handle),
.wi-inline-rich-surface.ProseMirror th.table-cell-selected > :not(.column-resize-handle),
.wi-inline-rich-surface .ProseMirror td.selectedCell > :not(.column-resize-handle),
.wi-inline-rich-surface .ProseMirror th.selectedCell > :not(.column-resize-handle),
.wi-inline-rich-surface .ProseMirror td.table-cell-selected > :not(.column-resize-handle),
.wi-inline-rich-surface .ProseMirror th.table-cell-selected > :not(.column-resize-handle) {
  background-color: rgba(45, 91, 78, 0.22);
  border-radius: 2px;
}

#docCanvas.ProseMirror .column-resize-handle {
  position: absolute;
  right: -6px;
  top: 0;
  bottom: 0;
  width: 12px;
  background: linear-gradient(90deg, rgba(45, 91, 78, 0), rgba(45, 91, 78, 0.45));
  pointer-events: auto;
  z-index: 25;
}

.wi-inline-rich-surface.ProseMirror .column-resize-handle,
.wi-inline-rich-surface .ProseMirror .column-resize-handle {
  position: absolute;
  right: -6px;
  top: 0;
  bottom: 0;
  width: 12px;
  background: linear-gradient(90deg, rgba(45, 91, 78, 0), rgba(45, 91, 78, 0.45));
  pointer-events: auto;
  z-index: 25;
}

#docCanvas.ProseMirror.resize-cursor {
  cursor: col-resize;
}

.wi-inline-rich-surface.ProseMirror.resize-cursor,
.wi-inline-rich-surface .ProseMirror.resize-cursor {
  cursor: col-resize;
}

#docCanvas.ProseMirror.resize-cursor * {
  cursor: col-resize !important;
}

.wi-inline-rich-surface.ProseMirror.resize-cursor *,
.wi-inline-rich-surface .ProseMirror.resize-cursor * {
  cursor: col-resize !important;
}

.modal,
.modal-overlay {
  display: none;
}

[hidden] {
  display: none !important;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  cursor: grab;
  user-select: none;
}

.modal-header button,
.modal-header input,
.modal-header select {
  cursor: default;
  user-select: auto;
}

.modal-dragging {
  user-select: none;
}

.modal--user-sized .modal-body {
  max-height: none !important;
}

.modal-resize-handle {
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 14px;
  height: 14px;
  cursor: se-resize;
  opacity: 0.45;
  pointer-events: auto;
}

.modal-resize-handle::after {
  content: '';
  position: absolute;
  inset: 1px 1px 1px 1px;
  border-right: 2px solid var(--ink-soft, #8a7060);
  border-bottom: 2px solid var(--ink-soft, #8a7060);
  border-bottom-right-radius: 4px;
}

.modal-resize-handle:hover {
  opacity: 0.85;
}

.modal-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal-body-fill {
  min-height: 60px;
}

.work-item-revision-reference-modal {
  width: min(620px, calc(100vw - 32px));
}

.work-item-revision-reference-modal .modal-body {
  display: grid;
  gap: 14px;
}

.work-item-revision-reference-filters {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(180px, 0.8fr);
  gap: 12px;
}

.work-item-revision-reference-modal .info-box.is-error {
  border-color: var(--danger, #c92a2a);
  color: var(--danger, #9f1d1d);
}

@media (max-width: 640px) {
  .work-item-revision-reference-filters {
    grid-template-columns: 1fr;
  }
}

.document-workflow-feedback { margin-top: var(--ui-space-3); overflow-wrap: anywhere; }
.document-workflow-feedback > p, .document-workflow-choice-details > .meta-subtle, .document-workflow-blockers .meta-subtle { margin: 0; }
.document-workflow-blockers { display: grid; gap: var(--ui-space-3); margin: var(--ui-space-2) 0 0; padding: 0; list-style: none; }
.document-workflow-blockers > li { display: grid; gap: var(--ui-space-1); min-width: 0; overflow-wrap: anywhere; }
.document-workflow-choice-details { display: grid; gap: var(--ui-space-2); min-width: 0; }
.document-workflow-hint { margin: 0; padding: var(--ui-space-2); }

.document-properties-modal {
  width: min(720px, 92vw);
}

.document-properties-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 180px;
  color: var(--ink-soft);
}

.document-properties-content {
  display: grid;
  gap: 16px;
}

.document-properties-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.document-properties-fields > .field { min-width: 0; margin: 0; }
.document-properties-fields > :is(.document-field-boolean, .document-field-multiline) { grid-column: 1 / -1; }
.document-properties-fields > .document-field-boolean {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--muted);
  cursor: pointer;
}
.document-field-boolean input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; }
.document-properties-grid > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.doc-var[data-var^="DOCUMENT_CUSTOM_"],
.doc-var-widget-text[data-var^="DOCUMENT_CUSTOM_"],
.document-variable-value { white-space: pre-wrap; }

.document-properties-content[aria-busy="true"] {
  opacity: 0.48;
  pointer-events: none;
}

.document-properties-primary {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(180px, 0.8fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--muted);
  border-radius: 12px;
  background: #fffaf5;
}

.document-properties-name-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 6px;
}

.document-properties-name-control input[readonly] {
  color: var(--ink);
  background: #f5efe8;
}

.document-properties-edit-name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  color: var(--ink);
}

.document-properties-edit-name .btn-icon {
  display: block;
  width: 18px;
  height: 18px;
}

.document-properties-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--muted);
  border-radius: 12px;
  background: var(--muted);
}

.document-properties-grid > div {
  min-width: 0;
  padding: 12px 14px;
  background: #ffffff;
}

.document-properties-grid dt {
  margin-bottom: 5px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
}

.document-properties-grid dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

@media (max-width: 680px) {
  .document-properties-primary,
  .document-properties-grid,
  .document-properties-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

#documentReuseModal {
  width: min(760px, 92vw);
}

.document-reuse-note,
.document-reuse-status,
.document-reuse-warning {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

.document-reuse-note {
  color: var(--ink-soft);
}

.document-reuse-warning,
.document-reuse-status {
  color: #8a3d24;
}

.document-reuse-types,
#documentReuseTypeMappings {
  display: grid;
  gap: 10px;
}

.document-reuse-types {
  padding: 10px;
  border: 1px solid var(--muted);
  border-radius: 10px;
}

.document-reuse-type-field {
  padding-top: 4px;
}

.modal--user-sized .modal-body .modal-body-fill {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow-y: auto;
}

#templateManagerModal {
  width: min(1300px, 96vw);
  inset: 4vh auto auto 50%;
  max-height: 92vh;
}

#templateManagerModal .modal-body {
  overflow: auto;
}

#templateManagerModal #templateContent {
  height: min(58vh, 560px);
  min-height: 360px;
  overflow: auto;
  box-sizing: border-box;
  background: #ffffff;
}

#templateManagerModal #templateHtmlSource {
  width: 100%;
  height: min(58vh, 560px);
  min-height: 360px;
  resize: none;
  border: 1px solid var(--muted);
  border-radius: 10px;
  background: #fffaf5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.4;
  padding: 10px;
  box-sizing: border-box;
}

#templateManagerModal .template-split-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  width: 100%;
}

#templateManagerModal .template-split-pane {
  display: grid;
  gap: 6px;
  min-width: 0;
  align-content: start;
  width: 100%;
}

#templateManagerModal #templateScript {
  min-height: 180px;
}

#templateManagerModal .template-logo-picker {
  display: grid;
  gap: 10px;
}

#templateManagerModal .template-logo-picker-actions {
  display: grid;
  gap: 6px;
}

#templateManagerModal #templateLogoPreview {
  width: min(320px, 100%);
  max-height: 110px;
  object-fit: contain;
  border: 1px solid var(--border, #d8cfc2);
  border-radius: 10px;
  background: #fff;
  padding: 10px;
}

#templateManagerModal .work-table-wrapper {
  max-height: 260px;
  overflow: auto;
}

#templateManagerModal .template-history-wrapper {
  min-height: 124px;
  border: 1px solid #e1d4c6;
  border-radius: 10px;
  background: #fffaf5;
}

#templateManagerModal .template-history-wrapper .work-table {
  width: 100%;
  min-width: 100%;
}

#templateManagerModal .template-history-wrapper .placeholder {
  padding: 16px 10px;
  color: var(--ink-soft);
  text-align: left;
  white-space: normal;
}

#templateGlobalSettingsModal {
  width: min(760px, 94vw);
  inset: 4vh auto auto 50%;
  max-height: 92vh;
}

#templateGlobalSettingsModal .modal-body {
  overflow: auto;
  padding-right: 4px;
}

#templateGlobalSettingsModal .template-manager-section {
  align-content: start;
}

#workItemTypeManagerModal {
  width: min(1400px, 98vw);
  inset: 4vh auto auto 50%;
  max-height: 92vh;
}

#workItemTypeManagerModal .modal-body {
  overflow: auto;
}

#workItemTypeManagerModal .work-table-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  height: auto;
  min-height: 0;
  max-height: none;
  resize: none;
}

#workItemTypeManagerModal .work-table-wrapper:has(.workitem-config-form-table) {
  overflow: visible;
}

#workItemTypeManagerModal .work-table {
  width: 100%;
  table-layout: auto;
  min-width: 0;
}

#workItemTypeManagerModal .work-table th,
#workItemTypeManagerModal .work-table td {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  min-height: 44px;
  vertical-align: middle;
  text-align: center;
}

#workItemTypeManagerModal .work-table input[type="checkbox"] {
  margin: 0;
  vertical-align: middle;
}

#workItemTypeManagerModal .work-table button {
  vertical-align: middle;
}

#workItemTypeManagerModal .work-table input[type="text"],
#workItemTypeManagerModal .work-table input[type="number"],
#workItemTypeManagerModal .work-table select,
#workItemTypeManagerModal .work-table textarea {
  width: 100%;
  min-width: 140px;
  box-sizing: border-box;
}

#workItemTypeManagerModal .workitem-config-section {
  border: 1px solid var(--muted);
  border-radius: 10px;
  background: #fff;
  margin-top: 12px;
}

#workItemTypeManagerModal .workitem-config-section>summary {
  cursor: pointer;
  font-weight: 700;
  padding: 10px 12px;
  user-select: none;
}

#workItemTypeManagerModal .workitem-config-section>summary::marker {
  color: var(--accent);
}

#workItemTypeManagerModal .workitem-config-section-body {
  padding: 6px 12px 12px;
}

#workItemTypeManagerModal #workItemStatusSchemaInput,
#workItemTypeManagerModal #workItemResolutionSchemaInput {
  resize: vertical;
  min-height: 90px;
}

#workItemTypeManagerModal .workitem-enum-schema-row td {
  background: #fffaf5;
}

#workItemTypeManagerModal .workitem-enum-schema-row textarea[data-field="enum_schema_lines"] {
  width: 100%;
  min-height: 90px;
  resize: vertical;
  box-sizing: border-box;
}

#userEditModal {
  width: min(1200px, 96vw);
  inset: 4vh auto auto 50%;
  max-height: 92vh;
}

#userEditModal .modal-body {
  overflow: auto;
}

#userEditModal .user-edit-section {
  border: 1px solid var(--muted);
  border-radius: 10px;
  background: #fff;
}

#userEditModal .user-edit-section+.user-edit-section {
  margin-top: 10px;
}

#userEditModal .user-edit-section>summary {
  cursor: pointer;
  font-weight: 700;
  padding: 10px 12px;
  user-select: none;
}

#userEditModal .user-edit-section>summary::marker {
  color: var(--accent);
}

#userEditModal .user-edit-section-body {
  padding: 6px 12px 12px;
}

@media (max-width: 1100px) {
  #templateManagerModal .template-split-editor {
    grid-template-columns: 1fr;
  }
}

.paste-input {
  width: 100%;
  min-height: 180px;
  border: 1px solid var(--muted);
  border-radius: 10px;
  padding: 10px;
  background: #fffaf5;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.auth-password-confirmation-overlay {
  z-index: 1000;
}

.auth-password-confirmation-modal {
  inset: 50% auto auto 50%;
  z-index: 1001;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  transform: translate(-50%, -50%);
}

.auth-password-confirmation-description {
  margin: 0;
  line-height: 1.45;
}

.auth-password-confirmation-body {
  gap: 14px;
  overflow: visible;
}

.auth-password-confirmation-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  width: 100%;
  margin-top: 2px;
  font-size: 13px;
}

.auth-password-confirmation-input {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
}

.auth-password-confirmation-error {
  margin-top: -2px;
}

.project-search-input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

#projectSearchModal .modal-body {
  gap: 10px;
}

.project-search-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 13px;
}

.hourglass-spinner {
  width: 14px;
  height: 14px;
  display: inline-block;
  border: 2px solid #bba889;
  border-top-color: #7d6a51;
  border-radius: 50%;
  animation: project-search-spin 0.9s linear infinite;
}

@keyframes project-search-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.project-search-results {

  mark {
    color: inherit;
  }
  display: grid;
  gap: 10px;
  max-height: min(60vh, 560px);
  overflow: auto;
  padding-right: 4px;
}

.document-search-panel {
  position: fixed;
  top: 92px;
  right: 28px;
  z-index: var(--document-floating-panel-layer);
  width: min(430px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.document-search-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  cursor: grab;
  user-select: none;
}

.document-search-panel-body {
  display: grid;
  gap: 10px;
  min-height: 0;
  padding: 12px;
  overflow-y: auto;
}

.document-search-field {
  display: grid;
  grid-template-columns: minmax(110px, auto) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  font-size: 13px;
}

.document-search-field input,
.document-search-mode-row select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.document-search-mode-row {
  display: grid;
  grid-template-columns: minmax(110px, auto) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  font-size: 13px;
}

.document-search-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 12px;
  padding-top: 2px;
}

.document-search-options label {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  line-height: 1.3;
}

.document-search-options input {
  flex: 0 0 auto;
  margin: 1px 0 0;
}

.document-search-result {
  min-height: 18px;
  color: var(--ink-soft);
  font-size: 12px;
}

.document-search-panel-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 12px;
}

::highlight(document-search-current) {
  color: inherit;
  background: #ffd866;
  text-decoration: underline 2px #b87000;
}

mark.document-search-inline-hit {
  color: inherit;
  background: #ffd866;
  text-decoration: underline 2px #b87000;
}

.document-search-current-hit {
  outline: 3px solid #e2a11b !important;
  outline-offset: 2px;
  background-color: rgba(255, 216, 102, 0.2) !important;
}

.wi-block.document-search-current-hit {
  box-shadow: 0 0 0 3px rgba(226, 161, 27, 0.35);
}

.doc-ai-panel {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: var(--document-floating-panel-layer);
  width: min(520px, calc(100vw - 24px));
  max-height: min(760px, calc(100vh - 24px));
  background: #fffdf9;
  border: 1px solid #d8c8b7;
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(48, 37, 26, 0.24);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.doc-ai-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  cursor: grab;
  font-weight: 700;
  background: #f3eadf;
  border-bottom: 1px solid #ddcdbc;
}

.doc-ai-panel-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 10px;
  overflow: hidden;
}

.doc-ai-chat-log {
  flex: 1 1 auto;
  min-height: 180px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 2px;
}

.doc-ai-message {
  max-width: 92%;
  border: 1px solid #e1d4c7;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.4;
  background: #ffffff;
  color: #2f2a24;
}

.doc-ai-message-user {
  align-self: flex-end;
  background: #eaf4f1;
  border-color: #bdd8d0;
}

.doc-ai-message-assistant {
  align-self: flex-start;
}

.doc-ai-message-proposals {
  max-width: 100%;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}

.doc-ai-context-strip {
  min-height: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  max-height: 64px;
  overflow: hidden;
}

.doc-ai-context-empty {
  color: var(--ink-soft);
  font-size: 12px;
}

.doc-ai-context-chip {
  border: 1px solid #cbded8;
  border-radius: 999px;
  background: #f0f8f5;
  color: #24443b;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 8px;
  font-size: 12px;
}

.doc-ai-context-chip strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}

.doc-ai-context-count-badge {
  border: 1px solid #c8d7d3;
  border-radius: 999px;
  background: #ffffff;
  color: #31564d;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 700;
}

.doc-ai-composer {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.doc-ai-plus-btn {
  width: 34px;
  height: 34px;
  font-size: 20px;
  line-height: 1;
}

#docAiPromptInput,
#docAiRedactionInput {
  width: 100%;
  border: 1px solid var(--muted);
  border-radius: 8px;
  padding: 8px;
  background: #ffffff;
  resize: vertical;
  font: inherit;
}

#docAiPromptInput {
  min-height: 42px;
  max-height: 140px;
}

.doc-ai-risk-hint {
  color: #76695e;
  font-size: 12px;
}

.doc-ai-context-picker {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 112px;
  z-index: 8;
  border: 1px solid #dbc9b5;
  border-radius: 8px;
  background: #fffaf5;
  padding: 8px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px;
  box-sizing: border-box;
  min-height: 0;
  max-height: min(340px, calc(100% - 132px), calc(100vh - 190px));
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(48, 37, 26, 0.22);
}

.doc-ai-context-picker[hidden],
.doc-ai-review-panel[hidden],
.doc-ai-loading-dock[hidden] {
  display: none;
}

.doc-ai-context-picker-head {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.doc-ai-context-picker-head input {
  width: 100%;
}

.doc-ai-context-close-btn {
  width: 30px;
  height: 30px;
  border: 1px solid #d9c9b7;
  border-radius: 999px;
  background: #ffffff;
  color: #5c4f43;
  line-height: 1;
  cursor: pointer;
}

.doc-ai-context-close-btn:hover {
  border-color: #d83a3f;
  color: #d83a3f;
}

.doc-ai-context-picker-filters {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto auto;
  gap: 6px;
  align-items: center;
}

.doc-ai-context-picker-filters select {
  min-width: 0;
  width: 100%;
}

.doc-ai-context-list {
  min-height: 0;
  max-height: none;
  overflow: auto;
  display: grid;
  gap: 6px;
  padding-right: 4px;
}

.doc-ai-context-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 6px;
  border: 1px solid #eaded0;
  border-radius: 7px;
  background: #ffffff;
  font-size: 12px;
  cursor: pointer;
}

.doc-ai-context-item:hover {
  border-color: #b9d7cf;
  background: #f5fbf8;
}

.doc-ai-context-item input {
  margin-top: 2px;
}

.doc-ai-context-item span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.doc-ai-context-item small {
  color: var(--ink-soft);
}

.doc-ai-panel-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid #ddcdbc;
  background: #f8f3ec;
}

.doc-ai-chapter-list {
  border: 1px solid #dbc9b5;
  border-radius: 10px;
  background: #fffdf9;
  max-height: 220px;
  overflow: auto;
  padding: 8px;
  display: grid;
  gap: 6px;
}

.doc-ai-chapter-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: start;
  gap: 8px;
  font-size: 13px;
  padding: 4px 2px;
}

.doc-ai-chapter-empty {
  color: var(--ink-soft);
  font-size: 13px;
  padding: 4px;
}

.doc-ai-reviewed-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.4;
  color: #8a5a11;
  background: #fff2cf;
  border: 1px solid #e5c986;
}

.doc-ai-loading-dock {
  z-index: 4;
  padding: 2px 0;
}

.doc-ai-loading-slot {
  min-height: 38px;
  display: flex;
  align-items: center;
}

#docAiLoading {
  width: fit-content;
  max-width: 100%;
  padding: 9px 12px;
  border: 1px solid #ead8c5;
  border-radius: 999px;
  background: linear-gradient(135deg, #fffaf5 0%, #ffffff 100%);
  box-shadow: 0 8px 24px rgba(72, 54, 35, 0.08);
  color: #5f544b;
  font-weight: 600;
}

.doc-ai-generating-animation {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.doc-ai-generating-animation span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d83a3f;
  animation: doc-ai-generating-pulse 1s ease-in-out infinite;
}

.doc-ai-generating-animation span:nth-child(2) {
  animation-delay: 0.15s;
}

.doc-ai-generating-animation span:nth-child(3) {
  animation-delay: 0.3s;
}

.doc-ai-loading-meta {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: #6d6359;
  margin-top: -4px;
}

.doc-ai-loading-bar {
  height: 6px;
  border-radius: 6px;
  background: #efe3d4;
  overflow: hidden;
  position: relative;
}

.doc-ai-loading-bar-fill {
  width: 34%;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #d84f3f 0%, #f08a62 100%);
  animation: doc-ai-loading-slide 1.2s ease-in-out infinite;
}

@keyframes doc-ai-generating-pulse {
  0%,
  80%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }

  40% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

@keyframes doc-ai-loading-slide {
  0% {
    transform: translateX(-120%);
  }

  50% {
    transform: translateX(90%);
  }

  100% {
    transform: translateX(240%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .doc-ai-generating-animation span,
  .doc-ai-loading-bar-fill {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.doc-ai-review-panel {
  border: 1px solid #dbc9b5;
  border-radius: 8px;
  background: #fffdf9;
  padding: 10px;
  display: grid;
  gap: 10px;
  max-height: none;
}

.doc-ai-review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.doc-ai-review-summary {
  font-size: 12px;
  color: var(--ink-soft);
}

.doc-ai-review-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.doc-ai-proposal-list {
  display: grid;
  gap: 8px;
  max-height: min(420px, 48vh);
  overflow: auto;
  padding-right: 4px;
}

.doc-ai-proposal-item {
  border: 1px solid #decfbe;
  border-radius: 9px;
  background: #ffffff;
  padding: 8px;
  display: grid;
  gap: 6px;
}

.doc-ai-proposal-item.is-unchecked {
  opacity: 0.62;
}

.doc-ai-proposal-head {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 8px;
  align-items: start;
}

.doc-ai-proposal-title {
  font-weight: 700;
}

.doc-ai-proposal-meta {
  font-size: 12px;
  color: #6d6359;
}

.doc-ai-proposal-text {
  font-size: 12px;
  color: #5f554a;
  line-height: 1.35;
}

.project-search-summary {
  font-size: 13px;
  color: var(--ink-soft);
}

.project-search-group {
  border: 1px solid #e1d6c8;
  border-radius: 10px;
  background: #fffaf6;
  padding: 8px;
  display: grid;
  gap: 6px;
}

.project-search-group-title {
  font-weight: 700;
}

.project-search-group-list {
  display: grid;
  gap: 6px;
}

.project-search-item {
  border: 1px solid #decfbe;
  border-radius: 9px;
  background: #ffffff;
  padding: 8px;
  cursor: pointer;
  text-align: left;
  display: grid;
  gap: 2px;
}

.project-search-item:hover {
  border-color: #c5b19c;
  background: #fff8f1;
}

.project-search-item-title {
  font-weight: 700;
}

.project-search-item-subtitle {
  font-size: 12px;
  color: #5f554a;
}

.project-search-item-snippet {
  font-size: 12px;
  color: #6d6359;
}

.project-search-empty {
  font-size: 13px;
  color: var(--ink-soft);
}

.project-search-item mark {
  background: #ffe8a8;
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

tr.search-hit {
  animation: search-hit-fade 1.2s ease;
}

@keyframes search-hit-fade {
  from {
    background: #fff1bf;
  }

  to {
    background: transparent;
  }
}

.mini-editor {
  min-height: 120px;
  border: 1px solid var(--muted);
  border-radius: 10px;
  padding: 8px;
  background: #fffaf5;
}

.editor-slash-menu {
  position: fixed;
  z-index: calc(var(--document-floating-panel-layer) + 20);
  width: min(390px, calc(100vw - 16px));
  max-height: min(460px, calc(100vh - 16px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--muted);
  border-radius: 12px;
  box-shadow: 0 18px 42px rgba(33, 29, 25, 0.24);
}

.editor-slash-menu-query {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--muted);
  background: var(--paper);
}

.editor-slash-menu-query-value {
  color: var(--accent-2);
  font-weight: 700;
}

.editor-slash-menu-query-input {
  min-width: 0;
  flex: 1;
  padding: 4px 6px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 5px;
  outline: 0;
}

.editor-slash-menu-query-input:focus-visible {
  box-shadow: 0 0 0 2px var(--accent-2);
}

.editor-slash-menu-list {
  min-height: 0;
  padding: 6px;
  overflow: auto;
}

.editor-slash-menu-category {
  padding: 8px 8px 4px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.editor-slash-menu-option {
  width: 100%;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px;
  color: var(--ink);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.editor-slash-menu-option:hover,
.editor-slash-menu-option.is-active,
.editor-slash-menu-option:focus-visible {
  color: var(--ink);
  background: #f2e8df;
}

.editor-slash-menu-option:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: -2px;
}

.editor-slash-menu-icon {
  width: 18px;
  height: 18px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.editor-slash-menu-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.editor-slash-menu-label,
.editor-slash-menu-description {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-slash-menu-label {
  font-weight: 700;
}

.editor-slash-menu-description {
  color: var(--ink-soft);
  font-size: 12px;
}

.editor-entity-picker .modal-body { display: flex; flex-direction: column; min-height: 0; }

.editor-entity-picker-search {
  width: 100%;
  min-height: 40px;
}

.editor-entity-picker-list {
  min-height: 120px;
  flex: 1;
  overflow: auto;
  border: 1px solid var(--muted);
  border-radius: 10px;
}

.editor-entity-picker-option {
  width: 100%;
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  color: var(--ink);
  text-align: left;
  background: var(--canvas);
  border: 0;
  border-bottom: 1px solid #eee5dc;
  border-radius: 0;
}

.editor-entity-picker-option:has(input[type="checkbox"]) { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--ui-space-3); }
.editor-entity-picker-option input[type="checkbox"] { width: auto; }
.editor-entity-picker-text { display: grid; gap: 2px; }

.editor-entity-picker-option span {
  color: var(--ink-soft);
  font-size: 12px;
}

.editor-entity-picker-option:hover,
.editor-entity-picker-option.is-active,
.editor-entity-picker-option:focus-visible {
  background: #f2e8df;
}

.editor-entity-picker-option:focus-visible,
.editor-entity-picker-search:focus-visible,
.editor-entity-picker .icon-btn:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

.editor-entity-picker-empty {
  padding: 24px 12px;
  color: var(--ink-soft);
  text-align: center;
}

.doc-cross-reference,
.doc-reference {
  color: var(--doc-heading-color);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  cursor: pointer;
}

.doc-cross-reference.is-broken {
  color: var(--accent-2);
  text-decoration-style: wavy;
}

.mini-editor.work-item-editor {
  font-family: var(--doc-font-family);
  font-size: var(--doc-default-font-size);
}

.editor-table-row-resize-candidate,
.editor-table-row-resize-candidate *,
body.editor-table-row-resizing,
body.editor-table-row-resizing * {
  cursor: row-resize !important;
}

body.editor-table-row-resizing {
  user-select: none;
}

.editor-table-row-resize-handle,
.editor-table-row-resize-guide {
  position: fixed;
  height: 12px;
  transform: translateY(-50%);
  background: linear-gradient(180deg, rgba(45, 91, 78, 0), rgba(45, 91, 78, 0.45));
  pointer-events: none;
  z-index: 25;
}

.trace-primary-toolbar { flex-wrap: wrap; flex: 0 0 auto; }
.trace-workspace-title { margin: 0 auto 0 0; }
.trace-view-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ui-space-2); margin-bottom: var(--ui-space-3); padding-bottom: var(--ui-space-1); flex: 0 0 auto; }
.trace-view-header .trace-view-toggle { gap: var(--ui-space-1); }
.trace-view-header .trace-time-filter { align-items: center; flex-wrap: nowrap; max-width: 100%; gap: var(--ui-space-2); }
.trace-view-header .trace-as-of-filter { flex: 0 1 210px; min-width: 0; }
.trace-view-header .trace-as-of-filter input { width: 100%; min-width: 0; }
.trace-view-header .trace-live-filter { flex-shrink: 0; white-space: nowrap; }
.trace-view-header .field { margin: 0; }
.trace-searchbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ui-space-2); margin-bottom: var(--ui-space-3); flex: 0 0 auto; }
.trace-searchbar .work-filters { display: flex; flex: 1 1 240px; margin: 0; overflow: visible; }
.trace-searchbar .field { flex: 1; margin: 0; min-width: 0; }
.trace-searchbar .work-toolbar { margin: 0; }
.trace-level-picker { position: relative; }
.trace-level-picker .trace-levels-info { position: absolute; top: calc(100% + var(--ui-space-2)); right: 0; z-index: 30; width: 280px; max-width: calc(100vw - 32px); padding: var(--ui-space-3); margin: 0; }
.trace-searchbar [hidden], .trace-level-picker [hidden] { display: none; }
@media (max-width: 600px) {
  .trace-workspace-title { flex-basis: 100%; }
  .trace-level-picker .trace-levels-info { right: auto; left: -100px; }
  .trace-view-header .trace-as-of-filter { min-width: 0; }
  .trace-view-header .trace-time-filter { flex-basis: 100%; }
}

.workitem-workflow-modal {
  width: min(1380px, calc(100vw - 32px));
  height: min(900px, calc(100vh - 32px));
  min-width: min(680px, calc(100vw - 20px));
  max-width: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.workitem-workflow-modal[hidden] {
  display: none;
}

.workflow-toolbar {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border, #ddd4cc);
}

.workflow-more-actions {
  position: relative;
}
.workflow-more-actions > summary {
  cursor: pointer;
  padding: var(--ui-space-2);
}
.workflow-copy-group {
  display: grid;
  gap: var(--ui-space-2);
}
.workflow-copy-group p {
  margin: 0;
}
.workflow-zoom-controls {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
}
.workflow-zoom-value {
  min-width: 4ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.workflow-more-content {
  position: absolute;
  z-index: 10;
  right: 0;
  top: 100%;
  display: grid;
  gap: var(--ui-space-2);
  padding: var(--ui-space-3);
  width: 320px;
  max-width: calc(100vw - 48px);
  background: var(--canvas);
  border: 1px solid var(--muted);
  border-radius: var(--ui-radius);
  box-shadow: 0 6px 18px var(--shadow);
}
.workflow-toolbar .status-pill {
  margin-right: auto;
}

.workflow-toolbar .is-active {
  background: var(--accent-soft, #fee9e7);
  border-color: var(--accent, #d83a32);
}

.workflow-validation {
  flex: 0 0 auto;
  margin: 8px 16px 0;
  padding: 8px 12px;
  border: 1px solid var(--border, #ddd4cc);
  border-radius: 8px;
  background: var(--surface-muted, #faf7f4);
}

.workflow-validation ul {
  margin: 0;
  padding-left: 20px;
}

.workflow-validation-error {
  color: var(--danger, #b42318);
}

.workflow-validation-warning {
  color: #8a5a00;
}

.workflow-validation-ok {
  color: #26734d;
}

.workflow-editor-layout {
  display: grid;
  grid-template-columns: 180px minmax(320px, 1fr) 280px;
  min-height: 0;
  flex: 1;
  margin: 12px 16px;
  border: 1px solid var(--border, #ddd4cc);
  border-radius: 10px;
  overflow: hidden;
}

.workflow-palette,
.workflow-inspector {
  padding: 14px;
  overflow: auto;
  background: var(--surface, #fff);
}

.workflow-palette {
  border-right: 1px solid var(--border, #ddd4cc);
}

.workflow-inspector {
  border-left: 1px solid var(--border, #ddd4cc);
}

.workflow-palette-item {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 8px;
  margin-top: 8px;
  padding: 7px 9px;
  border: 1px solid var(--border, #ddd4cc);
  border-radius: 7px;
  background: var(--surface, #fff);
  text-align: left;
}

.workflow-palette-icon {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
}

.workflow-canvas {
  position: relative;
  min-height: 240px;
  overflow: auto;
  cursor: grab;
  touch-action: none;
  background-color: #fbfaf8;
  background-image: radial-gradient(#d7d0ca 1px, transparent 1px);
  background-size: 20px 20px;
  background-attachment: local;
}

.workflow-canvas.is-panning {
  cursor: grabbing;
  user-select: none;
}

.workflow-edges,
.workflow-nodes {
  position: absolute;
  inset: 0;
  min-width: 100%;
  min-height: 100%;
}

.workflow-edges {
  overflow: visible;
  z-index: 1;
  pointer-events: auto;
}

.workflow-edge {
  fill: none;
  stroke: #81766d;
  stroke-width: 1.5;
  pointer-events: none;
  cursor: pointer;
}

.workflow-edge-bridge-gap {
  fill: none;
  stroke: var(--paper);
  stroke-width: 7;
  pointer-events: none;
}
.workflow-edge-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 16;
  pointer-events: stroke;
  cursor: pointer;
}

.workflow-edge.is-selected {
  stroke: var(--accent, #d83a32);
  stroke-width: 4;
}

.workflow-edges #workflowArrow path {
  fill: #81766d;
}

.workflow-edges #workflowArrowSelected path {
  fill: var(--accent, #d83a32);
}

.workflow-edge-preview {
  stroke: var(--accent, #d83a32);
  stroke-dasharray: 7 5;
  opacity: 0.8;
}

.workflow-edge-handle {
  fill: #fff;
  stroke: var(--accent, #d83a32);
  stroke-width: 3;
  cursor: move;
  pointer-events: all;
}

.workflow-connection .workflow-edge-label {
  opacity: 0;
  pointer-events: none;
}
.workflow-connection:is(:hover, :focus-visible, .is-selected) .workflow-edge-label {
  opacity: 1;
  pointer-events: auto;
}
.workflow-edges.has-selection .workflow-connection:not(.is-related, .is-selected) {
  opacity: 0.18;
}
.workflow-connection:focus-visible {
  outline: none;
}
.workflow-connection:is(:hover, :focus-visible, .is-related) .workflow-edge {
  stroke: var(--accent);
  stroke-width: 3;
}
.workflow-edge-label {
  pointer-events: all;
  cursor: pointer;
}

.workflow-edge-label rect {
  fill: #fff;
  stroke: #b8afa7;
  stroke-width: 1px;
  filter: drop-shadow(0 1px 2px rgb(49 38 30 / 16%));
}

.workflow-edge-label text {
  fill: #2f2925;
  text-anchor: middle;
  font-size: 12px;
  font-weight: 700;
  stroke: none;
}

.workflow-edge-label.is-selected rect {
  fill: #fff7f6;
  stroke: var(--accent, #d83a32);
  stroke-width: 2px;
}

.workflow-edge-label.is-selected text {
  fill: var(--accent, #d83a32);
}

.workflow-node {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 160px;
  min-height: 62px;
  padding: 10px 12px;
  border: 2px solid #b8afa7;
  border-radius: 10px;
  background: #fff;
  color: inherit;
  text-align: left;
  box-shadow: 0 3px 10px rgb(49 38 30 / 10%);
  cursor: grab;
  touch-action: none;
}

.workflow-node.is-selected,
.workflow-node.is-connecting {
  border-color: var(--accent, #d83a32);
  box-shadow: 0 0 0 3px rgb(216 58 50 / 15%);
}

.workflow-node-title {
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
  font-weight: 650;
}

.workflow-node-flags {
  align-items: center;
  flex-shrink: 0;
  display: flex;
  gap: 4px;
}

.workflow-node-anchor {
  position: absolute;
  z-index: 4;
  width: 11px;
  height: 11px;
  border: 2px solid #81766d;
  border-radius: 50%;
  background: #fff;
  cursor: crosshair;
  touch-action: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.workflow-node.is-selected .workflow-node-anchor,
.workflow-node.is-connecting .workflow-node-anchor,
.workflow-nodes.is-connection-dragging .workflow-node-anchor {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.workflow-node-anchor:hover {
  border-color: var(--accent, #d83a32);
  background: var(--accent-soft, #fee9e7);
  box-shadow: 0 0 0 3px rgb(216 58 50 / 16%);
}

.workflow-node-anchor-top,
.workflow-node-anchor-bottom {
  transform: translateX(-50%);
}

.workflow-node-anchor-left,
.workflow-node-anchor-right {
  transform: translateY(-50%);
}

.workflow-node-anchor-top { top: -7px; }
.workflow-node-anchor-bottom { bottom: -7px; }
.workflow-node-anchor-left { left: -7px; }
.workflow-node-anchor-right { right: -7px; }
.workflow-node-anchor-top-0,
.workflow-node-anchor-bottom-0 { left: 25%; }
.workflow-node-anchor-top-1,
.workflow-node-anchor-bottom-1 { left: 50%; }
.workflow-node-anchor-top-2,
.workflow-node-anchor-bottom-2 { left: 75%; }
.workflow-node-anchor-left-0,
.workflow-node-anchor-right-0 { top: 25%; }
.workflow-node-anchor-left-1,
.workflow-node-anchor-right-1 { top: 50%; }
.workflow-node-anchor-left-2,
.workflow-node-anchor-right-2 { top: 75%; }

.workflow-empty {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text-muted, #71675f);
  pointer-events: none;
}

.workflow-empty-content {
  max-width: 340px;
  padding: var(--ui-space-4);
  text-align: center;
  overflow-wrap: anywhere;
}
.workflow-empty-content button {
  pointer-events: auto;
}
.workflow-help {
  margin-top: var(--ui-space-4);
}
.workflow-help summary {
  cursor: pointer;
}
.workflow-help ol {
  padding-inline-start: var(--ui-space-5);
}
.workflow-help li + li {
  margin-top: var(--ui-space-3);
}
.workflow-context-hint {
  margin-block: var(--ui-space-3);
}
.workflow-inspector fieldset {
  margin: 14px 0;
  padding: 10px;
  border: 1px solid var(--border, #ddd4cc);
  border-radius: 8px;
}

.workflow-lock-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
  margin-block: var(--ui-space-3);
}
.workflow-check {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 7px 0;
}

.workflow-email-config {
  margin: 10px 0;
  padding: 10px;
  border-radius: 8px;
  background: var(--surface-muted, #faf7f4);
}

.workflow-list-view {
  flex: 0 0 auto;
  margin: 0 16px 12px;
  overflow: visible;
}

.workitem-workflow-modal > .modal-header,
.workitem-workflow-modal > .modal-actions {
  flex: 0 0 auto;
}

#workItemWorkflowList {
  height: 260px;
  min-height: 140px;
  max-height: 55vh;
  overflow: auto;
  resize: vertical;
}

.workflow-list-view summary {
  cursor: pointer;
  font-weight: 650;
}

.workflow-list-view tr[data-workflow-list-transition]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.workflow-list-view tr[data-workflow-list-transition] {
  cursor: pointer;
}

@media (max-width: 1050px) {
  .workflow-editor-layout {
    grid-template-columns: 170px minmax(400px, 1fr);
  }

  .workflow-inspector {
    grid-column: 1 / -1;
    border-top: 1px solid var(--border, #ddd4cc);
    border-left: 0;
    max-height: 280px;
  }
}

/* Match ProseMirror's vertical column handle at the lower row boundary. */
.editor-table-row-resize-guide {
  z-index: 10000;
}

.mini-editor.editor-table-resize-candidate,
.mini-editor.editor-table-resizing {
  cursor: col-resize;
}

.mini-editor.editor-table-resizing,
.mini-editor.editor-table-resizing * {
  cursor: col-resize !important;
  user-select: none;
}

body.editor-table-resizing,
body.editor-table-resizing * {
  cursor: col-resize !important;
  user-select: none;
}

.mini-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.wi-insert-marker {
  display: inline-block;
  width: 0;
  height: 0;
  overflow: hidden;
}

.admin-only {
  display: none;
}

.doc-canvas a.trace-link {
  color: var(--accent-2);
  text-decoration: underline;
}

.doc-var {
  padding: 1px 4px;
  border-radius: 6px;
  background-color: #f0f0f0;
  background-image: repeating-linear-gradient(-45deg,
      rgba(0, 0, 0, 0.04) 0,
      rgba(0, 0, 0, 0.04) 4px,
      rgba(255, 255, 255, 0.14) 4px,
      rgba(255, 255, 255, 0.14) 8px);
  border: 1px dashed #b9b9b9;
  font-size: 0.95em;
  display: inline;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

.doc-var.doc-var-source {
  display: none;
}

.doc-var-widget {
  padding: 1px 4px;
  border-radius: 6px;
  background-color: #f0f0f0;
  background-image: repeating-linear-gradient(-45deg,
      rgba(0, 0, 0, 0.04) 0,
      rgba(0, 0, 0, 0.04) 4px,
      rgba(255, 255, 255, 0.14) 4px,
      rgba(255, 255, 255, 0.14) 8px);
  border: 1px dashed #b9b9b9;
  font-size: 0.95em;
  display: inline-block;
  max-width: 100%;
  vertical-align: baseline;
}

.doc-var-widget .doc-var-rich {
  display: inline-block;
  max-width: 100%;
}

.doc-var-widget .doc-var-rich-content {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.doc-var-widget .doc-var-rich-content img {
  max-width: 100%;
  height: auto;
}

.doc-var-widget .doc-var-rich-content table {
  border-collapse: collapse;
  width: auto;
  max-width: 100%;
}

.doc-traceability-table {
  position: relative;
  display: block;
  max-width: 100%;
  margin: 12px 0;
  padding: 10px;
  border: 1px dashed #b9b9b9;
  border-radius: 8px;
  background-color: #f0f0f0;
  background-image: repeating-linear-gradient(-45deg,
      rgba(0, 0, 0, 0.035) 0,
      rgba(0, 0, 0, 0.035) 5px,
      rgba(255, 255, 255, 0.16) 5px,
      rgba(255, 255, 255, 0.16) 10px);
  overflow-x: auto;
}

.doc-traceability-toolbar {
  padding-inline-end: 96px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--ink-soft);
}

.doc-traceability-toolbar label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.doc-traceability-toolbar select {
  min-height: 28px;
  border: 1px solid #cfc2b2;
  border-radius: 6px;
  background: #fff;
  padding: 3px 8px;
  font-size: 12px;
}

.doc-traceability-actions {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 8px;
  display: flex;
  gap: 4px;
}


.doc-traceability-content {
  background: #fff;
  border: 1px solid var(--muted);
  border-radius: 6px;
  padding: 8px;
  min-width: min(720px, 100%);
}

.doc-traceability-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.doc-traceability-matrix th,
.doc-traceability-matrix td {
  border: 1px solid var(--doc-table-border);
  padding: 6px;
  vertical-align: top;
}

.doc-traceability-matrix td {
  background-color: var(--doc-table-td-bg);
}

.doc-traceability-matrix th {
  background: var(--doc-table-header-bg);
  color: var(--doc-table-header-text);
  text-align: left;
}

.doc-traceability-item {
  display: block;
  margin: 2px 0;
  color: var(--ink);
  line-height: 1.35;
}

.doc-traceability-item.is-not-applicable {
  color: var(--text-muted, #71675f);
  font-style: italic;
}

.doc-traceability-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.doc-traceability-text {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.doc-traceability-code {
  white-space: nowrap;
}

.workitem-reference-count {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--muted);
  border-radius: 999px;
  background: var(--canvas);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.doc-traceability-link:hover .doc-traceability-code,
.doc-traceability-link:focus-visible .doc-traceability-code {
  text-decoration: underline;
}

.doc-traceability-test-cell.passed {
  background: #e6f4ea;
  border-color: #c6e8cf;
}

.doc-traceability-test-cell.accepted {
  background: #fff5d6;
  border-color: #f2ddb0;
}

.doc-traceability-test-cell.failed {
  background: #fde8e7;
  border-color: #f4c2bf;
}

.doc-traceability-type-icon {
  flex: 0 0 auto;
}

.doc-ai-proposal-title-input,
.doc-ai-proposal-field select,
.doc-ai-proposal-field textarea {
  width: 100%;
  border: 1px solid #d8cbbb;
  border-radius: 7px;
  background: #fffaf5;
  padding: 7px;
  font: inherit;
}

.doc-ai-rich-editor {
  width: 100%;
  min-height: 96px;
  max-height: 260px;
  overflow: auto;
  border: 1px solid #d8cbbb;
  border-radius: 7px;
  background: #fffaf5;
  padding: 7px;
  font: inherit;
  line-height: 1.4;
}

.doc-ai-rich-editor:focus {
  outline: 2px solid rgba(28, 120, 98, 0.22);
  border-color: #86b9aa;
}

.doc-ai-rich-editor p {
  margin: 0 0 6px;
}

.doc-ai-rich-editor ul,
.doc-ai-rich-editor ol {
  margin: 4px 0 6px 20px;
  padding: 0;
}

.tool-color-swatch.is-active {
  outline: 2px solid #2d5b4e;
  outline-offset: 1px;
}

.doc-ai-rich-editor table {
  border-collapse: collapse;
  width: 100%;
  margin: 6px 0;
}

.doc-ai-rich-editor td,
.doc-ai-rich-editor th {
  border: 1px solid #d8cbbb;
  padding: 4px 6px;
}

.doc-ai-rich-editor img,
.doc-ai-rich-editor svg {
  max-width: 100%;
  height: auto;
}

.doc-ai-drawio-preview {
  border: 1px solid #d8cbbb;
  border-radius: 7px;
  background: #fffaf5;
  padding: 7px;
}

.doc-ai-drawio-preview img,
.doc-ai-message img[data-diagram] {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid #d8cbbb;
  border-radius: 7px;
  background: #ffffff;
}

.doc-ai-proposal-title-input {
  font-weight: 700;
}

.doc-ai-proposal-field {
  display: grid;
  gap: 4px;
  font-size: 12px;
}

@media (max-width: 680px) {

  .document-search-options {
    grid-template-columns: 1fr;
  }

  .doc-ai-panel {
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    max-height: calc(100vh - 16px);
  }

  .doc-ai-composer {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .doc-ai-composer .primary {
    grid-column: 2;
  }
}

.doc-traceability-code {
  font-weight: 500;
}

.trace-controls {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: 12px;
}

.trace-levels-info {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

#traceabilityView {
  min-height: 0;
  flex: 1;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.trace-controls label {
  margin-right: 12px;
}

#traceabilityMatrixPanel:not([hidden]) {
  display: flex;
  flex: 1 1 0;
  min-height: 180px;
  min-width: 0;
  padding-bottom: 2px;
}

.trace-table {
  --trace-cols: 3;
  --trace-rest: 2;
  --trace-sticky-header-height: 48px;
  background: var(--canvas);
  border-radius: 12px;
  border: 1px solid var(--muted);
  padding: 0;
  display: block;
  box-shadow: 0 2px 8px var(--shadow);
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow-anchor: none;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.trace-row {
  display: grid;
  grid-template-columns: 1.2fr repeat(var(--trace-rest), minmax(0, 1fr));
  gap: 10px;
  border-bottom: 1px solid var(--muted);
  padding: 9px 12px;
  box-sizing: border-box;
  min-height: 48px;
  align-items: start;
}

.trace-header-row {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #efe7dd;
  box-shadow: 0 1px 0 var(--muted);
}

.trace-header-row .trace-header {
  position: static;
}

.trace-table > .trace-row:not(.trace-header-row):hover {
  background: #f5f1eb;
}

.trace-row-group {
  border-bottom: 1px solid var(--muted);
}

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

.trace-merged-table .trace-cell {
  display: table-cell;
  padding: 4px 6px;
  border-right: 1px solid var(--muted);
  border-bottom: 1px solid var(--muted);
  vertical-align: top;
}

.trace-merged-table .trace-cell:last-child {
  border-right: 0;
}

.trace-merged-table tr:last-child .trace-cell {
  border-bottom: 0;
}

.trace-row-group:hover .trace-cell,
.trace-row-group:focus-within .trace-cell {
  background: #f5f1eb;
}

.trace-cell-content {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.trace-cell:has(> .trace-cell-add-action) > .trace-cell-content {
  min-height: var(--ui-control-compact);
  padding-inline-end: calc(var(--ui-control-compact) + var(--ui-space-1));
}

.trace-cell-content > .trace-item-separator {
  height: 1px;
  margin: 4px -6px;
  background: var(--muted);
  flex: 0 0 1px;
}

.trace-row-group .trace-cell[rowspan] > .trace-cell-content {
  position: sticky;
  top: calc(var(--trace-sticky-header-height) + 4px);
  z-index: 3;
}

.trace-merged-table .trace-cell:has(> .trace-cell-content > .trace-empty-action) {
  position: relative;
}

.trace-row-group .trace-cell > .trace-cell-content:has(> .trace-empty-action) {
  position: static;
  min-height: 24px;
}

.trace-merged-table .trace-empty-action {
  position: absolute;
  inset: 0;
  height: 100%;
  padding: 4px 6px;
  border-radius: 0;
}

.trace-lazy-spacer {
  pointer-events: none;
}

.trace-header {
  font-weight: 700;
  background: #efe7dd;
  border-radius: 8px;
  padding: 6px 8px;
  border: none;
  text-align: left;
  cursor: pointer;
}

.trace-header:hover {
  filter: brightness(0.97);
}

.trace-cell {
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.trace-item {
    padding: 0;
    border: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    overflow: hidden;
    text-wrap: auto;
    overflow-wrap: anywhere;
}

.trace-empty-action {
  width: 100%;
  min-height: 24px;
  padding: 0;
  border: 0;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.trace-empty-action:hover,
.trace-empty-action:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

.trace-empty-action.is-not-applicable {
  border-style: solid;
  background: #f1eee9;
  color: var(--text-muted, #71675f);
  font-style: italic;
}

.trace-cell-add-action {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  width: 100%;
  min-width: var(--ui-control-compact);
  height: 100%;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 120ms ease;
}

.trace-cell:has(.trace-cell-add-action) { position: relative; }
.trace-cell:has(> .trace-cell-add-action) > .trace-cell-content { z-index: 1; pointer-events: none; }
.trace-cell:has(> .trace-cell-add-action) > .trace-cell-content :is(a, button) { pointer-events: auto; }

.trace-item:has(> a.trace-link) {
  position: relative;
  pointer-events: auto;
}

.trace-item > a.trace-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.trace-last-test-run a {
  position: relative;
  z-index: 1;
}

.trace-merged-table .trace-cell-add-action {
  display: flex;
  margin: 0;
}

@media (pointer: coarse) {
  .trace-cell:has(> .trace-cell-add-action) > .trace-cell-content {
    min-height: 44px;
    padding-inline-end: calc(44px + var(--ui-space-1));
  }
  .trace-cell-add-action {
    min-width: 44px;
    min-height: 44px;
  }
}

.trace-cell-add-action:hover,
.trace-cell-add-action:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

.trace-item.test-result.passed {
  background: #e6f4ea;
  border-color: #c6e8cf;
}

.trace-item.test-result.accepted {
  background: #fff5d6;
  border-color: #f2ddb0;
}

.trace-item.test-result.failed {
  background: #fde8e7;
  border-color: #f4c2bf;
}

.trace-row.has-conflict .trace-cell:first-child .trace-item:first-child::before,
.trace-row-group .trace-merged-row.has-conflict .trace-cell:first-child .trace-item:first-child::before {
  content: "⚠";
  color: #b85c00;
  font-size: 12px;
  flex-shrink: 0;
  margin-right: 2px;
  line-height: 1;
}

.trace-row.has-conflict > .trace-cell:first-child {
  background: #fff8ee;
  border-radius: 6px;
}

.trace-row-group .trace-merged-row.has-conflict > .trace-cell:first-child {
  background: #fff8ee;
}

.trace-cell-missing {
  color: var(--ink-soft);
  font-size: 12px;
  padding: 4px 6px;
}

#traceQueryToggleBtn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: #fff1f1;
}

#traceFilterApplyBtn {
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    max-width 0.2s ease,
    margin 0.2s ease,
    padding 0.2s ease,
    border-width 0.2s ease;
  max-width: 180px;
  overflow: hidden;
  white-space: nowrap;
}

#traceFilterApplyBtn.query-mode-hidden {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  max-width: 0;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  border-width: 0;
}

#traceabilityView .work-filters input,
#traceabilityView .work-filters select {
  border: 1px solid #cfc2b2;
  border-radius: 10px;
  background: #ffffff;
  min-height: 40px;
  padding: 8px 12px;
}

#traceabilityView .work-filters select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #7d6f61 50%),
    linear-gradient(135deg, #7d6f61 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.trace-config-modal {
  box-sizing: border-box;
  width: min(1540px, calc(100vw - 32px));
  height: min(920px, calc(100vh - 32px));
  max-width: none;
  max-height: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.trace-config-modal[hidden] {
  display: none;
}

.trace-config-toolbar {
  position: relative;
  z-index: 6;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-2);
  padding: 10px 16px;
  border-bottom: 1px solid var(--border, #ddd4cc);
  background: var(--surface, #fff);
}

.trace-config-scope-field {
  display: flex;
  flex: 0 1 300px;
  min-width: 0;
  align-items: center;
  gap: var(--ui-space-2);
  margin: 0;
}

.trace-config-scope-field select {
  flex: 1;
  min-width: 0;
}

.trace-config-modal .meta-subtle {
  margin: 0;
}

.trace-config-modal .modal-header .meta-subtle {
  margin-top: var(--ui-space-1);
}

.trace-config-toolbar .status-pill.is-dirty {
  border-color: #d8a23a;
  background: #fff3da;
  color: #8a4f05;
}

.trace-config-display-menu {
  position: relative;
}

.trace-config-display-menu > summary,
.trace-config-toolbar > button {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
}

.trace-config-toolbar > button[hidden],
.trace-config-toolbar > details[hidden],
.trace-config-toolbar > .field[hidden] {
  display: none;
}

.trace-config-display-menu > summary {
  list-style: none;
  cursor: pointer;
}

.trace-config-display-menu > summary::-webkit-details-marker {
  display: none;
}

.trace-config-display-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  display: grid;
  width: 330px;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border, #ddd4cc);
  border-radius: 10px;
  background: var(--surface, #fff);
  box-shadow: 0 10px 28px rgb(49 38 30 / 18%);
}

.trace-config-validation {
  flex: 0 0 auto;
  margin: 8px 16px 0;
  padding: 8px 12px;
  border: 1px solid #e8bf66;
  border-radius: 8px;
  background: #fff3da;
  color: #8a4f05;
}

.trace-config-validation.is-valid {
  border-color: #8fc5a6;
  background: #edf8f1;
  color: #26734d;
}

.trace-config-validation ul {
  margin: 4px 0 0;
  padding-left: 20px;
}

.trace-config-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(180px, 1fr) auto;
  min-height: 0;
  flex: 1;
  margin: 12px 16px;
  overflow: hidden;
}

.trace-config-connection-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--ui-space-2);
  margin: var(--ui-space-3) var(--ui-space-4) 0;
}

.trace-config-connection-editor[hidden] {
  display: none;
}

.trace-config-connection-editor .field {
  flex: 1 1 180px;
  min-width: 0;
  margin: 0;
}

.trace-config-connection-editor select {
  width: 100%;
  min-width: 0;
}

.trace-config-connection-hint {
  flex-basis: 100%;
}

.trace-config-inspector {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  max-height: min(240px, 35dvh);
  padding: 10px 14px;
  overflow: auto;
  background: var(--surface, #fff);
  border-top: 1px solid var(--border, #ddd4cc);
}

.trace-config-inventory {
  position: relative;
  min-width: 0;
}

.trace-config-inventory > summary {
  display: flex;
  align-items: center;
  gap: var(--ui-space-1);
  list-style: none;
}

.trace-config-inventory > summary::-webkit-details-marker {
  display: none;
}

.trace-config-inventory-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  width: min(420px, calc(100vw - 64px));
  max-height: min(420px, 55vh);
  padding: 12px;
  overflow: auto;
}

.trace-config-level-navigation {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  padding: 6px 12px;
}

.trace-config-level-navigation .tab-btn {
  flex: 0 0 auto;
  min-height: 44px;
  white-space: nowrap;
}

.trace-config-inspector > .field {
  flex: 0 1 220px;
}

.trace-config-inspector-type-toolbar {
  display: flex;
  flex: 1 1 100%;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-2) var(--ui-space-4);
}

.trace-config-inspector-type-toolbar .trace-config-inspector-type-title {
  flex: 1 1 240px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.trace-config-inspector-type-toolbar .field {
  display: flex;
  flex: 0 1 280px;
  align-items: center;
  gap: var(--ui-space-2);
  min-width: 0;
  margin: 0;
}

.trace-config-inspector-type-toolbar select {
  flex: 1;
  min-width: 0;
}

.trace-config-inventory .field {
  margin: 10px 0;
}

.trace-type-inventory {
  display: grid;
  gap: 7px;
}

.trace-type-inventory-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 9px;
  border: 1px solid var(--border, #ddd4cc);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.trace-type-inventory-item:hover,
.trace-type-inventory-item.is-selected {
  border-color: var(--accent, #d83a32);
  background: var(--accent-soft, #fee9e7);
}

.trace-type-inventory-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trace-type-inventory-level {
  color: var(--text-muted, #71675f);
  font-size: 11px;
}

.trace-config-canvas-shell {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  container-type: inline-size;
  background: #fbfaf8;
}

.trace-config-canvas-options {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ui-space-2);
  min-height: var(--ui-control-height);
  margin-left: auto;
  flex-wrap: wrap;
}

.trace-config-modal.is-document-view .trace-config-display-popover {
  right: auto;
  left: 0;
}

.trace-config-modal.is-document-view .trace-config-workspace {
  grid-template-columns: minmax(0, 1fr);
}

.trace-config-modal.is-document-view .trace-config-inventory {
  display: none;
}

.trace-config-modal.is-document-view .trace-type-card {
  cursor: default;
}

.trace-level-column.is-view-hidden {
  background: #ece9e6;
}

.trace-level-column.is-view-hidden .trace-level-column-head {
  background: #e5e1dd;
}

.trace-level-column.is-view-hidden .trace-type-card,
.trace-level-column.is-view-hidden .trace-level-column-title > strong,
.trace-level-column.is-view-hidden .trace-level-column-title > .status-pill,
.trace-level-column.is-view-hidden .trace-level-column-title > .meta-subtle {
  filter: grayscale(0.8);
  opacity: 0.42;
}

.trace-level-visibility-toggle {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 6px;
}

.trace-level-visibility-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.trace-config-canvas-options .inline-check {
  margin: 0;
  white-space: nowrap;
}

.trace-level-editor {
  position: relative;
  display: flex;
  min-width: 100%;
  min-height: 0;
  flex: 1;
  align-items: flex-start;
  overflow: auto;
  background: var(--paper);
}

.trace-level-column {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 240px;
  min-height: 100%;
  height: max-content;
  flex: 1 0 0;
  flex-direction: column;
  border-right: 1px solid var(--muted);
  background: transparent;
}

.trace-level-column:last-of-type {
  border-right: 0;
}

.trace-level-column.is-drop-target {
  background: rgb(216 58 50 / 8%);
  box-shadow: inset 0 0 0 2px var(--accent, #d83a32);
}

.trace-level-column-head {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  gap: var(--ui-space-1);
  padding: var(--ui-space-2);
  border-bottom: 1px solid var(--border, #ddd4cc);
  background: rgb(255 255 255 / 96%);
  cursor: pointer;
}

.trace-level-column.is-selected .trace-level-column-head {
  box-shadow: inset 0 -3px var(--accent, #d83a32);
}

.trace-level-column-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.trace-level-column-title > input {
  min-width: 0;
  width: 100%;
}

.trace-level-column-title > strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.trace-level-column-actions {
  display: flex;
  gap: 3px;
}

.trace-level-card-list {
  position: relative;
  z-index: 3;
  display: grid;
  align-content: start;
  gap: var(--ui-space-2);
  padding: var(--ui-space-3) var(--ui-space-2) var(--ui-space-4);
}

.trace-type-card {
  position: relative;
  display: grid;
  justify-self: center;
  width: 75%;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  min-height: var(--ui-control-compact);
  gap: var(--ui-space-1);
  padding: var(--ui-space-1) var(--ui-space-2);
  border: 1px solid var(--muted);
  border-radius: var(--ui-radius);
  background: var(--canvas);
  cursor: grab;
}

.trace-type-card:hover,
.trace-type-card.is-selected,
.trace-type-card.is-connect-source {
  border-color: var(--accent, #d83a32);
}

.trace-type-card.is-invalid-target {
  opacity: 0.48;
}

.trace-type-card:active {
  cursor: grabbing;
}

.trace-type-card-connector,
.trace-type-card-target {
  position: absolute;
  z-index: 6;
  top: 50%;
  width: 13px;
  height: 13px;
  padding: 0;
  border: 2px solid #81766d;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.trace-type-card-connector {
  right: -8px;
  cursor: crosshair;
}

.trace-type-card-target {
  left: -8px;
  pointer-events: none;
}

.trace-type-card:hover .trace-type-card-connector,
.trace-type-card:focus-within .trace-type-card-connector,
.trace-type-card.is-selected .trace-type-card-connector,
.trace-level-editor.is-connection-dragging .trace-type-card-target,
.trace-level-editor.is-connection-dragging .trace-type-card-connector {
  opacity: 1;
}

.trace-type-card-connector:hover,
.trace-type-card-connector:focus-visible,
.trace-type-card.is-connect-source .trace-type-card-connector {
  border-color: var(--accent, #d83a32);
}

.trace-type-card.is-valid-target .trace-type-card-target {
  border-color: var(--accent, #d83a32);
  background: var(--accent-soft, #fee9e7);
}

.trace-type-card.is-connection-target-hover {
  border-color: var(--accent, #d83a32);
  background: #fff7f6;
}

.trace-config-edge-preview {
  fill: none;
  stroke: var(--accent, #d83a32);
  stroke-width: 3;
  stroke-dasharray: 7 5;
  opacity: 0.9;
  pointer-events: none;
}

.trace-level-editor.is-connection-dragging .trace-config-edges {
  z-index: 4;
}

.trace-level-editor.is-connection-dragging .trace-config-edge,
.trace-level-editor.is-connection-dragging .trace-config-edge-hit {
  opacity: 0;
  pointer-events: none;
}

.trace-type-card-title {
  font-weight: 650;
  overflow-wrap: anywhere;
}

.trace-type-card-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.trace-type-card-meta {
  color: var(--text-muted, #71675f);
  font-size: 11px;
}

.trace-config-type-icon {
  margin-right: 0 !important;
}

.trace-config-inspector-type-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trace-config-edges {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: visible;
  pointer-events: none;
}

.trace-config-edge {
  fill: none;
  stroke: #81766d;
  stroke-width: 2;
  opacity: 0.42;
  pointer-events: stroke;
  cursor: pointer;
}

.trace-config-edge.is-visible {
  opacity: 0.38;
}

.trace-config-edge.is-related,
.trace-config-edge.is-selected {
  stroke: var(--accent, #d83a32);
  stroke-width: 3.5;
  opacity: 1;
}

.trace-config-edge.is-selected {
  stroke-width: 4;
}

.trace-config-edge.is-reference {
  stroke-dasharray: 6 5;
}

.trace-config-edge-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 14;
  pointer-events: stroke;
  cursor: pointer;
}

.trace-config-inspector > .field,
.trace-config-inspector fieldset {
  margin: 12px 0;
}

.trace-config-inspector fieldset {
  padding: 10px;
  border: 1px solid var(--border, #ddd4cc);
  border-radius: 8px;
}

.trace-config-inspector-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  max-height: 90px;
  overflow: auto;
  padding-right: 3px;
}

.trace-config-inspector-rule {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: var(--ui-space-1);
}

.trace-config-modal.is-document-view .trace-config-inspector-rule {
  grid-template-columns: minmax(0, 1fr);
}

.trace-config-rules-drawer {
  flex: 0 0 auto;
  max-height: 190px;
  margin: 0 16px 12px;
  overflow: auto;
}

.trace-rule-list {
  display: grid;
  gap: 8px;
  max-height: 220px;
  overflow: auto;
  padding: var(--ui-space-3);
}

.trace-rule-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) auto auto;
  padding: var(--ui-space-2);
  gap: var(--ui-space-3);
  align-items: center;
}

.trace-rule-kind {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.trace-rule-row.warning {
  border: 1px solid #f3c0bc;
  border-radius: 8px;
  padding: 6px;
  background: #fff2f1;
}

#traceabilityConfigModal details summary {
  cursor: pointer;
  user-select: none;
}

.trace-rule-row.is-readonly {
  grid-template-columns: minmax(160px, 1fr) auto minmax(160px, 1fr) auto;
  padding: 7px 9px;
  border: 1px solid var(--border, #ddd4cc);
  border-radius: 8px;
  background: var(--surface-muted, #faf7f4);
}

#traceabilityConfigModal .trace-rule-list {
  max-height: none;
}

@container (max-width: 900px) {
  .trace-level-column {
    flex: 1 0 160px;
  }
}

@media (pointer: coarse) {
  .trace-type-card {
    min-height: 44px;
  }
}

@media (max-width: 640px), (max-height: 640px) {
  .trace-config-modal {
    overflow-y: auto;
  }

  .trace-config-workspace {
    flex: 0 0 auto;
    grid-template-rows: minmax(300px, 1fr) auto;
  }

  .trace-config-connection-editor {
    flex-shrink: 0;
  }

  .trace-config-modal .modal-actions {
    flex-wrap: wrap;
    flex-shrink: 0;
  }

}

@media (max-width: 640px) {
  .trace-config-modal {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
  }

  .trace-config-toolbar {
    padding: var(--ui-space-2);
  }

  .trace-config-workspace {
    margin: var(--ui-space-2);
  }
}

.trace-links-groups {
  display: grid;
  gap: 10px;
}

.trace-issues {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid #e8bf66;
  border-radius: 10px;
  background: #fff3da;
}

.trace-issues-title {
  font-size: 12px;
  font-weight: 700;
  color: #8a4f05;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.trace-issue-item {
  font-size: 12px;
  line-height: 1.35;
  color: #6b450d;
}

.trace-group {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--muted);
  border-radius: 10px;
  background: #fdf8f1;
}

.trace-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.trace-group-label {
  font-size: 12px;
  font-weight: 600;
  color: #2d5b4e;
}

.trace-group-count {
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid #cbb9a5;
  background: #efe7dd;
  font-size: 11px;
  text-align: center;
}

.trace-group-list {
  display: grid;
  gap: 6px;
}

.link-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--muted);
  border-radius: 8px;
  background: #fffaf5;
}

.link-item.link-item-warning {
  border-color: #e3bf59;
  background: #fff4d8;
}

.trace-link-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.trace-link-alert {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid #d7a11a;
  background: #f6c949;
  color: #6b450d;
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 auto;
}

.trace-link-broken-label {
  color: #6b450d;
  font-weight: 600;
}

.trace-relation {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid #d6c8b8;
  background: #f3ebe1;
  color: #6b5948;
  font-size: 11px;
  white-space: nowrap;
}

.trace-type-icon {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background-size: 12px;
  flex: 0 0 auto;
}

.link-arrow {
  margin: 0 2px;
  color: #2d5b4e;
  font-weight: 600;
}

#workItemUsage {
  display: grid;
  gap: 0;
}

.link-remove {
  display: none;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 6px;
  border: 1px solid var(--muted);
  border-radius: 6px;
  background: #efe7dd;
}

.link-item:hover .link-remove {
  display: inline-flex;
}

#diagramCanvas {
  border: 1px solid var(--muted);
  border-radius: 10px;
  background: #fffaf5;
}

.diagram-embed {
  width: min(100%, 980px);
  height: min(70vh, 640px);
  border: 1px solid var(--muted);
  border-radius: 12px;
  overflow: hidden;
  background: #fffaf5;
  margin: 0 auto;
}

.diagram-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.img-resizable {
  position: relative;
}

.diagram-edit-btn {
  position: absolute;
  right: 6px;
  bottom: -12px;
  transform: none;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--muted);
  background: #fffaf5;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px var(--shadow);
  cursor: pointer;
  pointer-events: none;
  padding: 0;
  margin: 0;
  line-height: 0;
  font-size: 0;
}

.diagram-edit-btn .btn-icon {
  width: 14px;
  height: 14px;
  display: block;
}

.img-resizable.show-diagram-btn .diagram-edit-btn {
  display: inline-flex;
  pointer-events: auto;
}

@media (min-width: 1201px) {
  .workspace.document-toolbar-active > .main {
    grid-row: 1 / 3;
  }

  .workspace.document-toolbar-active #documentsView .doc-editor {
    height: calc(
      100% - var(--document-toolbar-height) - var(--workspace-grid-gap)
    );
    margin-top: calc(
      var(--document-toolbar-height) + var(--workspace-grid-gap)
    );
  }

  body.projects-sidebar-pinned:not(.doc-editor-fullscreen-mode) .workspace,
  body.projects-sidebar-pinned:not(.doc-editor-fullscreen-mode) .workspace.sidebar-left-collapsed {
    grid-template-columns:
      minmax(var(--sidebar-min-width), var(--left-sidebar-width))
      minmax(var(--workspace-main-min-width), 1fr)
      minmax(var(--sidebar-min-width), var(--right-sidebar-width));
  }

  body.projects-sidebar-pinned:not(.doc-editor-fullscreen-mode) .workspace.sidebar-right-collapsed,
  body.projects-sidebar-pinned:not(.doc-editor-fullscreen-mode) .workspace.sidebar-left-collapsed.sidebar-right-collapsed {
    grid-template-columns:
      minmax(var(--sidebar-min-width), var(--left-sidebar-width))
      minmax(var(--workspace-main-min-width), 1fr)
      0;
  }

  body.projects-sidebar-pinned:not(.doc-editor-fullscreen-mode) .workspace:has(#traceabilityView.active):not(:has(#metaPanel.meta-workitem-mode)) {
    grid-template-columns:
      minmax(var(--sidebar-min-width), var(--left-sidebar-width))
      minmax(var(--workspace-main-min-width), 1fr);
  }

  body.projects-sidebar-pinned:not(.doc-editor-fullscreen-mode)
    .workspace.document-toolbar-active > .sidebar {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  body.projects-sidebar-pinned:not(.doc-editor-fullscreen-mode)
    .workspace.document-toolbar-active > .document-toolbar-shell {
    grid-column: 2 / -1;
    grid-row: 1;
  }

  body.projects-sidebar-pinned:not(.doc-editor-fullscreen-mode)
    .workspace.document-toolbar-active > .main {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  body.projects-sidebar-pinned:not(.doc-editor-fullscreen-mode)
    .workspace.document-toolbar-active > .meta-sidebar {
    grid-column: 3;
    grid-row: 2;
  }

  body.projects-sidebar-pinned:not(.doc-editor-fullscreen-mode) .workspace.project-home-mode,
  body.projects-sidebar-pinned:not(.doc-editor-fullscreen-mode) .workspace.project-home-mode.sidebar-left-collapsed,
  body.projects-sidebar-pinned:not(.doc-editor-fullscreen-mode).focused-view .workspace,
  body.projects-sidebar-pinned:not(.doc-editor-fullscreen-mode).focused-view .workspace.sidebar-left-collapsed {
    grid-template-columns:
      minmax(var(--sidebar-min-width), var(--left-sidebar-width))
      minmax(var(--workspace-main-min-width), 1fr);
  }

  body.projects-sidebar-pinned:not(.doc-editor-fullscreen-mode) .workspace > .sidebar {
    position: relative;
    inset: auto;
    z-index: auto;
    width: auto;
    height: 100%;
    max-height: 100%;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    transition: none;
  }

  .workspace > .sidebar .sidebar-pin {
    display: inline-flex;
  }

  body.projects-sidebar-pinned:not(.doc-editor-fullscreen-mode)
    .workspace > .sidebar:not(.sidebar-collapsed)
    > .sidebar-resize-flag,
  .doc-sidebar > .sidebar-resize-flag,
  .meta-sidebar:not(.sidebar-collapsed) > .sidebar-resize-flag {
    display: flex;
  }

  body.projects-sidebar-pinned .responsive-projects-toggle,
  body.projects-sidebar-pinned .workspace > .sidebar .responsive-sidebar-close {
    display: none;
  }
}

@media (max-width: 1350px) {
  .topbar {
    gap: 16px;
  }

  .topbar .main-header {
    gap: 16px;
  }

  .topbar .project-title-row {
    flex-basis: 220px;
  }
}

@media (max-width: 1200px) {
  .responsive-projects-toggle,
  .responsive-documents-toggle {
    display: inline-flex;
  }

  .responsive-projects-toggle {
    width: 40px;
    min-width: 40px;
    padding: 0;
  }

  .responsive-projects-label {
    display: none;
  }

  .responsive-documents-toggle[hidden] {
    display: none !important;
  }

  .workspace,
  .workspace.sidebar-left-collapsed,
  .workspace.sidebar-right-collapsed,
  .workspace.sidebar-left-collapsed.sidebar-right-collapsed,
  body.doc-editor-fullscreen-mode .workspace,
  body.doc-editor-fullscreen-mode .workspace.sidebar-right-collapsed {
    grid-template-columns: minmax(0, 1fr) minmax(220px, var(--right-sidebar-width));
  }

  .workspace.project-home-mode,
  .workspace.project-home-mode.sidebar-left-collapsed,
  .focused-view .workspace,
  .focused-view .workspace.sidebar-left-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }

  .workspace {
    --workspace-grid-gap: 10px;
    gap: var(--workspace-grid-gap);
    padding: 0;
  }

  .workspace.document-toolbar-active > .document-toolbar-shell {
    margin-left: 0;
  }

  .workspace > .sidebar {
    inset: 68px auto 12px 12px;
  }

  .meta-sidebar {
    display: flex;
  }

  .workspace.sidebar-right-collapsed > .meta-sidebar {
    width: 100%;
    padding: 12px;
    border-width: 1px;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .sidebar-resize-flag,
  .metadata-sidebar-reveal {
    display: none !important;
  }

  .meta-sidebar.sidebar-collapsed {
    padding: 12px;
  }

  .meta-sidebar .sidebar-toggle,
  .meta-sidebar .sidebar-collapsed-header {
    display: none !important;
  }

  .meta-sidebar.sidebar-collapsed .sidebar-header,
  .meta-sidebar.sidebar-collapsed #metaPanel {
    display: flex !important;
  }

  .meta-sidebar.sidebar-collapsed:not(.document-properties-active) #metaQuickReview:not([hidden]) {
    display: grid !important;
  }

  .main,
  .doc-editor {
    min-width: 0;
  }

  .main-header {
    flex-wrap: wrap;
    gap: 10px;
  }

  .topbar .main-header {
    flex-wrap: nowrap;
  }

  .topbar .view-tabs {
    overflow: visible;
  }

  .doc-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .doc-sidebar {
    position: fixed;
    inset: 12px;
    z-index: 70;
    width: auto;
    height: auto;
    max-height: none;
    transform: translateY(calc(-100% - 24px));
    visibility: hidden;
    pointer-events: none;
    transition: transform 180ms ease, visibility 0s linear 180ms;
  }

  body.responsive-documents-open .doc-sidebar {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform 180ms ease, visibility 0s linear 0s;
  }

  body.doc-editor-fullscreen-mode.responsive-documents-open #documentsView .doc-sidebar {
    display: flex;
  }

  .doc-sidebar .responsive-sidebar-close {
    display: inline-flex;
  }
}

@media (max-width: 1100px) {
  .topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
  }

  .topbar-leading {
    grid-column: 1;
    grid-row: 1;
  }

  .topbar .project-title-row {
    flex: 0 1 190px;
    min-width: 0;
    margin-right: 0;
  }

  .topbar .view-tabs {
    width: auto;
    justify-content: flex-start;
  }

  .topbar-actions {
    grid-column: 3;
    grid-row: 1;
  }

  .workspace > .sidebar {
    inset: 68px auto 12px 12px;
  }

  .view-load-indicator {
    top: 60px;
  }
}

@media (max-width: 900px) {
  .topbar {
    min-height: 60px;
    padding: 8px 12px;
  }

  .topbar-leading {
    gap: 7px;
  }

  .responsive-project-navigation-toggle {
    display: inline-flex;
  }

  .topbar .main-header[hidden] + .topbar-actions .responsive-project-navigation-toggle {
    display: none;
  }

  .focused-view .responsive-project-navigation-toggle,
  .help-mode .responsive-project-navigation-toggle {
    display: none;
  }

  .topbar-actions > .ghost .btn-label,
  .topbar-actions > .settings-menu > .ghost .btn-label {
    display: none;
  }

  .topbar-actions {
    gap: 6px;
  }

  .topbar-actions > .ghost,
  .topbar-actions > .settings-menu > .ghost {
    width: 40px;
    height: 40px;
    justify-content: center;
    padding: 0;
  }

  .settings-dropdown {
    position: fixed;
    top: 60px;
    right: 8px;
    left: 8px;
    max-height: calc(100vh - 68px);
    overflow-y: auto;
  }

  .settings-legal-dropdown {
    position: static;
    margin-top: 6px;
  }

  .workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 0;
  }

  .workspace > .sidebar {
    inset: 68px 8px 8px;
    width: auto;
    transform: translateX(calc(-100% - 16px));
  }

  .main {
    order: 1;
    gap: 8px;
  }

  .main-header {
    align-items: stretch;
    padding: 8px 10px;
  }

  .project-title-row {
    width: auto;
    margin-right: 0;
  }

  .topbar .project-title-row {
    flex: 1 1 auto;
    padding-right: 0;
    border-right: 0;
  }

  .project-title {
    min-width: 0;
    font-size: 15px;
  }

  .project-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar .view-tabs {
    position: fixed;
    top: 60px;
    right: 8px;
    z-index: 76;
    display: none;
    width: min(320px, calc(100vw - 16px));
    max-height: calc(100vh - 68px);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 8px;
    overflow-y: auto;
    border: 1px solid var(--muted);
    border-radius: 12px;
    background: var(--canvas);
    box-shadow: 0 14px 30px rgba(35, 26, 16, 0.24);
  }

  body.responsive-project-navigation-open .topbar .view-tabs {
    display: flex;
  }

  .topbar .view-tabs .tab-btn {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    justify-content: flex-start;
    gap: 10px;
    padding: 8px 12px;
    color: var(--ink);
  }

  .topbar .view-tabs .tab-btn .btn-label {
    display: inline;
  }

  .topbar .view-tabs .tab-btn:hover,
  .topbar .view-tabs .tab-btn:focus-visible {
    background: #f3ece4;
  }

  .topbar .view-tabs .tab-btn.active {
    color: var(--accent);
    background: #f5ded7;
  }

  .doc-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .doc-sidebar {
    inset: 68px 8px 8px;
    transform: translateY(calc(-100% - 70px));
  }

  .meta-sidebar {
    display: none;
  }

  body.responsive-review-open .meta-sidebar {
    display: flex !important;
    position: fixed;
    inset: 68px 8px 8px;
    z-index: 70;
    width: auto;
    height: auto;
    max-height: none;
  }

  body.responsive-review-open .meta-sidebar.sidebar-collapsed .sidebar-header {
    display: flex;
  }

  body.responsive-review-open .meta-sidebar .sidebar-collapsed-header,
  body.responsive-review-open .meta-sidebar .sidebar-toggle,
  body.responsive-review-open .meta-sidebar #metaPanel:not(.meta-workitem-mode):not(.workitem-workspace-details):not([data-details-item-id]),
  body.responsive-review-open .metadata-sidebar-title {
    display: none !important;
  }

  body.responsive-review-open .responsive-review-title,
  body.responsive-review-open .responsive-review-close {
    display: inline-flex;
  }

  body.responsive-review-open .meta-sidebar:not(.document-properties-active) #metaQuickReview:not([hidden]) {
    display: grid !important;
    flex: 0 0 auto;
    min-height: 0;
    max-height: none;
    margin: 10px 0 0;
  }

  body.responsive-review-open .meta-sidebar:not(.document-properties-active) #metaQuickReview[hidden] + .responsive-review-empty {
    display: block;
    margin-top: 10px;
    padding: 12px;
    border: 1px dashed var(--muted);
    border-radius: 10px;
    background: #fffaf5;
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.4;
  }

  .doc-editor {
    gap: 8px;
    padding: 7px;
    border-radius: 0;
  }

  #mobileEditingNotice:not([hidden]) {
    display: flex;
  }

  .document-toolbar-shell > .toolbar {
    gap: 4px;
    padding-bottom: 1px;
    overflow: visible;
  }

  .document-toolbar-shell:not(.template-workspace-toolbar) > .toolbar > .toolbar-group {
    display: none !important;
  }

  .document-toolbar-shell:not(.template-workspace-toolbar) > .toolbar > :is([data-toolbar-group="history"], [data-toolbar-group="document"]) {
    display: inline-flex !important;
  }

  .document-toolbar-shell > .toolbar [data-cmd="editor-fullscreen"],
  .document-toolbar-shell > .toolbar [data-cmd="undo"],
  .document-toolbar-shell > .toolbar [data-cmd="redo"] {
    display: none !important;
  }

  .document-toolbar-shell > .toolbar .responsive-review-action {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  :is(.document-toolbar-shell, .project-home-editor-area) .toolbar .tool-btn {
    flex: 0 0 auto;
    min-height: 32px;
  }

  .doc-external-toc {
    width: 100%;
    max-height: none;
  }

  .work-query-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px;
  }

  .topbar .project-title {
    max-width: 100%;
    font-size: 13px;
  }

  .topbar .project-title-icon,
  .topbar .topbar-project-edit {
    display: none;
  }
}

@media (max-width: 520px) {
  .view-tabs .tab-btn .btn-label {
    display: none;
  }

  .view-tabs .tab-btn {
    min-width: 40px;
    justify-content: center;
    padding: 8px 10px;
  }

  .project-title-row #editProjectBtn {
    display: inline-flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .workspace > .sidebar,
  .doc-sidebar,
  .document-sidebar-collapsed .doc-sidebar {
    transition: none;
  }
}

@media print {
  @page {
    size: A4 portrait;
    margin: 22mm 22mm 22mm 22mm;
  }

  body {
    background: white;
  }

  .topbar,
  .sidebar,
  .meta-sidebar,
  .toolbar,
  .document-editor-footer,
  .document-workitem-context,
  .doc-fullscreen-controls,
  .doc-external-toc,
  .panel-header,
  .panel-tabs {
    display: none !important;
  }

  .wi-review-actions {
    display: none !important;
  }

  .comment-bubble {
    display: inline-block !important;
  }

  .doc-page {
    padding: 0;
    box-shadow: none;
    background: white;
  }

  .doc-canvas {
    box-shadow: none;
    padding-top: 35mm;
    padding-bottom: 25mm;
  }

  .doc-header,
  .doc-footer {
    position: fixed;
    left: 15mm;
    right: 15mm;
    transform: none;
    width: auto;
    padding: 0;
  }

  .doc-header {
    top: 10mm;
  }

  .doc-footer {
    bottom: 10mm;
  }

  .doc-footer-page::before {
    content: counter(page);
  }

  .page-break {
    page-break-before: always;
    break-before: page;
  }

  .wi-test-table th,
  .template-table th {
    color: #000;
    border-color: #ccc;
    text-align: left;
  }

  .wi-test-rating {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: transparent;
    padding: 0;
    color: #000;
  }
}
.trace-live-filter {
  min-height: 40px;
  padding: 0 2px;
  white-space: nowrap;
}

.trace-time-filter {
  display: flex;
  align-items: end;
  gap: 12px;
  min-width: 0;
}

.trace-history-progress { display: grid; justify-items: center; gap: var(--ui-space-3); padding: var(--ui-space-5); }
.trace-history-progress-caption { display: flex; align-items: center; gap: var(--ui-space-2); }
.trace-history-progress progress { width: min(240px, 100%); height: var(--ui-space-2); }
@media (prefers-reduced-motion: reduce) {
  .trace-history-progress .hourglass-spinner { animation: none; }
}

.trace-as-of-filter {
  flex: 1 1 230px;
  min-width: 0;
}

@media (max-width: 780px) {
  .trace-time-filter {
    flex-wrap: wrap;
  }

  .trace-as-of-filter {
    min-width: 230px;
  }
}

.trace-as-of-info {
  display: none;
  margin: 2px 0 10px;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  min-height: 36px;
  box-sizing: border-box;
  padding: 7px 12px 7px 9px;
  border: 1px solid #9bb9d8;
  border-left: 4px solid #3c76a5;
  border-radius: 8px;
  color: #234f74;
  background: #edf4fb;
  font-size: 0.9rem;
  font-weight: 700;
}

.trace-as-of-info:not(:empty) {
  display: inline-flex;
}

.trace-as-of-info::before {
  content: "i";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #fff;
  background: #3c76a5;
  font-family: Georgia, serif;
  font-size: 12px;
  font-weight: 700;
}

.trace-as-of-info.has-warning {
  border-color: #d7aa61;
  border-left-color: #b87916;
  color: #8a5a00;
  background: #fff5e7;
}

.trace-as-of-info.has-warning::before {
  content: "!";
  background: #b87916;
}

.trace-last-test-run,
.doc-traceability-last-run {
}

.test-equipment-config-table input {
  min-width: 130px;
  width: 100%;
}

.test-equipment-config-table td[rowspan] {
  vertical-align: top;
}

.dut-config-list {
  display: grid;
  gap: 12px;
}

.dut-config-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border, #d7cbbd);
  border-radius: 10px;
  background: var(--surface-soft, #fffaf4);
}

.dut-config-header {
  display: grid;
  grid-template-columns: minmax(110px, 0.75fr) minmax(110px, 0.75fr) minmax(180px, 1.5fr) auto;
  gap: 10px;
  align-items: end;
}

.dut-config-header .field {
  min-width: 0;
}

.dut-config-header input,
.dut-component-table input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.dut-component-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  font-size: 0.9rem;
}

.dut-component-table th,
.dut-component-table td {
  padding: 6px;
  overflow-wrap: anywhere;
}

.dut-component-table th:last-child,
.dut-component-table td:last-child {
  width: 92px;
}

.test-equipment-config-table button.danger,
.test-equipment-config-table button.danger:hover,
.test-equipment-config-table button.danger:focus-visible,
.test-equipment-config-table button.danger:disabled {
  color: #fff;
}

.workitem-test-equipment-field select[multiple] {
  min-height: 150px;
}

.wi-test-equipment-list {
  margin: 0;
  padding-inline-start: 20px;
}

.testing-prerequisite-section {
  margin-block: 0;
  padding: 12px 0;
  border: 0;
  border-top: 1px solid var(--muted);
  border-radius: 0;
  background: transparent;
}

.testing-prerequisite-section h4 {
  margin: 0 0 8px;
}

.testing-dut-section {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(0, 2.3fr);
  gap: 8px 14px;
  align-items: start;
  margin-block: 4px;
  padding: 12px 0;
  border: 0;
  border-top: 1px solid var(--muted);
  border-radius: 0;
  background: transparent;
}

.testing-dut-heading {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.testing-dut-section h4 {
  margin: 0;
}

.testing-dut-settings-link {
  flex: 0 0 auto;
  font-weight: 700;
}

.testing-dut-empty-hint {
  margin: 0;
  color: #b22f2f;
  font-weight: 600;
}

.testing-dut-section .field,
.testing-dut-preview {
  min-width: 0;
}

.testing-dut-preview-empty {
  grid-column: 1 / -1;
  padding-top: 2px;
}

[data-testing-form="result"] > button[type="submit"] {
  margin-bottom: 16px;
}

.testing-dut-components-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  font-size: 0.82rem;
}

.testing-dut-components-table th,
.testing-dut-components-table td {
  padding: 5px 6px;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .dut-config-header,
  .testing-dut-section {
    grid-template-columns: 1fr;
  }

  .testing-dut-section h4 {
    grid-column: 1;
  }

  .testing-dut-heading {
    grid-column: 1;
  }
}

.testing-equipment-table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.testing-equipment-table td[rowspan] {
  vertical-align: top;
}

.testing-equipment-table .testing-equipment-choice {
  width: 58px;
  text-align: center;
}

.testing-equipment-table input[type="radio"] {
  width: auto;
  min-width: 0;
}

.testing-equipment-custom-row td {
  background: color-mix(in srgb, var(--surface-soft, #fffaf4) 75%, #eaf3ff);
}

.testing-equipment-custom-row strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.82rem;
}

.testing-equipment-custom-row input[type="text"] {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.document-rtf-roundtrip-modal {
  width: min(860px, calc(100vw - 40px));
  max-height: min(820px, calc(100vh - 40px));
}

.document-rtf-roundtrip-body {
  max-height: 65vh;
  overflow: auto;
}

.document-rtf-roundtrip-changes {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.document-rtf-roundtrip-change {
  padding: 10px;
  border: 1px solid var(--border, #d8d1c8);
  border-radius: 8px;
  background: var(--surface-soft, #fffaf4);
}

.document-rtf-roundtrip-change h4 {
  margin: 0 0 8px;
  font-size: 0.9rem;
}

.document-rtf-roundtrip-diff {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.document-rtf-roundtrip-before,
.document-rtf-roundtrip-after {
  min-height: 42px;
  padding: 8px;
  border-radius: 6px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.document-rtf-roundtrip-before {
  background: #fff0f0;
  text-decoration-color: #b42318;
}

.document-rtf-roundtrip-after {
  background: #edf9f0;
}

@media (max-width: 680px) {
  .document-rtf-roundtrip-diff {
    grid-template-columns: 1fr;
  }
}

/* Persistent feedback for the confirmed document save, separate from presence. */
.doc-save-status {
  font-size: 0.75rem;
  color: var(--muted, #526075);
  max-width: 22rem;
  overflow-wrap: anywhere;
}
.doc-save-status[data-status="failed"] {
  color: var(--danger, #b42318);
}

.image-upload-toast {
  top: auto;
  bottom: 24px;
  left: auto;
  right: 24px;
  transform: none;
  z-index: 10050;
  pointer-events: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  width: 420px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 18px;
  background: var(--canvas);
  color: var(--ink);
  border: 1px solid var(--muted);
  border-top: 3px solid var(--accent);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.45;
  box-shadow: 0 8px 28px var(--shadow);
}
.image-upload-toast-message {
  flex-basis: 100%;
  font-weight: 600;
}

#workItemImportModal {
  width: min(820px, calc(100vw - 32px));
}
.csv-field-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.csv-field-table th, .csv-field-table td {
  padding: 8px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--muted);
  overflow-wrap: anywhere;
}
.csv-field-table td:first-child {
  width: 28%;
  font-family: monospace;
}
.csv-import-toast {
  left: 24px;
  right: auto;
}
.csv-import-toast[data-status="failed"] {
  border-top-color: var(--danger, #b42318);
}
.csv-import-toast li {
  margin-bottom: 8px;
}
.image-upload-toast[data-status="complete"] {
  border-top-color: #1f6d3d;
}
.image-upload-toast progress {
  width: 100%;
  height: 6px;
  accent-color: var(--accent);
  border: 0;
  border-radius: 4px;
  overflow: hidden;
}
.image-upload-toast button.primary,
.image-upload-toast button.ghost {
  white-space: nowrap;
  padding: 7px 12px;
  font-size: 13px;
  border-radius: 8px;
}

.image-upload-toast details {
  flex-basis: 100%;
  overflow-wrap: anywhere;
  padding-top: 10px;
  border-top: 1px solid var(--muted);
  color: var(--ink-soft);
  font-size: 12px;
}
.image-upload-toast summary {
  cursor: pointer;
}
.image-upload-toast summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.image-upload-toast details p {
  margin: 6px 0 0;
}

/* Confidential-term editors share the same layout in settings and the AI panel. */
#aiPrivacySettings,
#docAiPrivacySettings {
  display: grid;
  gap: 10px;
  min-width: 0;
  align-content: start;
}

/* Grid gaps own the spacing; browser margins and empty rows must not add gaps. */
:is(#aiPrivacySettings, #docAiPrivacySettings) > :is(h4, p, pre, .work-toolbar) {
  margin: 0;
}

:is(#aiPrivacySettings, #docAiPrivacySettings) > .work-toolbar {
  padding: 0;
  flex-wrap: wrap;
}

:is(#aiPrivacySettings, #docAiPrivacySettings) > :is(p, pre, .ai-privacy-rules):empty {
  display: none;
}

.ai-privacy-rules,
.ai-privacy-rule {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.ai-privacy-rule {
  padding: 12px 0;
  border-bottom: 1px solid var(--muted);
}

#aiPrivacySettings label,
#docAiPrivacySettings label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ai-privacy-rule button {
  justify-self: start;
}

#aiPrivacySettings textarea,
#docAiPrivacySettings textarea {
  width: 100%;
  resize: vertical;
}

/* Pinned reviews keep their own column while the detail sidebar opens beside them. */
@media (min-width: 901px) {
  #reviewSidebarPin {
    display: inline-flex;
  }

  .workspace:not(.document-sideviews-mode) #metadataSidebar:has(#metaPanel.meta-workitem-mode) #reviewSidebarPin {
    display: none;
  }

  .workspace.reviews-pinned:not(.project-home-mode) {
    grid-template-columns: minmax(0, 1fr) minmax(var(--sidebar-min-width), var(--right-sidebar-width));
  }

  .workspace.reviews-pinned.reviews-details-open:not(.project-home-mode) {
    grid-template-columns: minmax(0, 1fr) repeat(2, minmax(var(--sidebar-min-width), var(--right-sidebar-width)));
  }

  .workspace.reviews-pinned > .pinned-review-sidebar {
    grid-column: 2;
    width: 100%;
    padding: 12px;
    border-width: 1px;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .workspace.reviews-pinned > #metadataSidebar {
    grid-column: 3;
  }

  .workspace.reviews-pinned > .review-details-empty {
    display: none;
  }

  .workspace.reviews-pinned.sidebar-right-collapsed:not(.project-home-mode) {
    grid-template-columns: minmax(0, 1fr) minmax(var(--sidebar-min-width), var(--right-sidebar-width));
  }

  .workspace.reviews-pinned.sidebar-right-collapsed > #metadataSidebar {
    display: none;
  }

  .workspace.reviews-pinned #metaBack {
    display: none;
  }
}

/* The pinned project navigation occupies an additional column on desktop. */
@media (min-width: 1201px) {
  body.projects-sidebar-pinned:not(.doc-editor-fullscreen-mode) .workspace.reviews-pinned:not(.project-home-mode),
  body.projects-sidebar-pinned:not(.doc-editor-fullscreen-mode) .workspace.reviews-pinned.sidebar-right-collapsed:not(.project-home-mode) {
    grid-template-columns:
      minmax(var(--sidebar-min-width), var(--left-sidebar-width))
      minmax(0, 1fr)
      minmax(var(--sidebar-min-width), var(--right-sidebar-width));
  }

  body.projects-sidebar-pinned:not(.doc-editor-fullscreen-mode) .workspace.reviews-pinned.reviews-details-open:not(.sidebar-right-collapsed):not(.project-home-mode) {
    grid-template-columns:
      minmax(var(--sidebar-min-width), var(--left-sidebar-width))
      minmax(0, 1fr)
      repeat(2, minmax(var(--sidebar-min-width), var(--right-sidebar-width)));
  }

  body.projects-sidebar-pinned:not(.doc-editor-fullscreen-mode) .workspace.reviews-pinned > .main {
    grid-column: 2;
  }

  body.projects-sidebar-pinned:not(.doc-editor-fullscreen-mode) .workspace.reviews-pinned > #pinnedReviewSidebar {
    grid-column: 3;
  }

  body.projects-sidebar-pinned:not(.doc-editor-fullscreen-mode) .workspace.reviews-pinned > #metadataSidebar {
    grid-column: 4;
  }
}

@media (max-width: 900px) {
  .workspace:not(.document-sideviews-mode) #reviewSidebarPin,
  body.responsive-review-open #pinnedReviewSidebar {
    display: none !important;
  }
}

/* Generated content is marked only on editor surfaces, never on printed pages. */
@media screen {
  :is(#docCanvas, #templateContent) :is(.toc, .doc-caption-list, .editor-generated-block),
  #templateContent table[data-auto-table] {
    padding: 10px;
    border: 1px dashed #b9b9b9;
    border-radius: 8px;
    background-color: #f0f0f0;
    background-image: repeating-linear-gradient(-45deg,
      rgba(0, 0, 0, 0.035) 0, rgba(0, 0, 0, 0.035) 5px,
      rgba(255, 255, 255, 0.16) 5px, rgba(255, 255, 255, 0.16) 10px);
  }
  .editor-generated-block { margin: 12px 0; }
  .editor-generated-block > table { background: white; }

}
@media print {
  .editor-generated-context-menu { display: none !important; }
  .editor-generated-block { background: none !important; border: 0 !important; padding: 0 !important; }
}

.editor-generated-context-menu {
  position: fixed;
  z-index: 10000;
  min-width: 150px;
  padding: 5px;
  border: 1px solid #d8cbbb;
  border-radius: 8px;
  background: #fffaf5;
  box-shadow: 0 8px 24px #0002;
}
.editor-generated-context-menu button {
  width: 100%;
  border: 0;
  padding: 8px 12px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.editor-generated-context-menu button:is(:hover, :focus-visible) { background: #f0eae3; }

/* Roles reuse the settings list/detail workspace and its page footer. */
.role-manager-layout {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  gap: 0;
  min-height: 0;
  overflow: hidden;
}

#rolesView { position: relative; }
.role-manager-list-panel, .role-editor { min-width: 0; min-height: 0; }
.role-manager-list-panel { display: flex; flex-direction: column; overflow: hidden; }
.role-manager-toolbar { flex: 0 0 auto; }
.role-manager-toolbar { align-items: stretch; flex-direction: column; padding: var(--ui-space-4); }
.role-manager-toolbar input, .role-search-field { width: 100%; }
.role-manager-toolbar .field { margin: 0; }

.role-scope-help {
  position: absolute;
  z-index: 120;
  top: 58px;
  right: 92px;
  display: grid;
  gap: 4px;
  width: min(540px, calc(100% - 36px));
  margin: 0;
  padding: 12px 14px;
  box-sizing: border-box;
  border: 1px solid var(--line, #d7d0c8);
  border-radius: 8px;
  background: var(--panel, #fff);
  box-shadow: 0 12px 32px rgb(36 31 27 / 18%);
  color: var(--ink, #241f1b);
}

.role-manager-list {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
  overflow: auto;
  padding: 0 var(--ui-space-2) var(--ui-space-4);
}
.role-list-item { display: grid; gap: var(--ui-space-2); width: 100%; text-align: left; white-space: normal; }

.role-scope-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

.role-scope-badge[data-scope="PROJECT"] {
  border-color: #99d1bd;
  background: #dff4eb;
  color: #185c47;
}

.role-scope-badge[data-scope="SYSTEM"] {
  border-color: #b8c5ee;
  background: #e7ecff;
  color: #354f9b;
}

.role-assignment-count {
  color: var(--ink-soft, #5f554c);
}

.role-editor { padding: var(--ui-space-5); overflow: auto; }
.role-editor-heading, .role-permission-toolbar, .role-permission-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ui-space-3);
}
.role-editor-heading { align-items: flex-start; }
.role-editor-heading h2, .role-permission-heading h3 { margin: 0; }
.role-editor-heading p { margin: var(--ui-space-2) 0 0; }
.role-editor-fields {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--ui-space-4);
  margin: var(--ui-space-5) 0;
}
.role-editor-fields .field { margin: 0; min-width: 0; }
.role-editor-fields :is(input:not([type="checkbox"]), select, textarea) { width: 100%; min-width: 0; }
.role-mfa-policy-field { display: grid; gap: var(--ui-space-1); grid-column: 1 / -1; }
.role-description-field { grid-column: 1 / -1; }
.role-permission-toolbar { margin-block: var(--ui-space-5) var(--ui-space-4); }
.role-permission-toolbar .field { flex: 1 1 220px; max-width: 440px; margin: 0; }
.role-permission-heading { margin-bottom: var(--ui-space-2); }
.permission-matrix { display: grid; min-width: 0; }
.permission-category-header { position: relative; padding: var(--ui-space-3) calc(var(--ui-space-5) * 3) var(--ui-space-3) 0; }
.permission-category-header > .meta-subtle { position: absolute; top: 50%; right: 0; margin: 0; transform: translateY(-50%); }
.permission-category-list { display: grid; padding-bottom: var(--ui-space-3); }
.permission-category-list > .inline-check { justify-self: start; margin: var(--ui-space-2) 0 var(--ui-space-3); }
.permission-option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--ui-space-3); align-items: center; padding: var(--ui-space-3) var(--ui-space-2); }
.permission-option > span { min-width: 0; overflow-wrap: anywhere; }
.permission-option-details, .permission-option-key { display: block; }
.permission-option-details { margin-top: var(--ui-space-1); }
.permission-matrix:not(.show-details) .permission-option-details { display: none; }
@media (max-width: 1000px) {
  .role-manager-layout { grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .role-manager-list { max-height: 200px; }
  .role-editor-fields { grid-template-columns: minmax(0, 1fr); }
  .role-editor-heading > .row-actions { flex-wrap: wrap; }
}

.role-editor-actions {
  position: sticky;
  bottom: 0;
  margin-top: 16px;
  padding-top: 12px;
  background: var(--panel, #fff);
}

.user-role-assignment-group {
  display: grid;
  gap: 10px;
}

.user-role-assignment-group + .user-role-assignment-group {
  border-top: 1px solid var(--line, #d7d0c8);
  margin-top: 16px;
  padding-top: 16px;
}

.role-assignment-options {
  display: grid;
  gap: 8px;
}

.role-assignment-option {
  align-items: flex-start;
  background: var(--panel, #fff);
  border: 1px solid var(--line, #d7d0c8);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 10px 12px;
}

.role-assignment-option > span {
  display: grid;
  gap: 3px;
}

.role-assignment-option:has(input:disabled) {
  cursor: default;
  opacity: 1;
  color: var(--ink-soft, #5f554c);
}

/* Project drafts stay in flow so expanded role choices cannot be clipped by the modal. */
.role-assignment-projects {
  list-style: none;
  margin: 0;
  padding: 0;
}

.role-assignment-project-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 1fr) auto;
  align-items: start;
  gap: var(--ui-space-3);
  padding-block: var(--ui-space-3);
}

.role-assignment-project-name {
  display: grid;
  gap: var(--ui-space-1);
  overflow-wrap: anywhere;
  padding-block: var(--ui-space-2);
}

.role-assignment-picker {
  min-width: 0;
}
.role-assignment-add {
  max-width: 480px;
}
@media (max-width: 640px) {
  .role-assignment-project-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .role-assignment-project-name {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .role-scope-help {
    top: 58px;
    right: 12px;
    width: calc(100% - 24px);
  }

  .role-manager-layout {
    grid-template-columns: 1fr;
  }

  .permission-matrix {
    max-height: none;
  }
}
.bulk-field-row { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; margin: 0 0 20px; }
.bulk-field-enable { margin: 4px 0 0; width: 17px; height: 17px; }
.bulk-field-content { min-width: 0; display: grid; gap: 8px; }
.bulk-field-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bulk-field-content > :is(input, select, textarea) { min-width: 0; width: 100%; }
.bulk-field-content textarea { resize: vertical; }
.bulk-field-content small:empty { display: none; }
.bulk-reviewer-list .reviewer-pick-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.bulk-reviewer-list .reviewer-pick-row small { margin-left: auto; }
.workitem-bulk-details .bulk-reviewer-list { max-height: 240px; }
.bulk-details-body { padding: 16px 4px; }
.bulk-details-body > h3 { margin: 24px 0 16px; }
.bulk-details-footer { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; position: sticky; bottom: 0; }
.bulk-details-footer > span { flex: 1; min-width: 120px; }
.bulk-result-filter { display: flex; align-items: center; gap: 16px; padding: 12px; }
@media (pointer: coarse) { .bulk-field-enable { width: 20px; height: 44px; margin-top: 0; } }
@media (max-width: 600px) { .bulk-details-footer .primary { width: 100%; } }
/* Work-Items workspace: separate from document sidebar presentation. */
.workspace:has(:is(#workItemsView, #traceabilityView).active) { grid-template-rows: minmax(0, 1fr); }
.workspace:has(:is(#workItemsView, #traceabilityView).active) > :is(.main, .sidebar, #metadataSidebar) { grid-row: 1 !important; }
.workspace:has(:is(#workItemsView, #traceabilityView).active):has(.workitem-workspace-details) {
  grid-template-columns: minmax(300px, 1fr) minmax(460px, var(--workitem-details-width, 60%)) !important;
}
.workspace:has(:is(#workItemsView, #traceabilityView).active):has(.workitem-workspace-details) > .main { grid-column: 1 !important; }
.workspace:has(:is(#workItemsView, #traceabilityView).active):has(.workitem-workspace-details) > #metadataSidebar {
  display: flex !important;
  grid-column: 2 !important;
  position: relative;
  width: 100%;
  min-width: 0;
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  background: var(--canvas);
}
.workspace:has(:is(#workItemsView, #traceabilityView).active):has(.workitem-workspace-details) > #pinnedReviewSidebar { display: none; }
.workspace:has(:is(#workItemsView, #traceabilityView).active):has(.workitem-workspace-details) #metadataSidebar > .sidebar-resize-flag:not(.workitem-workspace-resize) { display: none; }
.workspace:has(:is(#workItemsView, #traceabilityView).active):has(.workitem-workspace-details) #metadataSidebar [data-toggle="right"] { display: none; }
.workspace:has(:is(#workItemsView, #traceabilityView).active):has(.workitem-workspace-details) + .metadata-sidebar-reveal { display: none; }
.workitem-workspace-details .workitem-details-header { padding: 8px 4px 8px; }
.workitem-workspace-details .workitem-details-code { color: var(--accent-2); }
.workitem-workspace-details #metaBack { display: inline-flex !important; }
.workitem-workspace-details .workitem-details-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
}
.workitem-workspace-details .workitem-details-form > :is(h3, .workitem-workspace-title, .work-item-custom-fields, .workitem-workspace-content, .workitem-details-savebar) { grid-column: 1 / -1; }
.workitem-workspace-details .workitem-details-form > .field { margin: 0; }
.workitem-workspace-details .field { align-content: start; }
.workitem-workspace-details:not(.workitem-bulk-details) .reviewer-pick-list { max-height: 130px; overflow: auto; }
.workitem-workspace-content, .workitem-workspace-preview { min-width: 0; margin-top: 16px; }
.workitem-workspace-content > section { margin-bottom: 18px; }
.workitem-workspace-richtext { overflow-wrap: anywhere; overflow-x: auto; padding: 14px; background: #fff; border: 1px solid var(--muted); border-radius: 8px; }
.workitem-workspace-richtext img { max-width: 100%; height: auto; }
.workitem-workspace-details .wi-inline-rich-surface { min-height: 180px; }
.workitem-workspace-details .wi-inline-rich-surface .ProseMirror { min-height: 160px; }
.workitem-workspace-details .workitem-details-savebar { margin: 0; padding: 12px; background: var(--paper); }
.workitem-workspace-details #metaEditState { flex: 1; min-width: 120px; }
.workitem-workspace-details #metaSave { order: 2; }
.workitem-workspace-details #metaCancel { order: 1; }
.workitem-document-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; background: var(--paper); border: 1px solid var(--muted); border-radius: 8px 8px 0 0; }
.workitem-document-toolbar .toolbar-group { display: flex; flex-wrap: wrap; gap: 2px; min-width: 0; }
#workItemsView .work-table > tbody > tr:not(.work-item-detail, .workitem-lazy-spacer) > td { height: 47px; box-sizing: border-box; }
#workItemsView .work-table tr.active { background: var(--sidebars); box-shadow: none; }
#workItemsView .work-table tr.bulk-selected { background: color-mix(in srgb, var(--accent) 12%, var(--paper)); }
#workItemsView .work-table tr[data-work-item-id] { user-select: none; }
.workitem-table-status { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--status-color) 12%, var(--paper)); color: var(--ink); font-size: 12px; line-height: 16px; font-weight: 600; }
.workitem-table-status::before { content: ""; width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: var(--status-color); }
.workitem-table-status > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace:has(:is(#workItemsView, #traceabilityView).active):not(:has(.workitem-workspace-details)):not(:has(#commentReply)) { grid-template-columns: minmax(0, 1fr) !important; }
.workspace:has(:is(#workItemsView, #traceabilityView).active):not(:has(.workitem-workspace-details)):not(:has(#commentReply)) > .main { grid-column: 1 !important; }
.workspace:has(:is(#workItemsView, #traceabilityView).active):not(:has(.workitem-workspace-details)):not(:has(#commentReply)) > :is(#metadataSidebar, #pinnedReviewSidebar) { display: none !important; }
.workspace:has(:is(#workItemsView, #traceabilityView).active) + .metadata-sidebar-reveal { display: none; }
@media (min-width: 1101px) {
  .workspace:has(:is(#workItemsView, #traceabilityView).active):has(.workitem-workspace-details):not(:has(.workitem-workspace-expanded)) .workitem-workspace-resize { display: flex !important; }
}
.workspace:has(:is(#workItemsView, #documentsView, #traceabilityView).active):has(.workitem-workspace-expanded) { grid-template-columns: minmax(0, 1fr) !important; }
.workspace:has(:is(#workItemsView, #documentsView, #traceabilityView).active):has(.workitem-workspace-expanded) > :is(.main, .sidebar, .document-toolbar-shell) { display: none !important; }
.workspace:has(:is(#workItemsView, #documentsView, #traceabilityView).active):has(.workitem-workspace-expanded) > #metadataSidebar { grid-column: 1 !important; width: 100%; max-width: none; }
.workspace:has(.workitem-workspace-expanded) .workitem-workspace-resize { display: none !important; }
@media (min-width: 1201px) {
  body.projects-sidebar-pinned .workspace:has(:is(#workItemsView, #traceabilityView).active):not(:has(.workitem-workspace-details)):not(:has(#commentReply)) { grid-template-columns: minmax(220px, var(--left-sidebar-width)) minmax(0, 1fr) !important; }
  body.projects-sidebar-pinned .workspace:has(:is(#workItemsView, #traceabilityView).active):not(:has(.workitem-workspace-details)):not(:has(#commentReply)) > .main { grid-column: 2 !important; }
  body.projects-sidebar-pinned .workspace:has(:is(#workItemsView, #traceabilityView).active):has(.workitem-workspace-details):not(:has(.workitem-workspace-expanded)) { grid-template-columns: minmax(220px, var(--left-sidebar-width)) minmax(280px, 1fr) minmax(420px, clamp(420px, var(--workitem-details-width, 48%), calc(100% - var(--left-sidebar-width) - 300px))) !important; }
  body.projects-sidebar-pinned .workspace:has(:is(#workItemsView, #traceabilityView).active):has(.workitem-workspace-details):not(:has(.workitem-workspace-expanded)) > .main { grid-column: 2 !important; }
  body.projects-sidebar-pinned .workspace:has(:is(#workItemsView, #traceabilityView).active):has(.workitem-workspace-details):not(:has(.workitem-workspace-expanded)) > #metadataSidebar { grid-column: 3 !important; }
}
@media (max-width: 1100px) {
  .workspace:has(:is(#workItemsView, #traceabilityView).active):has(.workitem-workspace-details) { grid-template-columns: minmax(0, 1fr) !important; }
  .workspace:has(:is(#workItemsView, #traceabilityView).active):has(.workitem-workspace-details) > .main { display: none !important; }
  .workspace:has(:is(#workItemsView, #traceabilityView).active):has(.workitem-workspace-details) > #metadataSidebar { grid-column: 1 !important; inset: auto; max-width: none; height: 100%; }
  .workitem-workspace-details .workitem-details-form { grid-template-columns: 1fr; }
  .workitem-workspace-resize { display: none; }
}

.workitem-workspace-details .workitem-details-navigation { justify-content: flex-end; margin-bottom: 8px; }
.workitem-workspace-details .workitem-details-navigation #metaBack { margin-right: auto; }
.workitem-workspace-details .workitem-details-revision { margin-top: 5px; }
.workitem-workspace-details #metaCustomFieldsSection { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.workitem-workspace-details #metaCustomFieldsSection .field { margin: 0; min-width: 0; }
.workitem-workspace-details .workitem-workspace-content { margin-top: 0; }
#metaPanel.workitem-workspace-details .workitem-meta-toggle .meta-view-toggle.active { color: var(--accent-2); border-color: var(--accent); }
@media (max-width: 850px) { .workitem-workspace-details #metaCustomFieldsSection { grid-template-columns: 1fr; } }

/* Compact list navigation and a continuous two-column Work-Items workspace. */
.workitem-primary-toolbar { align-items: center; flex-wrap: wrap; }
.workitem-primary-toolbar > .work-toolbar { align-items: center; flex-wrap: wrap; padding: 0; }
#workItemsView .workitem-view-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--muted); margin: 8px 0 12px; }
#workItemsView .workitem-view-tabs button { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; color: var(--ink-soft); padding: 10px 14px; font-weight: 600; }
#workItemsView .workitem-view-tabs button[aria-selected="true"] { color: var(--accent-2); border-bottom-color: var(--accent); }
#workItemsView .workitem-view-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
:is(#workItemsView, #traceabilityView) .workitem-searchbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
:is(#workItemsView, #traceabilityView) .workitem-searchbar .work-filters { display: flex; flex: 1 1 280px; gap: 8px; margin: 0; overflow: visible; }
:is(#workItemsView, #traceabilityView) .workitem-searchbar .field { margin: 0; min-width: 0; }
:is(#workItemsView, #traceabilityView) .workitem-searchbar .field:first-child { flex: 1; position: relative; }
:is(#workItemsView, #traceabilityView) .workitem-searchbar .field:first-child::before { content: ""; position: absolute; left: 13px; top: 12px; width: 11px; height: 11px; border: 1.5px solid var(--ink-soft); border-radius: 50%; pointer-events: none; }
:is(#workItemsView, #traceabilityView) .workitem-searchbar .field:first-child::after { content: ""; position: absolute; left: 24px; top: 24px; width: 6px; border-top: 1.5px solid var(--ink-soft); transform: rotate(45deg); pointer-events: none; }
:is(#workItemsView, #traceabilityView) .workitem-searchbar .field > span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#workItemsView #workItemSearch { padding-left: 36px; height: 40px; width: 100%; }
#workItemsView #workItemTypeFilter { height: 40px; max-width: 150px; }
:is(#workItemsView, #traceabilityView) .workitem-searchbar > .work-toolbar { margin: 0; gap: 6px; }
:is(#workItemsView, #traceabilityView) .workitem-searchbar button { height: 40px; }
.workspace:has(:is(#workItemsView, #traceabilityView).active):has(.workitem-workspace-details) { column-gap: 0; }
.workspace:has(:is(#workItemsView, #traceabilityView).active):has(.workitem-workspace-details) > .main { padding-right: 18px; }
.workspace:has(:is(#workItemsView, #traceabilityView).active):has(.workitem-workspace-details) > #metadataSidebar { border-radius: 0; box-shadow: none; border: 0; border-left: 1px solid var(--muted); background: var(--paper); padding: 16px 20px; }
#metadataSidebar:has(#metaPanel.workitem-details-document) { background: #fff; }
.workitem-workspace-details .workitem-workspace-content .wi-inline-rich-surface { border: 1px solid var(--muted); border-top: 0; border-radius: 0 0 8px 8px; background: #fff; padding: 12px; }
.workitem-workspace-details .workitem-workspace-content .wi-inline-rich-surface:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent); }
.workitem-workspace-unsaved { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 12px; border: 1px solid #d5a74b; border-radius: 6px; color: #785013; background: #fff4d8; font-size: 12px; font-weight: 600; }
.workitem-workspace-unsaved[hidden] { display: none; }
.workitem-workspace-unsaved::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #b77913; }
.workitem-workspace-dirty #metaEditState { color: #946018; font-weight: 600; }

/* Advanced rules share the compact search line instead of a separate settings card. */
:is(#workItemsView, #traceabilityView, .fmea-query-workspace) .workitem-searchbar .work-filters.is-closed { display: none; }
:is(#workItemsView, #traceabilityView, .fmea-query-workspace) .workitem-searchbar .work-query-builder { flex: 1 1 360px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); padding: 0; margin: 0; max-height: none; }
:is(#workItemsView, #traceabilityView, .fmea-query-workspace) .workitem-searchbar .work-query-builder:is([hidden], .is-closed) { display: none; }
:is(#workItemsView, #traceabilityView, .fmea-query-workspace) .work-query-rows { display: flex; flex: 0 1 auto; min-width: 0; flex-wrap: wrap; gap: 6px; }
:is(#workItemsView, #traceabilityView, .fmea-query-workspace) .work-query-rows:has(> .placeholder) { display: none; }
:is(#workItemsView, #traceabilityView, .fmea-query-workspace) .work-query-row { display: flex; flex: 0 1 auto; align-items: center; gap: 0; min-width: 0; max-width: 240px; padding: 0; border: 1px solid var(--muted); border-radius: 5px; background: var(--paper); }
:is(#workItemsView, #traceabilityView, .fmea-query-workspace) .work-query-row > select { flex: 1 1 100px; width: 100px; }
:is(#workItemsView, #traceabilityView, .fmea-query-workspace) .work-query-row > :is(input, select[data-query-input="value"]) { flex: 1.2 1 110px; width: 110px; }
:is(#workItemsView, #traceabilityView, .fmea-query-workspace) .work-query-row :is(input, select) { min-width: 0; min-height: 32px; height: 32px; padding: 4px 8px; border-radius: 5px; }
:is(#workItemsView, #traceabilityView, .fmea-query-workspace) .work-query-row > button { flex-shrink: 0; }
:is(#workItemsView, #traceabilityView, .fmea-query-workspace) .work-query-row > .work-query-chip { width: auto; min-width: 0; flex: 1 1 auto; padding: 0 8px; border: 0; color: var(--ink); background: transparent; text-align: left; }
:is(#workItemsView, #traceabilityView, .fmea-query-workspace) .work-query-chip span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#workItemQueryModal { width: min(460px, calc(100vw - 32px)); }
#workItemQueryModal .modal-body { display: grid; gap: 14px; align-content: start; }
#workItemQueryModal label { display: grid; gap: 5px; min-width: 0; font-size: 12px; }
#workItemQueryModal :is(input:not([type="checkbox"], [type="radio"]), select) { width: 100%; min-height: 36px; }
#workItemQueryModal .meta-subtle { margin: 0; }
:is(#workItemsView, #traceabilityView, .fmea-query-workspace) .work-query-row.work-query-draft { border-style: dashed; border-color: #b77913; background: #fff7e6; }
#workItemQueryModal .work-query-draft-label { color: #8a5910; font-size: 12px; }
#workItemQueryModal .work-query-draft-label[hidden] { display: none; }

:is(#workItemsView, #traceabilityView, .fmea-query-workspace) .work-query-and { flex-shrink: 0; }
:is(#workItemsView, #traceabilityView, .fmea-query-workspace) .work-query-and:empty { display: none; }
:is(#workItemsView, #traceabilityView, .fmea-query-workspace) .work-query-builder > .work-toolbar { flex-shrink: 0; margin: 0; padding: 0; gap: var(--ui-space-1); }
:is(#workItemsView, #traceabilityView, .fmea-query-workspace) .work-query-icon { width: 36px; padding: 0; font-size: 20px; }
.workitem-workspace-details .workitem-details-edit-action { display: none; }

#workItemsView #workItemQueryToggleBtn.active { width: 40px; padding: 0; justify-content: center; }
#workItemsView #workItemQueryToggleBtn.active .btn-label { display: none; }

}
.workitem-config-template-toolbar {
  align-items: center;
  flex-wrap: wrap;
}

.workitem-config-template-toolbar input,
.workitem-config-template-toolbar select {
  min-width: min(280px, 100%);
  flex: 1 1 240px;
}

.workitem-global-sync-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.workitem-global-sync-panel {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border, #d7dce2);
}

.workitem-global-sync-changes {
  display: grid;
  gap: 8px;
  max-height: 340px;
  overflow: auto;
}

.workitem-global-sync-change {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  padding: 10px;
  border: 1px solid var(--border, #d7dce2);
  border-radius: 8px;
  background: var(--surface, #fff);
}

.workitem-global-sync-change.is-local {
  border-color: #d97706;
}

.workitem-global-sync-change.is-blocked {
  opacity: 0.72;
}

.workitem-global-sync-change-main {
  display: grid;
  gap: 2px;
}

.workitem-global-sync-badge {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface-muted, #eef1f4);
  font-size: 12px;
}

.workitem-global-sync-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.workitem-global-sync-badge.is-local {
  background: #fff1dc;
  color: #8a4300;
}

.workitem-global-sync-warning {
  grid-column: 2 / -1;
  color: #9a4b00;
  font-size: 12px;
}

/* Generated document function: screen-only shading, matching other protected blocks. */
#docCanvas :is(.doc-test-kind, .doc-fmea-table),
.template-preview-surface :is(.doc-test-kind, .doc-fmea-table) {
  padding: 10px;
  margin: 12px 0;
  border: 1px dashed #b9b9b9;
  border-radius: 8px;
  background-color: #f0f0f0;
  background-image: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.035) 0 5px, rgba(255, 255, 255, 0.16) 5px 10px);
}
@media print {
  #docCanvas :is(.doc-test-kind, .doc-fmea-table) { background: none; border: none; padding: 0; }
}

@layer app-layout {
  .document-editor-footer {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--ui-space-1);
    flex-shrink: 0;
    min-height: var(--ui-control-height);
    padding: 1px var(--ui-space-1);
  }
  .doc-editor:has(> .document-editor-footer) {
    padding: 0;
    gap: 0;
  }
  .document-editor-footer > .doc-fullscreen-controls {
    position: static;
    margin-left: auto;
    flex-shrink: 0;
    padding-left: var(--ui-space-1);
  }
  .document-workitem-context {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--ui-space-1);
    min-height: var(--ui-control-compact);
    padding: 0;
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
  }
  .document-workitem-context-description {
    display: flex;
    align-items: center;
    flex: 1 1 120px;
    gap: var(--ui-space-2);
    min-width: 0;
  }
  .document-workitem-context-description > .meta-subtle {
    display: none;
  }
  .document-workitem-context-focus {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .document-workitem-context-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
  }
  .document-workitem-save-actions {
    position: sticky;
    bottom: var(--ui-space-3);
    right: var(--ui-space-3);
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ui-space-2);
    width: max-content;
    max-width: calc(100% - 2 * var(--ui-space-3));
    padding: var(--ui-space-2);
    margin: 0 var(--ui-space-3) var(--ui-space-3) auto;
  }
  .document-workitem-save-actions > span {
    overflow-wrap: anywhere;
    min-width: 0;
  }
  .wi-block-pending .workitem-details-heading {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
  }
  .wi-block-pending .workitem-details-heading input {
    flex: 1 1 200px;
    min-width: 0;
  }
  .wi-block-pending .workitem-heading-title {
    flex: 1 1 220px;
    min-width: 0;
    margin: 0;
  }
  .wi-block-pending .workitem-heading-title > span {
    display: none;
  }
  .wi-block-pending .workitem-heading-title input {
    width: 100%;
  }
  .workitem-document-conflict {
    padding: var(--ui-space-3);
    margin-bottom: var(--ui-space-3);
    overflow-wrap: anywhere;
  }
  .workitem-document-conflict-values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--ui-space-3);
  }
  .workitem-document-conflict-values p {
    white-space: pre-wrap;
  }
  .workitem-document-conflict .work-toolbar {
    flex-wrap: wrap;
  }
  @media print {
    .document-workitem-save-actions, .wi-block-pending { display: none; }
  }
  .document-selection-actions [data-selection-kind="table"] {
    flex-wrap: nowrap;
  }
  .document-workitem-context [hidden] {
    display: none;
  }
  .workitem-details-document .workitem-details-header {
    padding-bottom: var(--ui-space-2);
  }
  .workitem-details-document .workitem-details-content {
    padding: var(--ui-space-3) var(--ui-space-1);
    min-width: 0;
  }
  .workitem-details-document .workitem-details-savebar {
    position: static;
  }
  .workitem-details-document :is(.workitem-meta-section, .work-item-custom-fields, .field, .workitem-icon-select, .workitem-searchable-picker) {
    min-width: 0;
  }
  .workitem-details-document .field :is(input:not([type="checkbox"]):not([type="radio"]), select:not(.workitem-searchable-picker-native), textarea, .workitem-searchable-picker-trigger) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .workitem-details-document .field > span {
    margin-bottom: var(--ui-space-1);
  }
  .workitem-details-document .workitem-document-fields-title {
    margin: var(--ui-space-4) 0 var(--ui-space-2);
  }
  .workitem-details-document .workitem-details-edit-state:empty {
    display: none;
  }
  :is(.wi-document-editing, .wi-document-prepared) .wi-document-title {
    display: block;
  }
  :is(.wi-document-editing, .wi-document-prepared) .wi-document-code {
    white-space: pre;
  }
  :is(.wi-document-editing, .wi-document-prepared) .wi-inline-title-input {
    width: auto;
    min-width: 0;
    padding: 0;
    margin: 0;
  }
  :is(.wi-document-editing, .wi-document-prepared) .wi-inline-rich-surface,
  :is(.wi-document-editing, .wi-document-prepared) .wi-inline-rich-surface .ProseMirror {
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding: 0;
  }
  :is(.wi-document-editing, .wi-document-prepared) .wi-inline-field-wrap {
    margin-block: 0;
  }
  :is(.wi-document-editing, .wi-document-prepared) .wi-inline-field-description_html {
    margin-top: 6px;
  }
  :is(.wi-document-editing, .wi-document-prepared) .wi-inline-title-input {
    min-height: 0;
    line-height: inherit;
  }
  :is(.wi-document-editing, .wi-document-prepared) .wi-inline-title-input:empty {
    display: inline-block;
    min-width: 1ch;
  }
  #docCanvas .wi-document-prepared:is(:not(.wi-document-editing), [data-document-field="title"]) :is(.pm-active-cell, .selectedCell) {
    outline: none;
    box-shadow: none;
  }
  #docCanvas .wi-document-prepared:is(:not(.wi-document-editing), [data-document-field="title"]) .selectedCell > :not(.column-resize-handle) {
    background-color: transparent;
  }
  @media (max-width: 760px) {
    .document-editor-footer {
      flex-wrap: wrap;
    }
    .document-workitem-context {
      flex-basis: 100%;
    }
    .document-editor-footer > .doc-fullscreen-controls {
      max-width: 100%;
      padding-left: 0;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .doc-zoom-control input[type="range"] {
      width: 48px;
    }
  }
}

/* Compact pixel-width control inside the shared document focus row. */
@layer app-layout {
  .document-selection-width {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-1);
    white-space: nowrap;
  }
  .document-selection-width input {
    width: 82px;
    min-width: 0;
  }
}

.testing-detail-pane { position: relative; min-height: 0; min-width: 0; border-left: 1px solid var(--muted); }
@layer app-layout {
  @media (min-width: 1101px) { .testing-detail-pane:not(:has(.workitem-workspace-expanded)) > .sidebar-resize-flag { display: flex !important; } }
}
@media (max-width: 1100px) { .testing-detail-pane { border-left: 0; } .testing-detail-pane > .sidebar-resize-flag { display: none; } }

@layer app-layout {
  .testing-detail-pane { display: flex; padding: 0; }
  .testing-item-detail { margin-left: 0; }
  .testing-item-identity { display: inline-flex; align-items: center; gap: var(--ui-space-1); }
  .testing-item-detail-body .workitem-details-savebar {
    bottom: 0;
    margin: 0;
    z-index: 4;
    gap: var(--ui-space-2);
    padding: var(--ui-space-3);
    background: var(--canvas);
  }
  .testing-step-result-readonly { margin-top: var(--ui-space-3); }
  .testing-item-detail-content .work-table-wrapper { max-height: none; overscroll-behavior: auto; }
  .testing-item-detail-content .testing-step-table-wrapper { overflow: visible; }
  .testing-rich-editor-host .wi-inline-desc-editor,
  .testing-rich-editor-host .wi-inline-rich-surface { overflow: visible; max-height: none; }
  .testing-rich-editor-host :is(.wi-inline-rich-toolbar, .workitem-document-toolbar) { position: relative; top: auto; z-index: 3; }
  .testing-step-table th { position: relative; top: auto; }
  .testing-step-table th[data-column-id],
  .testing-table th[data-column-id] { position: relative; }
  .testing-step-table .testing-step-chapter > td { vertical-align: top; }
  .testing-step-number { display: block; margin-bottom: var(--ui-space-1); }
  .testing-step-table.wi-test-step-pair-table > tbody > tr.testing-step-chapter > td.testing-step-description-cell::before { content: none; }
  /* Keep the hit area inside its header and the line on the collapsed border. */
  [data-testing-column-resize] { right: 0; }
  [data-testing-column-resize]::after { left: auto; right: -1px; }
  .testing-table-nowrap > tbody > tr > td:not(.actions-col) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .testing-table:not(.testing-table-nowrap) > tbody > tr > td,
  .testing-step-table:not(.testing-table-nowrap) > tbody > tr > td { white-space: normal; overflow-wrap: anywhere; }
  .testing-step-table, .testing-step-table .wi-inline-rich-surface { min-width: 0; }
  .testing-step-table :is(th, td)[hidden], .testing-table :is(th, td)[hidden] { display: none; }
  .testing-step-table.testing-table-nowrap > tbody > tr > td.wi-test-result { white-space: normal; overflow: visible; }
  [data-testing-item-row] { cursor: pointer; }
  [data-testing-item-row]:focus-visible,
  [data-testing-run-row]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
}

@layer app-layout {
  .testing-item-header-actions { flex-wrap: wrap; justify-content: flex-end; }
  .testing-equipment-variant-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-1); }
  .testing-equipment-variant-actions > span { min-width: 0; overflow-wrap: anywhere; }
  .testing-equipment-variant-form { min-width: 0; margin: 0; padding: var(--ui-space-2); border: 0; }
  [data-testing-additional-section], [data-testing-additional-list],
  [data-testing-additional-equipment] { display: grid; gap: var(--ui-space-3); min-width: 0; }
  [data-testing-additional-equipment] > button { justify-self: start; }
  .testing-equipment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); }
  .testing-equipment-variant-form legend { max-width: 100%; white-space: normal; }
  .testing-equipment-variant-form p { white-space: normal; margin: var(--ui-space-1) 0 var(--ui-space-2); }
  .testing-equipment-variant-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: var(--ui-space-2); }
  .testing-equipment-variant-fields .field { min-width: 0; margin: 0; }
  .testing-equipment-variant-fields .field > span { white-space: normal; overflow-wrap: anywhere; }
  .testing-equipment-variant-fields input { width: 100%; box-sizing: border-box; }
  @media (max-width: 600px) {
    .testing-equipment-variant-fields { grid-template-columns: minmax(0, 1fr); }
  }
  .testing-step-table .testing-result-control { margin-top: var(--ui-space-3); }
  .testing-result-button { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--ui-space-1); }
  .testing-detail:has(.workitem-workspace-expanded) > :not(.testing-execution-layout),
  .testing-detail:has(.workitem-workspace-expanded) .testing-list-pane,
  .testing-detail:has(.workitem-workspace-expanded) .sidebar-resize-flag { display: none; }
  .testing-detail:has(.workitem-workspace-expanded) .testing-execution-layout { grid-template-columns: minmax(0, 1fr); }
  .workspace:has(#testingView.active .workitem-workspace-expanded) { grid-template-columns: minmax(0, 1fr) !important; }
  .workspace:has(#testingView.active .workitem-workspace-expanded) > .main { grid-column: 1 / -1 !important; }
  .workspace:has(#testingView.active .workitem-workspace-expanded) > :is(.sidebar, .meta-sidebar) { display: none !important; }
}

/* Document side views reserve their own columns beside the editable document. */
.workspace.document-sideviews-mode {
  --doc-main-min-width: 0px;
  --document-panel-width: min(max(260px, var(--right-sidebar-width)), 40vw);
  position: relative;
  grid-template-columns: var(--document-project-column, ) minmax(0, 1fr) var(--document-pin-column, ) var(--document-detail-column, ) 44px;
  column-gap: 0;
}
.workspace.document-sideviews-mode > .main { grid-column: 1; min-width: 0; }
.workspace.document-sideviews-mode > .document-toolbar-shell { grid-column: 1 / -2; }
.workspace.document-sideviews-mode > #pinnedReviewSidebar { display: none; }
.document-sideview-toolbar { display: none; }
.document-sideview-toolbar > .icon-btn { width: 32px; height: 32px; padding: 5px; }
.workspace.document-sideviews-mode > .document-sideview-toolbar {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 5px;
  z-index: var(--document-toolbar-layer);
}
.document-sideview-toolbar[hidden],
.document-sideview-close { display: none; }
.workspace.document-sideviews-mode.document-sideview-open { --document-detail-column: var(--document-panel-width); }
.workspace.document-sideviews-mode.document-sideview-pinned { --document-pin-column: clamp(220px, var(--document-pinned-width, var(--document-panel-width)), 40vw); }
.workspace.document-sideviews-mode > #metadataSidebar,
.workspace.document-sideviews-mode.sidebar-right-collapsed > #metadataSidebar {
  position: relative;
  inset: auto;
  grid-column: -3 / -2;
  width: 100%;
  height: 100%;
  max-height: 100%;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  display: none;
}
.workspace.document-sideviews-mode.document-sideview-open > #metadataSidebar { display: flex; }
.workspace.document-sideviews-mode > #pinnedDocumentSidebar {
  position: relative;
  inset: auto;
  transform: none;
  opacity: 1;
  visibility: visible;
  grid-column: -3 / -2;
  display: flex;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
}
.workspace.document-sideviews-mode.document-sideview-open > #pinnedDocumentSidebar { grid-column: -4 / -3; }
.workspace.document-sideviews-mode #reviewSidebarPin { display: inline-flex; }
.workspace.document-sideviews-mode #documentReviewPanel,
.workspace.document-sideviews-mode #documentCommentDetailPanel,
.workspace.document-sideviews-mode #documentWorkItemEmpty { padding: var(--ui-space-4); }
.workspace.document-sideviews-mode > #pinnedDocumentSidebar > :is(#metaPanel, #documentReviewPanel, #documentCommentDetailPanel) {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
}
.workspace.document-sideviews-mode > #pinnedDocumentSidebar > [hidden] { display: none; }
.workspace.document-sideviews-mode + #metadataSidebarReveal,
.workspace.document-sideviews-mode > #metadataSidebar > .sidebar-collapsed-header,
.workspace.document-sideviews-mode > #metadataSidebar .responsive-review-title,
.workspace.document-sideviews-mode > #metadataSidebar > .meta-quick-review,
.workspace.document-sideviews-mode > #metadataSidebar > .responsive-review-empty,
.workspace.document-sideviews-mode > #metadataSidebar .panel-actions > :not(#documentSidebarClose, #reviewSidebarPin) {
  display: none;
}
.workspace.document-sideviews-mode > :is(#metadataSidebar, #pinnedDocumentSidebar) > .sidebar-header {
  display: flex;
  flex-shrink: 0;
  min-height: 54px;
  padding: 12px 18px;
  margin: 0;
}
.workspace.document-sideviews-mode #documentSidebarClose { display: inline-flex; }
.workspace.document-sideviews-mode > #metadataSidebar > :is(
  #metaPanel, #documentReviewPanel, #documentCommentDetailPanel
) {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
}
.workspace.document-sideviews-mode > #metadataSidebar > [hidden],
.document-properties-sidebar[hidden] { display: none; }
.workspace.document-sideviews-mode #metaPanel:not([hidden]) { display: flex; }
.workspace.document-sideviews-mode #documentCommentDetailPanel:not([hidden]) { display: flex; }
.document-comment-detail-panel > .comment-detail { flex: 1; min-width: 0; }
.document-properties-sidebar {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}
.document-properties-sidebar-body { flex: 1 1 0; min-height: 0; overflow: auto; padding: 22px; }
.document-properties-sidebar-heading { display: block; margin-bottom: 24px; }
.document-properties-sidebar-heading h3 { margin: 0 0 5px; font-size: 17px; overflow-wrap: anywhere; }
.document-properties-sidebar-heading .meta-subtle { font-size: 11px; }
.document-properties-sidebar-list { display: grid; gap: 0; margin: 0; }
.document-properties-sidebar-list > div {
  display: grid;
  grid-template-columns: minmax(0, 95px) minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  font-size: 12px;
  line-height: 1.4;
}
.document-properties-sidebar-list :is(dt, dd) { margin: 0; font-size: inherit; }
.document-properties-sidebar-list dt { overflow-wrap: anywhere; }
.document-properties-sidebar-list dd { overflow-wrap: anywhere; white-space: pre-wrap; }
#documentPropertiesSidebarContent > h3 { margin: 24px 0 10px; padding-top: 20px; font-size: 12px; }
.document-properties-history { margin-top: 24px; padding-top: 18px; }
.document-properties-history > summary { font-size: 11px; cursor: pointer; }
.document-properties-history > dl { margin-top: 12px; }
.document-properties-sidebar-actions { display: flex; flex-direction: column; gap: 9px; flex-shrink: 0; padding: 17px 22px; }
.document-properties-sidebar-actions > button { width: 100%; min-height: 36px; font-size: 12px; }
.document-properties-sidebar-actions #documentWorkflowStatus {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.document-properties-workflow { margin: 0; padding: 0; border: 0; }
.document-properties-status { width: fit-content; padding: 2px 6px; border-radius: 4px; }
@media (min-width: 1201px) {
  body.projects-sidebar-pinned:not(.doc-editor-fullscreen-mode) .workspace.document-sideviews-mode {
    --document-project-column: minmax(var(--sidebar-min-width), var(--left-sidebar-width));
  }
  body.projects-sidebar-pinned:not(.doc-editor-fullscreen-mode) .workspace.document-sideviews-mode > .main { grid-column: 2; }
  body.projects-sidebar-pinned:not(.doc-editor-fullscreen-mode) .workspace.document-sideviews-mode > .document-toolbar-shell { grid-column: 2 / -2; }
}
@media (max-width: 900px) {
  .workspace.document-sideviews-mode { grid-template-columns: minmax(0, 1fr) 44px; }
  .workspace.document-sideviews-mode > #metadataSidebar,
  .workspace.document-sideviews-mode.sidebar-right-collapsed > #metadataSidebar,
  .workspace.document-sideviews-mode > #pinnedDocumentSidebar {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 44px;
    width: min(340px, calc(100% - 44px));
    z-index: var(--document-floating-panel-layer);
  }
  .workspace.document-sideviews-mode.document-sideview-open > #pinnedDocumentSidebar { display: none; }
  .workspace.document-sideviews-mode > #pinnedDocumentSidebar > .sidebar-resize-flag { display: none; }
  .workspace.document-sideviews-mode #metaPanel:not([hidden]) { display: flex; }
}
@media (pointer: coarse) {
  .workspace.document-sideviews-mode > .document-sideview-toolbar { padding-inline: 0; }
  .document-sideview-toolbar > .icon-btn { width: 44px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .workspace.document-sideviews-mode > #metadataSidebar { transition: none; }
}

@layer app-layout {
/* Fullscreen uses the same mounted details and returns to the dock on restore. */
.workspace.document-sideviews-mode:has(#metaPanel.workitem-workspace-expanded:not([hidden])) {
  grid-template-columns: minmax(0, 1fr);
}
.workspace.document-sideviews-mode:has(#metaPanel.workitem-workspace-expanded:not([hidden])) > :not(:has(#metaPanel.workitem-workspace-expanded)) { display: none; }
.workspace.document-sideviews-mode:has(#metaPanel.workitem-workspace-expanded:not([hidden])) .sidebar-resize-flag { display: none; }
.workspace.document-sideviews-mode:has(#metaPanel.workitem-workspace-expanded:not([hidden])) > :has(#metaPanel.workitem-workspace-expanded) {
  position: relative;
  inset: auto;
  grid-column: 1 / -1;
  width: 100%;
  display: flex;
}
}