:root {
  font-family: Arial, sans-serif;
  color: #111827;
  background: #f3f4f6;
  font-synthesis: none;
  --surface: #ffffff;
  --surface-2: #f9fafb;
  --line: #e5e7eb;
  --muted: #6b7280;
  --primary: #2563eb;
  --primary-soft: #dbeafe;
  --danger: #dc2626;
  --danger-soft: #fee2e2;
  --warning: #f59e0b;
  --warning-soft: #fffbeb;
  --success: #16a34a;
  --success-soft: #dcfce7;
  /* Text inks for the state colours, the chrome blue and muted text on the
     grey page: the base colours read below 4.5:1 as text there (owner's
     decision, 15.10.2026). The base colours stay for borders and markers. */
  --success-ink: #166534;
  --warning-ink: #92400e;
  --danger-ink: #b91c1c;
  --primary-ink: #1d4ed8;
  --muted-on-page: #4b5563;
  /* The border of a field, and of a subtle button on a card of «Мої форми»;
     the borders of that card's pale blue and amber buttons. */
  --control-line: #d1d5db;
  --primary-line: #93c5fd;
  --warning-line: #fcd34d;
  --shadow: 0 1px 5px rgba(0, 0, 0, .08);
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  min-width: 320px;
  background: #f3f4f6;
}

button, input, select, textarea { font: inherit; }

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[contenteditable="true"]:focus-visible,
[role="textbox"][aria-readonly="true"]:focus-visible,
a:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
}

/* Its own formatting context keeps its children's margins inside the shell.
   The login card's 12vh top margin left it, so every engine scrolled the
   login page by 12vh; WebKit (Safari) also let out the last section's
   bottom margin, so a short page scrolled 64 px into empty space. */
.app-shell { min-height: 100vh; display: flow-root; }

.boot-card,
.login-card {
  width: min(360px, calc(100vw - 32px));
  margin: 12vh auto 0;
  background: var(--surface);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  padding: 24px;
}

.login-card {
  display: grid;
  gap: 18px;
}

.login-card > .brand-mark {
  display: none;
}

/* The Google sign-in button («Продовжити з Google») under the password form; Google draws the button. */
.google-sign-in {
  display: grid;
  gap: 12px;
  justify-items: center;
}

.google-sign-in-divider {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.google-sign-in-button {
  width: 100%;
  display: flex;
  justify-content: center;
  min-height: 44px;
}

.brand-mark {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #172033;
  color: white;
  font-weight: 800;
  letter-spacing: .08em;
}

.brand-mark.small {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  font-size: 13px;
}

h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 26px; margin-bottom: 8px; }
h2 { font-size: 22px; }
h3 { font-size: 17px; }

.muted { color: var(--muted); }
.stack { display: grid; gap: 16px; }

label {
  display: grid;
  gap: 7px;
  font-weight: 600;
}

label > span { font-size: 13px; color: #36445a; }

input, select, textarea {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 10px;
  background: white;
  color: #111827;
}

.procurement-card input,
.procurement-card select,
.procurement-card textarea {
  border-color: #ccc;
  border-radius: 6px;
  padding: 9px 10px;
}

textarea {
  min-height: 96px;
  resize: vertical;
}

input[readonly], textarea[readonly], select:disabled {
  background: #f2f4f7;
  color: #667085;
}

.button {
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 700;
  background: #e5e7eb;
  color: #111827;
}

.button:hover:not(:disabled) { filter: brightness(.98); }
.button:disabled { opacity: .55; cursor: not-allowed; }
.button.primary { background: var(--primary); color: white; }
.button.subtle { background: white; border-color: var(--line); }
.button.danger { background: var(--danger); color: white; }
.button.warning { background: #f4aa2a; color: #402800; }
.button.small { padding: 6px 9px; font-size: 13px; }
.form-card-actions a.button,
.notification-actions a.button { display: inline-flex; align-items: center; text-decoration: none; }

.field-error { color: var(--danger); font-size: 13px; }

/* The status row at the top of the page column (owner, 22.10.2026), as in
   the reviewer cabinet: the save state on the left, messages on the right.
   The row keeps its height, so a message neither moves the page nor covers
   a button; uo.js keeps --uo-status-height at its height. */
.status-bar {
  position: sticky;
  top: 0;
  z-index: 19;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 4px 24px;
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
}

.save-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  min-width: 0;
  font-size: 12px;
  color: var(--muted);
}

.status-bar .toast-region {
  position: static;
  z-index: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: none;
  width: min(360px, 48vw);
  height: 48px;
  margin-left: auto;
  overflow-y: auto;
}

/* Auto margins centre a short message and start a long one at its first
   line: the row scrolls down to the rest, never up. */
.status-bar .toast {
  width: fit-content;
  max-width: 100%;
  margin-block: auto;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.35;
  box-shadow: none;
}

.save-bar.saving { color: var(--warning-ink); }
.save-bar.saved { color: var(--success-ink); }
.save-bar.error { color: var(--danger); }

.content {
  width: min(1180px, calc(100% - 32px));
  margin: 22px auto 64px;
}

.content.content-form {
  width: auto;
  margin: 0 0 64px;
}

.page-heading {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.page-heading p { margin-bottom: 0; }
.page-heading .muted { color: var(--muted-on-page); }

.panel,
.form-card,
.preview-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 5px rgba(0,0,0,.08);
}

.procurement-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: none;
}

.panel { padding: 18px; }

.form-toolbar {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.filter-pill {
  border: 1px solid var(--line);
  background: white;
  border-radius: 999px;
  padding: 7px 11px;
  cursor: pointer;
  font-size: 13px;
}

.filter-pill.active {
  color: var(--primary-ink);
  border-color: #9eb9e5;
  background: var(--primary-soft);
  font-weight: 700;
}

.form-grid {
  display: grid;
  gap: 12px;
}

.form-card {
  padding: 16px;
}

.form-card-head,
.procurement-head,
.initiator-head,
.preview-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: var(--muted);
  font-size: 13px;
}

.status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 750;
  background: #edf1f7;
}

.status.draft { background: #eef1f5; color: #485568; }
.status.new { background: #edf5ff; color: #265d9b; }
.status.in_review { background: #fff7e5; color: #805600; }
.status.rework { background: #fff0e8; color: #9b4b16; }
.status.approved { background: var(--success-soft); color: var(--success-ink); }
.status.cancelled_by_uo { background: var(--danger-soft); color: #8a3939; }

.form-card-actions,
.page-actions,
.procurement-actions,
.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.form-card-actions.stacked {
  flex-direction: column;
  align-items: stretch;
}

.form-card-actions .button.danger {
  background: var(--danger-soft);
  color: #b91c1c;
}

/* «Мої форми» (owner, 24.10.2026, variant Б after a look at staging): the
   actions of a card read as buttons, in two groups. «Переглянути» has the
   field border and «Відкрити DOCX №N» is pale blue; after a line,
   «Подати виправлену» and «Подати повторну» are amber, the tone of
   «Доопрацювати», because they create a new version. «Скасувати» of a form
   in «Нова» is red like «Видалити». A filled button has a transparent border,
   so every button of a card has the same height. */
/* A label stays on one line, so a long title beside it wraps instead. */
.form-card .form-card-actions .button { border: 1px solid transparent; white-space: nowrap; }
.form-card .form-card-actions .button.subtle { border-color: var(--control-line); }
.form-card .form-card-actions .button.subtle:hover:not(:disabled) { background: var(--surface-2); filter: none; }
.form-card .form-card-actions .button.form-action-open {
  background: var(--primary-soft);
  border-color: var(--primary-line);
  color: var(--primary-ink);
}
.form-card .form-card-actions .button.form-action-revision {
  background: var(--warning-soft);
  border-color: var(--warning-line);
  color: var(--warning-ink);
}
/* The line between the groups shows only on a card wide enough for the
   actions in one row (950 px: 1280 px screens and wider), where they do not
   wrap and the title wraps instead. On a narrower card the amber pair goes
   to the next row and the colour marks the groups, so no line ends a row by
   itself. */
.form-card { container: form-card / inline-size; }
/* The amber pair wraps to the next row as one; it splits only on a card
   too narrow for both beside a title (under 600 px, a phone). */
.form-card-action-group { display: flex; flex-wrap: wrap; gap: 8px; }
@container form-card (min-width: 600px) {
  .form-card-action-group { flex-wrap: nowrap; }
}
.form-card-divider { display: none; align-self: stretch; width: 1px; margin: 4px 2px; background: var(--line); }
@container form-card (min-width: 950px) {
  .form-card-actions { flex-wrap: nowrap; }
  .form-card-divider { display: block; }
}

/* The form and its review step (redesign «Г», owner, 23.10.2026): a white
   header across the page column, then the cards of the form on the grey
   page, with «Готовність до подання» beside them on a wide screen. Each
   column is one that a wide pasted table cannot widen: the table scrolls in
   its editor instead (DESIGN.md Layout, no sideways scroll at 390 px). */
.editor-shell,
.preview-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.editor-header {
  display: grid;
  gap: 14px;
  padding: 16px 28px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.editor-header .page-heading {
  align-items: center;
  margin-bottom: 0;
}

.editor-header h1 {
  margin: 0 0 6px;
  color: #1d4ed8;
  font-size: 24px;
}

.meta-line .meta-pill {
  border-radius: 999px;
  padding: 4px 9px;
  background: #eef1f5;
  color: #485568;
  font-size: 12px;
  font-weight: 700;
}

.submit-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.submit-step {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted-on-page);
  font-size: 14px;
}

.submit-step + .submit-step::before {
  content: '';
  width: 48px;
  height: 2px;
  margin-right: 4px;
  background: #d1d5db;
}

.submit-step-number {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid #d1d5db;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.submit-step.current { color: #1d4ed8; font-weight: 700; }
.submit-step.current .submit-step-number { border-color: #2563eb; background: #2563eb; color: #fff; }
.submit-step.done { color: var(--success-ink); }
.submit-step.done .submit-step-number { border-color: var(--success); background: var(--success-soft); }

.editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 980px);
  gap: 16px 24px;
  align-items: start;
  padding: 24px 28px 0;
}

.editor-main,
.editor-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
}

.preview-shell > :not(.editor-header) {
  width: min(980px, calc(100% - 56px));
  margin-left: 28px;
}

.preview-shell > .editor-header { margin-bottom: 24px; }
.preview-shell > .issue-list,
.preview-shell > .panel { margin-bottom: 16px; }

.editor-shell .panel,
.editor-shell .procurement-card {
  border: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow);
}

.editor-shell .panel h2 {
  margin: 0 0 14px;
  color: #1d4ed8;
  font-size: 18px;
}

.editor-general { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.editor-shell .editor-general h2 { margin-bottom: 0; }
/* The comment field keeps its col-12 class from labeledField; here it is
   the one column. */
.editor-general > label { grid-column: 1 / -1; }

.editor-shell label > span {
  color: #333;
  font-size: 14px;
}

.editor-shell .button.primary {
  background: var(--primary);
  border-radius: 6px;
}

.editor-shell .button.primary:hover:not(:disabled) { background: #1d4ed8; filter: none; }

/* A secondary action in the form, as «+ Додати закупівлю». */
.editor-shell .button.soft {
  background: #e8f0fe;
  color: #174ea6;
  border-radius: 6px;
}

.editor-shell .button.soft:hover:not(:disabled) { background: #d8e7fd; filter: none; }

.procurement-list-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.procurement-list-head h2,
.preview-list-title {
  margin: 0;
  color: #111827;
  font-size: 20px;
}

.preview-shell > .preview-list-title { margin-bottom: 14px; }
.procurement-count { color: var(--muted-on-page); font-weight: 400; }

/* «Готовність до подання» */
.readiness-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow);
}

.readiness-card h2 { margin: 0; color: #111827; font-size: 16px; }

.readiness-count {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  font-size: 13px;
}

.readiness-bar {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: #e5e7eb;
  color: #2563eb;
  overflow: hidden;
}

.readiness-bar::-webkit-progress-bar { background: #e5e7eb; border-radius: 999px; }
.readiness-bar::-webkit-progress-value { background: #2563eb; border-radius: 999px; }
.readiness-bar::-moz-progress-bar { background: #2563eb; border-radius: 999px; }

.readiness-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.readiness-list li { display: flex; align-items: flex-start; gap: 8px; }
.readiness-list svg { flex: none; margin-top: 1px; }
.readiness-list .ready { color: var(--success-ink); }
.readiness-list .missing { color: var(--warning-ink); }

.readiness-link {
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

/* The rail beside the form at every desktop width, from 1280 px:
   «Готовність до подання» and the actions stay in view under the status
   row. Narrower, the rail lies after the form and the actions are pinned to
   the bottom of the window. */
@media (min-width: 1280px) {
  .editor-layout.has-rail { grid-template-columns: minmax(0, 980px) minmax(260px, 300px); }

  .editor-rail {
    position: sticky;
    top: calc(var(--uo-status-height, 57px) + 16px);
    max-height: calc(100vh - var(--uo-status-height, 57px) - 32px);
    overflow-y: auto;
  }

  .editor-rail .form-bottom { flex-direction: column; align-items: stretch; }
  .editor-rail .form-bottom .page-actions { flex-direction: column; }
  .editor-rail .form-bottom .button { width: 100%; }
  /* The end-of-form anchor before the bar takes no row, and so no second
     gap, in the rail; the bar is not pinned here, so its place is moot. */
  .editor-rail .form-bottom-anchor { position: absolute; }
}

.editor-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.procurement-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.procurement-card {
  padding: 18px;
}

.procurement-card.readonly { background: #fbfcfd; }

.procurement-number {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #172033;
  color: white;
  font-weight: 750;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.col-12 { grid-column: span 12; }
.col-8 { grid-column: span 8; }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }

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

.section-box > h4 {
  margin: 0 0 10px;
  font-size: 14px;
}

.rich-wrap {
  border: 1px solid #cbd4df;
  border-radius: 10px;
  overflow: hidden;
  background: white;
}

.rich-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

/* Groups of the toolbar (Шрифт, Списки, Вирівнювання, Таблиця) wrap as a
   whole on a narrow screen; a line separates them on a wide one. */
.rich-tool-group {
  display: flex;
  flex-wrap: wrap;
  gap: inherit;
}

@media (min-width: 700px) {
  .rich-tool-group + .rich-tool-group {
    border-left: 1px solid var(--line);
    padding-left: 6px;
  }
}

/* On a phone the groups wrap onto their own lines, which separate them. */
@media (max-width: 699px) {
  .rich-tool-group:not(:last-child) { margin-right: 8px; }
  /* The eight table buttons fit one line of a 390 px phone. */
  .rich-toolbar .rich-tool-group { gap: 4px; }
  .rich-toolbar .rich-tool { min-width: 30px; padding-inline: 5px; }
}

.rich-tool {
  min-width: 32px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  color: #333;
  padding: 5px 7px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.rich-tool:hover:not([aria-disabled="true"]) {
  background: #eef1f5;
}

/* The table buttons outside a table cell (rich-table.js refreshButtons). */
.rich-tool[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
}

.rich-tool-bold { font-weight: 700; }
.rich-tool-italic { font-style: italic; }
.rich-tool-underline { text-decoration: underline; }

/* Toolbar icons (rich-editor.js TOOL_ICONS). */
.rich-icon { display: block; }
.rich-icon-ink { fill: currentColor; }
.rich-icon-cell { fill: var(--muted); }
.rich-icon-add { fill: #2563eb; }
.rich-icon-remove { fill: var(--danger); }
.rich-icon-digit {
  font-size: 6.5px;
  font-weight: 700;
  text-anchor: middle;
}

.rich-editor-surface {
  min-height: 150px;
  padding: 10px;
  outline: none;
  overflow: auto;
}

.rich-editor-surface table,
.rich-preview table {
  border-collapse: collapse;
  margin-block: 8px;
}

/* A table narrowed by dragging its edge has a width attribute instead. */
.rich-editor-surface table:not([width]),
.rich-preview table:not([width]) {
  width: 100%;
}

/* Word's cell margins: none above or below the text, 0.19 cm at the sides,
   as the DOCX has (owner, 19.10.2026: no gaps in the rows). */
.rich-editor-surface td,
.rich-editor-surface th,
.rich-preview td,
.rich-preview th {
  border: 1px solid #aab4c2;
  padding: 0 7px;
  vertical-align: top;
}

/* The paragraphs and lists of a cell follow each other with no gap, as in
   the DOCX (paragraph spacing 0): the page gives every paragraph a bottom
   margin (owner, 19.10.2026). */
.rich-editor-surface :is(td, th) > :is(p, ul, ol),
.rich-preview :is(td, th) > :is(p, ul, ol) {
  margin-block: 0;
}

/* The top row of a table is centred across and down its cells, in the DOCX
   too (owner, 19.10.2026); a cell or paragraph aligned otherwise keeps its
   alignment. The first row sits in the table itself, in its thead or, with
   no thead, in its first tbody; that last selector stands alone, so that a
   browser without :has() still reads the others. */
:is(.rich-editor-surface, .rich-preview) table > tr:first-of-type > :is(td, th),
:is(.rich-editor-surface, .rich-preview) table > thead:first-of-type > tr:first-child > :is(td, th) {
  vertical-align: middle;
}

:is(.rich-editor-surface, .rich-preview) table:not(:has(> thead, > tr)) > tbody:first-of-type > tr:first-child > :is(td, th) {
  vertical-align: middle;
}

:is(.rich-editor-surface, .rich-preview) table > tr:first-of-type > :is(td, th):not(.align-left, .align-right, .align-justify),
:is(.rich-editor-surface, .rich-preview) table > thead:first-of-type > tr:first-child > :is(td, th):not(.align-left, .align-right, .align-justify) {
  text-align: center;
}

:is(.rich-editor-surface, .rich-preview) table:not(:has(> thead, > tr)) > tbody:first-of-type > tr:first-child > :is(td, th):not(.align-left, .align-right, .align-justify) {
  text-align: center;
}

.rich-editor-surface ul,
.rich-editor-surface ol,
.rich-preview ul,
.rich-preview ol {
  padding-left: 24px;
}

/* After an HTML paste, as Word offers: how the pasted content is formatted. */
.rich-paste-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-top: 1px solid var(--line);
  background: #f8fafc;
  font-size: 13px;
}

.rich-paste-label {
  color: var(--muted-on-page);
}

/* Its own text colour, as .rich-tool has: a browser in a dark scheme gives
   buttons light text, which a white button would hide. */
.rich-paste-mode {
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
  color: #333;
  padding: 5px 9px;
  cursor: pointer;
}

.rich-paste-mode[aria-pressed="true"] {
  border-color: #2563eb;
  background: #e8f0fe;
  color: #174ea6;
  font-weight: 600;
}

/* A table with its own column widths keeps them, as the DOCX does, and its
   text wraps inside them (rich-table.js). On a phone the widths only guide
   the layout, so a narrow column does not break its words into letters.
   A saved table is drawn with its rows straight under <table>, and only an
   editable field breaks long words by itself, so without the first selector
   a word longer than its column ran into the next one in a read-only form
   and in the review step (owner's table №653, 20.10.2026). */
@media (min-width: 700px) {
  .rich-editor-surface table:has(> colgroup),
  .rich-preview table:has(> colgroup) {
    table-layout: fixed;
  }

  :is(.rich-editor-surface, .rich-preview) table:has(> colgroup) > tr > :is(td, th),
  :is(.rich-editor-surface, .rich-preview) table:has(> colgroup) > :is(thead, tbody, tfoot) > tr > :is(td, th) {
    overflow-wrap: anywhere;
  }
}

/* Borders between columns, the table's edges and the bottom of a row are
   dragged with the mouse. */
.rich-editor-surface.rich-column-resize,
.rich-editor-surface.rich-column-resize td,
.rich-editor-surface.rich-column-resize th {
  cursor: col-resize;
}

.rich-editor-surface.rich-row-resize,
.rich-editor-surface.rich-row-resize td,
.rich-editor-surface.rich-row-resize th {
  cursor: row-resize;
}

.rich-editor-surface.rich-resizing {
  user-select: none;
}

/* The start of a table whose left edge was dragged (rich-table.js
   writeTableBox), in whole percents of the editor or cell. */
table[data-indent="1"] { margin-left: 1%; }
table[data-indent="2"] { margin-left: 2%; }
table[data-indent="3"] { margin-left: 3%; }
table[data-indent="4"] { margin-left: 4%; }
table[data-indent="5"] { margin-left: 5%; }
table[data-indent="6"] { margin-left: 6%; }
table[data-indent="7"] { margin-left: 7%; }
table[data-indent="8"] { margin-left: 8%; }
table[data-indent="9"] { margin-left: 9%; }
table[data-indent="10"] { margin-left: 10%; }
table[data-indent="11"] { margin-left: 11%; }
table[data-indent="12"] { margin-left: 12%; }
table[data-indent="13"] { margin-left: 13%; }
table[data-indent="14"] { margin-left: 14%; }
table[data-indent="15"] { margin-left: 15%; }
table[data-indent="16"] { margin-left: 16%; }
table[data-indent="17"] { margin-left: 17%; }
table[data-indent="18"] { margin-left: 18%; }
table[data-indent="19"] { margin-left: 19%; }
table[data-indent="20"] { margin-left: 20%; }
table[data-indent="21"] { margin-left: 21%; }
table[data-indent="22"] { margin-left: 22%; }
table[data-indent="23"] { margin-left: 23%; }
table[data-indent="24"] { margin-left: 24%; }
table[data-indent="25"] { margin-left: 25%; }
table[data-indent="26"] { margin-left: 26%; }
table[data-indent="27"] { margin-left: 27%; }
table[data-indent="28"] { margin-left: 28%; }
table[data-indent="29"] { margin-left: 29%; }
table[data-indent="30"] { margin-left: 30%; }
table[data-indent="31"] { margin-left: 31%; }
table[data-indent="32"] { margin-left: 32%; }
table[data-indent="33"] { margin-left: 33%; }
table[data-indent="34"] { margin-left: 34%; }
table[data-indent="35"] { margin-left: 35%; }
table[data-indent="36"] { margin-left: 36%; }
table[data-indent="37"] { margin-left: 37%; }
table[data-indent="38"] { margin-left: 38%; }
table[data-indent="39"] { margin-left: 39%; }
table[data-indent="40"] { margin-left: 40%; }
table[data-indent="41"] { margin-left: 41%; }
table[data-indent="42"] { margin-left: 42%; }
table[data-indent="43"] { margin-left: 43%; }
table[data-indent="44"] { margin-left: 44%; }
table[data-indent="45"] { margin-left: 45%; }
table[data-indent="46"] { margin-left: 46%; }
table[data-indent="47"] { margin-left: 47%; }
table[data-indent="48"] { margin-left: 48%; }
table[data-indent="49"] { margin-left: 49%; }
table[data-indent="50"] { margin-left: 50%; }
table[data-indent="51"] { margin-left: 51%; }
table[data-indent="52"] { margin-left: 52%; }
table[data-indent="53"] { margin-left: 53%; }
table[data-indent="54"] { margin-left: 54%; }
table[data-indent="55"] { margin-left: 55%; }
table[data-indent="56"] { margin-left: 56%; }
table[data-indent="57"] { margin-left: 57%; }
table[data-indent="58"] { margin-left: 58%; }
table[data-indent="59"] { margin-left: 59%; }
table[data-indent="60"] { margin-left: 60%; }
table[data-indent="61"] { margin-left: 61%; }
table[data-indent="62"] { margin-left: 62%; }
table[data-indent="63"] { margin-left: 63%; }
table[data-indent="64"] { margin-left: 64%; }
table[data-indent="65"] { margin-left: 65%; }
table[data-indent="66"] { margin-left: 66%; }
table[data-indent="67"] { margin-left: 67%; }
table[data-indent="68"] { margin-left: 68%; }
table[data-indent="69"] { margin-left: 69%; }
table[data-indent="70"] { margin-left: 70%; }
table[data-indent="71"] { margin-left: 71%; }
table[data-indent="72"] { margin-left: 72%; }
table[data-indent="73"] { margin-left: 73%; }
table[data-indent="74"] { margin-left: 74%; }
table[data-indent="75"] { margin-left: 75%; }
table[data-indent="76"] { margin-left: 76%; }
table[data-indent="77"] { margin-left: 77%; }
table[data-indent="78"] { margin-left: 78%; }
table[data-indent="79"] { margin-left: 79%; }
table[data-indent="80"] { margin-left: 80%; }
table[data-indent="81"] { margin-left: 81%; }
table[data-indent="82"] { margin-left: 82%; }
table[data-indent="83"] { margin-left: 83%; }
table[data-indent="84"] { margin-left: 84%; }
table[data-indent="85"] { margin-left: 85%; }
table[data-indent="86"] { margin-left: 86%; }
table[data-indent="87"] { margin-left: 87%; }
table[data-indent="88"] { margin-left: 88%; }
table[data-indent="89"] { margin-left: 89%; }
table[data-indent="90"] { margin-left: 90%; }

/* Source fonts of a paste («Форматування джерела», rich-editor.js applyFont).
   Only these families are kept, so the field and the DOCX look the same. */
[data-font-family="Times New Roman"] { font-family: "Times New Roman", "Liberation Serif", serif; }
[data-font-family="Arial"] { font-family: Arial, "Liberation Sans", sans-serif; }
[data-font-family="Calibri"] { font-family: Calibri, Carlito, sans-serif; }
[data-font-family="Cambria"] { font-family: Cambria, Caladea, serif; }
[data-font-family="Aptos"] { font-family: Aptos, Calibri, Carlito, sans-serif; }
[data-font-family="Courier New"] { font-family: "Courier New", "Liberation Mono", monospace; }
[data-font-family="Georgia"] { font-family: Georgia, serif; }
[data-font-family="Tahoma"] { font-family: Tahoma, sans-serif; }
[data-font-family="Verdana"] { font-family: Verdana, sans-serif; }
[data-font-family="Roboto"] { font-family: Roboto, Arial, sans-serif; }
[data-font-family="Segoe UI"] { font-family: "Segoe UI", Arial, sans-serif; }
/* The document font, for a family or size the field cannot show inside text
   with a source font (rich-editor.js): the editor's own Arial and size. */
[data-font-family=""] { font-family: Arial, sans-serif; }
@property --rich-editor-size { syntax: "<length>"; inherits: true; initial-value: 16px; }
.rich-editor-surface { --rich-editor-size: 1em; }
[data-font-size=""] { font-size: var(--rich-editor-size); }
[data-font-size="6"] { font-size: 6pt; }
[data-font-size="6.5"] { font-size: 6.5pt; }
[data-font-size="7"] { font-size: 7pt; }
[data-font-size="7.5"] { font-size: 7.5pt; }
[data-font-size="8"] { font-size: 8pt; }
[data-font-size="8.5"] { font-size: 8.5pt; }
[data-font-size="9"] { font-size: 9pt; }
[data-font-size="9.5"] { font-size: 9.5pt; }
[data-font-size="10"] { font-size: 10pt; }
[data-font-size="10.5"] { font-size: 10.5pt; }
[data-font-size="11"] { font-size: 11pt; }
[data-font-size="11.5"] { font-size: 11.5pt; }
[data-font-size="12"] { font-size: 12pt; }
[data-font-size="12.5"] { font-size: 12.5pt; }
[data-font-size="13"] { font-size: 13pt; }
[data-font-size="13.5"] { font-size: 13.5pt; }
[data-font-size="14"] { font-size: 14pt; }
[data-font-size="14.5"] { font-size: 14.5pt; }
[data-font-size="15"] { font-size: 15pt; }
[data-font-size="15.5"] { font-size: 15.5pt; }
[data-font-size="16"] { font-size: 16pt; }
[data-font-size="16.5"] { font-size: 16.5pt; }
[data-font-size="17"] { font-size: 17pt; }
[data-font-size="17.5"] { font-size: 17.5pt; }
[data-font-size="18"] { font-size: 18pt; }
[data-font-size="18.5"] { font-size: 18.5pt; }
[data-font-size="19"] { font-size: 19pt; }
[data-font-size="19.5"] { font-size: 19.5pt; }
[data-font-size="20"] { font-size: 20pt; }
[data-font-size="21"] { font-size: 21pt; }
[data-font-size="22"] { font-size: 22pt; }
[data-font-size="23"] { font-size: 23pt; }
[data-font-size="24"] { font-size: 24pt; }
[data-font-size="25"] { font-size: 25pt; }
[data-font-size="26"] { font-size: 26pt; }
[data-font-size="27"] { font-size: 27pt; }
[data-font-size="28"] { font-size: 28pt; }
[data-font-size="29"] { font-size: 29pt; }
[data-font-size="30"] { font-size: 30pt; }
[data-font-size="31"] { font-size: 31pt; }
[data-font-size="32"] { font-size: 32pt; }
[data-font-size="33"] { font-size: 33pt; }
[data-font-size="34"] { font-size: 34pt; }
[data-font-size="35"] { font-size: 35pt; }
[data-font-size="36"] { font-size: 36pt; }
[data-font-size="40"] { font-size: 40pt; }
[data-font-size="44"] { font-size: 44pt; }
[data-font-size="48"] { font-size: 48pt; }
[data-font-size="54"] { font-size: 54pt; }
[data-font-size="60"] { font-size: 60pt; }
[data-font-size="66"] { font-size: 66pt; }
[data-font-size="72"] { font-size: 72pt; }

.initiator-list {
  display: grid;
  gap: 8px;
}

.initiator-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.file-placeholder {
  border: 1px dashed #b9c3d1;
  border-radius: 10px;
  padding: 12px;
  background: #fafbfc;
  color: var(--muted);
  font-size: 13px;
}

.form-bottom {
  position: static;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  background: rgba(255, 255, 255, .97);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 12px 14px;
}

.form-bottom-anchor {
  height: 1px;
  pointer-events: none;
}

/* Below the rail width the bar is pinned to the bottom of the viewport and
   settles after the form at the end (approved 2026-10-14). uo.js sizes
   --uo-form-bottom-space to the bar so focused fields scroll clear of it. */
@media (max-width: 1279.98px) {
  .editor-rail { display: contents; }

  html { scroll-padding-bottom: var(--uo-form-bottom-space, 0px); }

  .editor-shell .form-bottom {
    position: sticky;
    bottom: 0;
    z-index: 15;
    background: #fff;
  }
}

.issue-list {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.issue {
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 13px;
}

.issue.error { background: var(--danger-soft); color: #7d2525; }
.issue.warning { background: var(--warning-soft); color: #775000; }

/* An error of «Перевірка перед поданням» links to the field it names; the
   field shows the same message until it changes. */
.issue-link {
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

.field-issue-message,
.editor-shell label > span.field-issue-message {
  display: block;
  color: var(--danger-ink);
  font-size: 13px;
  font-weight: 600;
}

.editor-shell [aria-invalid="true"],
.editor-shell .field-issue .rich-wrap,
.editor-shell .field-issue .file-drop-zone {
  border-color: var(--danger);
}

/* The review step: the form's primary blue for «Подати перевіряючому», the
   v119 soft blue for «Назад до редагування». */
.preview-shell .preview-actions .button { border-radius: 6px; }
.preview-shell .preview-actions-bottom { justify-content: flex-end; margin-top: 16px; }
.preview-shell .button.primary { background: var(--primary); color: #fff; }
.preview-shell .button.primary:hover:not(:disabled) { background: #1d4ed8; filter: none; }
.preview-shell .button.subtle {
  border: 1px solid #1a73e8;
  background: #e8f0fe;
  color: #174ea6;
  border-radius: 6px;
}
.preview-shell .button.subtle:hover:not(:disabled) { background: #d8e7fd; }

.preview-list {
  display: grid;
  gap: 14px;
}

.preview-card { padding: 17px; }

.preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.preview-value {
  border-radius: 8px;
  background: var(--surface-2);
  padding: 9px;
}

.preview-value strong {
  display: block;
  color: #526074;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 4px;
}

/* ТЗ §3 «Профіль»: the account data use the preview cards, and each <dt>
   reads like a .preview-value label. */
.profile-data {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 12px 0;
}

.profile-data dt {
  color: #526074;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 4px;
}

.profile-data dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.profile-password { margin-top: 4px; align-items: start; }
.profile-password-field { display: grid; gap: 6px; align-content: start; }
.profile-password-status { margin: 0; }
.profile-password-status.field-error { color: var(--danger-ink); }
.profile-password-done { color: var(--success-ink); }

/* «Листи на пошту» (owner, 24.10.2026): one checkbox per email type, the
   whole row is the click target. */
.profile-email-options { display: grid; gap: 2px; margin: 4px 0 8px; }
.profile-email-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}
.profile-email-option > span { font-size: 14px; color: inherit; }
.profile-email-option input {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.profile-email-status { margin: 0; }
.profile-email-status.field-error { color: var(--danger-ink); }
.profile-email-done { color: var(--success-ink); }

.empty-state {
  text-align: center;
  padding: 44px 20px;
  border: 1px dashed #bdc7d3;
  border-radius: 14px;
  color: var(--muted);
  background: rgba(255,255,255,.55);
}

.toast-region {
  position: fixed;
  right: 18px;
  top: 84px;
  z-index: 100;
  display: grid;
  gap: 8px;
  width: min(360px, calc(100vw - 36px));
}

.toast {
  padding: 11px 13px;
  border-radius: 10px;
  color: white;
  background: #26354b;
  box-shadow: var(--shadow);
}

.toast.error { background: #8c2828; }
.toast.success { background: #24683b; }

.confirm-dialog {
  width: min(480px, calc(100vw - 32px));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0;
  box-shadow: var(--shadow);
}

.confirm-dialog::backdrop {
  background: rgba(23, 32, 51, .38);
}

.confirm-dialog form { padding: 22px; }
.dialog-actions { justify-content: flex-end; margin-top: 20px; }

.spinner {
  width: 28px;
  height: 28px;
  margin: auto;
  border: 3px solid #dce3ed;
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .editor-header { padding: 14px 16px; }
  .editor-layout { padding: 16px 16px 0; }
  .preview-shell > :not(.editor-header) { width: calc(100% - 32px); margin-left: 16px; }

  .editor-meta,
  .preview-grid {
    grid-template-columns: 1fr;
  }

  .col-8, .col-6, .col-4, .col-3 {
    grid-column: span 12;
  }

  .form-toolbar {
    grid-template-columns: 1fr;
  }

  .editor-shell .form-bottom:not(.at-end) > .muted { display: none; }
}

@media (max-width: 620px) {
  .content { width: min(100% - 18px, 1320px); }
  .status-bar { padding: 4px 9px; gap: 8px; }
  .status-bar .toast-region { width: min(360px, 62vw); }
  .submit-step + .submit-step::before { width: 16px; }
  .editor-header .page-heading { align-items: stretch; }
  .page-heading { flex-direction: column; }
  .initiator-row { grid-template-columns: 1fr; }
  .form-bottom {
    flex-direction: column;
    align-items: stretch;
  }
  .form-bottom .page-actions { width: 100%; }
  .form-bottom .button { flex: 1; }
  .editor-shell .form-bottom:not(.at-end) {
    flex-direction: row;
    gap: 8px;
    padding: 8px;
  }
  .editor-shell .form-bottom:not(.at-end) .button { padding: 8px 10px; }
}


.meta-line.spaced { margin-top: 12px; }

.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.align-justify { text-align: justify; }

.mark-bold { font-weight: 700; }
.mark-italic { font-style: italic; }
.mark-underline { text-decoration: underline; }
.mark-no-bold { font-weight: 400; }
.mark-no-italic { font-style: normal; }


.file-input-hidden {
  display: none;
}

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

.file-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.file-section-head > h4 {
  margin: 0;
}

.attachment-list,
.attachment-history-list {
  display: grid;
  gap: 8px;
}

.attachment-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 11px;
  background: white;
}

.attachment-main {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.attachment-main > strong {
  overflow-wrap: anywhere;
}

.attachment-meta,
.attachment-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.attachment-meta {
  color: var(--muted);
  font-size: 12px;
}

.attachment-inherited {
  border-radius: 999px;
  padding: 2px 7px;
  background: #eef1f5;
  color: #536075;
}

.conversion-status {
  border-radius: 999px;
  padding: 2px 7px;
  font-weight: 700;
}

.conversion-status.ready {
  background: var(--success-soft);
  color: var(--success-ink);
}

.conversion-status.pending {
  background: var(--warning-soft);
  color: var(--warning-ink);
}

.conversion-status.failed {
  background: var(--danger-soft);
  color: var(--danger-ink);
}

.conversion-error {
  color: var(--danger);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.replace-icon {
  margin-right: 4px;
}

.attachment-replaced {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 14px;
  border-left: 3px solid var(--line);
  padding: 4px 8px;
  color: var(--muted);
  font-size: 12px;
}

.attachment-replaced-name {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  text-decoration: line-through;
}

.version-chain h3 { margin: 0 0 10px; }

.chain-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chain-version {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}

.chain-version[aria-current="true"] {
  border-color: var(--primary);
  background: var(--surface-2);
}

.chain-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.chain-head .meta-line strong { color: #111827; }

.chain-steps {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.chain-step-time {
  display: inline-block;
  min-width: 128px;
  margin-right: 8px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.chain-comment {
  margin: 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.chain-files {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.attachment-history {
  color: var(--muted);
  font-size: 12px;
}

.attachment-history summary {
  cursor: pointer;
  font-weight: 700;
}

.attachment-history-list {
  margin-top: 8px;
}

.attachment-history-row {
  border-left: 3px solid var(--line);
  padding: 5px 8px;
}

@media (max-width: 620px) {
  .attachment-row,
  .file-section-head {
    align-items: stretch;
    flex-direction: column;
  }
}


.attachment-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.attachment-history-row > span {
  min-width: 0;
  overflow-wrap: anywhere;
}


.nav-count {
  display: inline-flex;
  min-width: 19px;
  min-height: 19px;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--danger);
  color: white;
  font-size: 11px;
  font-weight: 700;
}

.notification-list {
  display: grid;
  gap: 12px;
}

.notification-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  padding: 14px;
  display: grid;
  gap: 10px;
}

.notification-card.unread {
  border-left: 4px solid var(--primary);
}

.notification-card.read {
  opacity: 0.82;
}

.notification-head,
.notification-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 9px;
}

.notification-head h3 {
  margin: 0 0 5px;
  /* The title names the UO's procurement, which can be one long word. */
  min-width: 0;
  overflow-wrap: anywhere;
}

.notification-unread {
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 700;
}

.notification-message {
  white-space: pre-wrap;
  line-height: 1.45;
}

/* UO editor controls follow the stable v119 form palette. */
.editor-shell .date-input { cursor: pointer; min-width: 0; }
.editor-shell .date-input::-webkit-calendar-picker-indicator { cursor: pointer; }
.editor-shell .button.subtle {
  border: 1px solid #c7d8f5;
  background: #e8f0fe;
  color: #174ea6;
  border-radius: 6px;
}
.editor-shell .button.subtle:hover:not(:disabled) { background: #d8e7fd; }
.editor-shell .initiator-head h4,
.editor-shell .file-section-head h4 {
  font-size: 15px;
  color: #374151;
}
.editor-shell .initiator-hint,
.editor-shell .file-section-description {
  color: #666;
  font-size: 13px;
  margin: 0 0 8px;
}
.editor-shell .initiator-directory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 16px;
  margin: 8px 0 16px;
}
.editor-shell .initiator-directory-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}
.editor-shell .initiator-directory-option input {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  padding: 0;
  cursor: pointer;
}
.editor-shell .initiator-row {
  grid-template-columns: minmax(140px, 1fr) minmax(170px, 1fr) minmax(140px, 1fr) auto;
}
.editor-shell .file-drop-zone {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 104px;
  border: 2px dashed #ccc;
  border-radius: 10px;
  padding: 22px;
  text-align: center;
  background: #fafafa;
  color: #555;
  cursor: pointer;
}
.editor-shell .file-drop-zone span { font-size: 12px; color: #666; }
.editor-shell .file-drop-zone.drag,
.editor-shell .file-drop-zone:hover,
.editor-shell .file-drop-zone:focus-visible {
  border-color: var(--primary);
  background: #e8f0fe;
}
/* While a file uploads: the zone takes no new files, and a thin bar under
   it shows the share sent, then moves while the server stores the file. */
.editor-shell .file-drop-zone.busy {
  cursor: progress;
  opacity: 0.6;
}
.upload-progress {
  display: grid;
  gap: 4px;
}
.upload-progress[hidden] { display: none; }
.upload-progress progress {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border: 0;
  border-radius: 2px;
  background: #e5e7eb;
  color: var(--primary);
  overflow: hidden;
}
.upload-progress progress::-webkit-progress-bar {
  background: #e5e7eb;
  border-radius: 2px;
}
.upload-progress progress::-webkit-progress-value {
  background: var(--primary);
  border-radius: 2px;
  transition: width 0.2s ease;
}
.upload-progress progress::-moz-progress-bar {
  background: var(--primary);
  border-radius: 2px;
}
.upload-progress progress:indeterminate {
  background: linear-gradient(90deg, #e5e7eb 0 35%, #2563eb 35% 65%, #e5e7eb 65% 100%);
  background-size: 200% 100%;
  animation: upload-progress-move 1.2s linear infinite;
}
.upload-progress progress:indeterminate::-webkit-progress-bar {
  background: transparent;
}
.upload-progress progress:indeterminate::-moz-progress-bar {
  background: transparent;
}
@keyframes upload-progress-move {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .upload-progress progress:indeterminate { animation: none; }
}
.upload-progress-label {
  font-size: 12px;
  color: #555;
}
.attachment-preview-dialog {
  width: min(1080px, calc(100vw - 32px));
  height: min(90vh, 980px);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
}
.attachment-preview-dialog::backdrop { background: rgba(17,24,39,.7); }
.attachment-preview-shell { display: grid; grid-template-rows: auto minmax(0,1fr); height: 100%; }
.attachment-preview-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid #e0e0e0;
}
.attachment-preview-head strong { overflow-wrap: anywhere; }
.attachment-preview-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.attachment-preview-body { min-height: 0; overflow: auto; display: grid; place-items: center; padding: 12px; }
.attachment-preview-body iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.attachment-preview-body img { max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 900px) {
  .editor-shell .initiator-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .editor-shell .initiator-directory,
  .editor-shell .initiator-row { grid-template-columns: 1fr; }
  .attachment-preview-head { align-items: flex-start; flex-direction: column; }
}

/* Stable v119 UO form details, scoped to the editor page. */
.editor-shell .col-2 { grid-column: span 2; }
@media (max-width: 900px) {
  /* Full width like the other columns here and like v119; span 2 cut the number. */
  .editor-shell .col-2 { grid-column: span 12; }
}
/* A card section narrower than 680 px (beside the rail at 1280–1365 px, or
   beside the side menu at 901–1040 px) puts the value, № СЗ and the two dates
   two to a row: four to a row, «Дата отримання СЗ УО» wraps and pushes its
   field below the others. */
.procurement-main { container-type: inline-size; }
@media (min-width: 900.02px) {
  @container (max-width: 679.98px) {
    .editor-shell .procurement-main .pair-field { grid-column: span 6; }
  }
}
.editor-shell .procurement-card { padding: 0; }

.editor-shell .procurement-head {
  flex-wrap: wrap;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}

.editor-shell .procurement-card.collapsed .procurement-head { border-bottom: 0; }

.editor-shell .procurement-head h3 {
  margin: 0;
  color: #1d4ed8;
  font-size: 16px;
  font-weight: 700;
}

.editor-shell .procurement-number {
  flex: none;
  border-radius: 8px;
  background: #e8f0fe;
  color: #174ea6;
}

.procurement-title {
  flex: 1 1 260px;
  display: grid;
  gap: 2px;
  min-width: 0;
}

.procurement-title p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.procurement-title .procurement-gaps { color: var(--warning-ink); }
.procurement-actions { align-items: center; }

.readiness-pill {
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
}

.readiness-pill.ready { background: var(--success-soft); color: var(--success-ink); }
.readiness-pill.missing { background: var(--warning-soft); color: var(--warning-ink); }

.procurement-body { padding: 18px 20px; }
.procurement-body > .section-box:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.procurement-body .field-grid { margin-top: 0; }

/* The service note and the commercial offers side by side when there is
   room; a column narrower than 340 px takes the card's width. */
.file-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 16px 24px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.file-columns > .file-section {
  align-content: start;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.editor-shell .procurement-card input,
.editor-shell .procurement-card select,
.editor-shell .procurement-card textarea { font-size: 14px; font-weight: 400; }
/* One height for a select and a one-line field, so a row of «Основне» lines
   up in every engine: WebKit drew «Вид закупівлі» 5 px taller than «Назва
   закупівлі» (46 and 41 px), Chromium 38 and 37, Firefox 36. A select drops
   its padding in height: WebKit keeps the 9 px inside the 38 px and cut the
   foot of «Товари»; every engine centres a select's text by itself. */
.editor-shell .procurement-card select,
.editor-shell .procurement-card input:not([type="checkbox"], [type="radio"], [type="file"]) { height: 38px; }
.editor-shell .procurement-card select { padding-block: 0; }
.editor-shell .section-box > h4 {
  margin: 0 0 14px;
  color: #374151;
  font-size: 15px;
}
.editor-shell .rich-toolbar { background: #f8f9fa; gap: 6px; }
.editor-shell .rich-tool { border-color: #ccc; border-radius: 4px; }
.editor-shell .rich-editor-surface { min-height: 110px; }
.editor-shell .rich-field-note {
  margin: 12px 2px 0;
  color: #666;
  font-size: 13px;
  line-height: 1.45;
}
.editor-shell .initiator-manual-label {
  margin: 12px 0 8px;
  color: #555;
  font-size: 13px;
}
.editor-shell .initiator-manual-list { display: grid; gap: 8px; }
.editor-shell .initiator-manual-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px;
  gap: 8px;
  align-items: center;
}
.editor-shell .initiator-add-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
  color: #555;
  font-size: 13px;
}
.editor-shell .initiator-add {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  padding: 0;
  background: var(--primary);
  color: #fff;
  font-size: 20px;
  line-height: 1;
}
.editor-shell .initiator-add:hover:not(:disabled) { background: #1d4ed8; }
.editor-shell .initiator-remove {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  padding: 0;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 20px;
  line-height: 1;
}
.editor-shell .initiator-saved {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 8px 0;
  color: #555;
  font-size: 13px;
}
.editor-shell .initiator-summary { margin: 6px 0; }
.editor-shell .attachment-actions .button.danger {
  background: #fee2e2;
  color: #b91c1c;
  border-radius: 5px;
}
@media (max-width: 620px) {
  .editor-shell .initiator-manual-row { grid-template-columns: 1fr; }
  .editor-shell .initiator-manual-row .button { justify-self: end; }
}