/* One continuous Pages illustration: selected references to an editable draft. */
.document-workflow { overflow: hidden; border: 1px solid #cbdccf; border-radius: 5px; background: #fff; color: #254b3c; }
.document-app-bar { display: flex; align-items: center; gap: 16px; min-height: 44px; padding: 8px 22px; background: #f8faf6; border-bottom: 1px solid #dce6dc; font-size: 14px; }
.document-app-bar img { width: 76px; height: 27px; object-fit: contain; }
.document-app-divider { width: 1px; height: 18px; background: #cbdccf; }
.document-app-location { margin-left: 2px; padding-left: 16px; border-left: 1px solid #dce6dc; color: #647c6d; font-size: 13px; }
.document-workspace { display: grid; grid-template-columns: minmax(285px, 1fr) minmax(0, 2fr); }
.document-reference-panel { padding: 20px 24px; border-right: 1px solid #dce6dc; background: #f5f8f1; }
.document-panel-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 15px; }
.document-panel-heading strong { font-weight: 550; }
.document-panel-heading svg { width: 21px; height: 21px; stroke: #47775c; stroke-width: 1.4; stroke-linejoin: round; }
.document-reference-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.document-reference-list li { display: flex; align-items: center; gap: 11px; padding: 8px 12px; background: #fff; border: 1px solid #d4e1d4; border-radius: 3px; }
.document-file-icon { display: flex; flex: none; align-items: center; }
.document-file-icon svg { width: 25px; height: 30px; stroke: #59836a; stroke-width: 1.3; stroke-linejoin: round; }
.document-reference-list strong { display: block; font-size: 15px; line-height: 1.5; font-weight: 550; }
.document-reference-list li div > span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: #718674; }
.document-source-check { width: 16px; height: 16px; flex: none; margin-left: auto; stroke: var(--green); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.document-instruction { padding: 12px 16px; margin-top: 16px; background: #e9f1e5; border: 1px solid #cbdcc7; border-radius: 3px; }
.document-instruction > span { display: block; margin-bottom: 7px; font-size: 12px; color: #617860; }
.document-instruction p { font-size: 15px; line-height: 1.85; }
.document-editor { min-width: 0; background: #fff; }
.document-editor-toolbar { display: flex; align-items: center; gap: 18px; height: 34px; padding: 0 27px; border-bottom: 1px solid #e7ece5; font-size: 13px; color: #647c6b; }
.document-toolbar-chevron { margin-left: 13px; }
.document-toolbar-divider { height: 16px; width: 1px; background: #dce5db; }
.document-toolbar-underline { text-decoration: underline; }
.document-editor-toolbar b,.document-editor-toolbar i,.document-toolbar-underline { font-family: Georgia,serif; font-size: 16px; }
.document-editor-toolbar svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.2; }
.document-editor-page { max-width: 760px; margin: 0 auto; padding: 18px 34px 16px; }
.document-title-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 16px; }
.document-draft-badge { font-size: 12px; padding: 2px 7px; background: #f2f6ed; border: 1px solid #d6e3ce; border-radius: 3px; color: #54704b; line-height: 1.6; }
.document-editor-page h4 { margin: 0; font-size: 25px; font-weight: 600; letter-spacing: -.02em; }
.document-editor-page h5 { display: flex; align-items: baseline; gap: 9px; font-size: 15px; font-weight: 600; line-height: 1.6; margin: 0 0 9px; }
.document-editor-page h5 > span { font: 12px Arial,sans-serif; color: #6b8b72; }
.document-purpose p { font-size: 14px; line-height: 1.9; color: #5b7263; }
.document-proposed-section { padding: 12px 17px; margin-top: 16px; border: 1px solid #d5e3cb; border-left: 3px solid #69a27a; border-radius: 2px; background: #f2f7ed; }
.document-proposed-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.document-proposed-heading > span { flex: none; color: #698660; font-size: 11px; }
.document-requirements { width: 100%; border-collapse: collapse; background: #fff; font-size: 13px; line-height: 1.7; }
.document-requirements th,.document-requirements td { padding: 8px 12px; text-align: left; border: 1px solid #d7e2d2; }
.document-requirements thead { background: #e8f0e2; }
.document-requirements th { font-weight: 500; }
.document-requirements tbody th { width: 31%; white-space: nowrap; }
.document-requirements td { color: #58705e; }
.document-edit-note { display: flex; align-items: center; gap: 7px; margin-top: 12px; color: #5d7e64; font-size: 12px; }
.document-edit-note svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1150px) and (min-width: 851px) {
  .document-reference-panel { padding: 20px; }
  .document-editor-page { padding-inline: 26px; }
  .document-editor-page h4 { font-size: 23px; }
  .document-requirements th,.document-requirements td { padding-inline: 9px; }
}
/* Preserve a readable fallback; detailed small-screen design follows desktop approval. */
@media (max-width: 850px) {
  .document-workspace { grid-template-columns: 1fr; }
  .document-reference-panel { border-right: 0; border-bottom: 1px solid #dce6dc; }
  .document-reference-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .document-reference-list li { padding: 10px; gap: 8px; }
  .document-source-check { display: none; }
  .document-instruction { margin-top: 16px; }
}
@media (max-width: 600px) {
  .document-app-bar { gap: 10px; padding-inline: 16px; }
  .document-app-location { padding-left: 10px; font-size: 12px; }
  .document-reference-panel { padding: 20px 16px; }
  .document-reference-list { grid-template-columns: 1fr; }
  .document-source-check { display: block; }
  .document-editor-toolbar { padding-inline: 16px; gap: 14px; }
  .document-editor-page { padding: 20px 16px; }
  .document-editor-page h4 { font-size: 21px; }
  .document-proposed-section { padding: 12px 10px; }
  .document-requirements th,.document-requirements td { padding: 8px; }
  .document-requirements tbody th { white-space: normal; }
}