:root {
  --reviewer-bg: #f3f4f6;
  --reviewer-panel: #ffffff;
  --reviewer-line: #e5e7eb;
  --reviewer-text: #111827;
  --reviewer-muted: #6b7280;
  --reviewer-accent: #2563eb;
  --reviewer-danger: #dc2626;
  --reviewer-warning: #f59e0b;
  --reviewer-success: #16a34a;
  /* Text inks for the state colours: the base colours read below 4.5:1 as
     text, so text uses the v119 inks (owner's decision, 15.10.2026). */
  --reviewer-success-ink: #166534;
  --reviewer-warning-ink: #92400e;
  --reviewer-danger-ink: #b91c1c;
  /* The chosen thing of a list: the open form's row and a chosen signer
     have the pale blue with the light blue edge, which also edges the
     active filter. */
  --reviewer-accent-pale: #eff6ff;
  --reviewer-accent-line: #93c5fd;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--reviewer-bg);
  color: var(--reviewer-text);
  font-family: Arial, sans-serif;
}

/* As .app-shell in uo.css: the login card's top margin and, in WebKit
   (Safari), the last section's bottom margin stay inside the shell, so a
   page that fits the window does not scroll into empty space. */
.reviewer-shell {
  min-height: 100vh;
  display: flow-root;
}

.ownership-bar {
  padding: 9px 24px;
  border-bottom: 1px solid var(--reviewer-line);
  background: #fff;
  color: var(--reviewer-muted);
  font-size: 13px;
}

.ownership-bar.writer {
  color: var(--reviewer-success-ink);
}

.ownership-bar.readonly {
  color: var(--reviewer-warning-ink);
}

.reviewer-content {
  display: grid;
  align-content: start;
  gap: 16px;
  padding-bottom: 60px;
}

.review-panel,
.review-detail,
.review-list,
.history-session {
  background: var(--reviewer-panel);
  border: 1px solid var(--reviewer-line);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

.review-panel-head,
.review-card-head,
.review-actions,
.session-actions,
.signer-list,
.review-meta,
.history-summary-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.review-panel-head,
.review-card-head,
.history-summary-row {
  justify-content: space-between;
}

.review-title {
  margin: 0;
}

/* «Затвердити вибрані» and «Затвердити всі готові» again under the forms
   (owner, 22.10.2026), on the left, where v119's «Пакетне затвердження
   поточної сесії» panel under the records had its buttons. */
.session-actions-bottom {
  justify-content: flex-start;
}

.review-meta {
  color: var(--reviewer-muted);
  font-size: 13px;
}

.review-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  background: #eef2f6;
  font-size: 12px;
  font-weight: 700;
}

.review-badge.pending {
  background: #fff4d6;
  color: var(--reviewer-warning-ink);
}

.review-badge.returned_for_rework {
  background: #fff0ee;
  color: var(--reviewer-danger-ink);
}

/* On the badge's grey, #6b7280 gave 4.29:1 (axe, a form
   «Скасовано в сесії» in «Історія сесій»); DESIGN.md's muted-on-page gives
   6.7:1. */
.review-badge.cancelled {
  color: #4b5563;
}

.review-badge.approved {
  background: #e8f7ef;
  color: var(--reviewer-success-ink);
}

.signer-chip {
  border-radius: 999px;
  padding: 6px 10px;
  background: #eef3f9;
  font-size: 13px;
}

.review-form {
  display: grid;
  gap: 16px;
  margin-top: 14px;
}

.review-procurement {
  border: 1px solid var(--reviewer-line);
  border-radius: 10px;
  padding: 14px;
  display: grid;
  gap: 12px;
  background: #fafafa;
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  /* A label that wraps keeps its field on the line of the others. */
  align-items: end;
}

.review-grid .half {
  grid-column: span 2;
}

.review-grid .wide {
  grid-column: 1 / -1;
}

.review-grid label,
.rework-box label,
.approval-box label,
.initiator-row label {
  display: grid;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
}

.review-grid input,
.review-grid select,
.review-grid textarea,
.rework-box textarea,
.approval-box input,
.initiator-row input,
.initiator-row select {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 9px;
  font: inherit;
  background: #fff;
}

.review-grid textarea,
.rework-box textarea {
  min-height: 88px;
  resize: vertical;
}

/* One height for a select and a one-line field, so the fields of a row line
   up: Chromium drew a select 37 px and a text field 35 px, WebKit's select
   is taller still. A select drops its padding in height: WebKit keeps the
   9 px inside the fixed height and cuts the foot of its text (the UO form
   showed it); every engine centres a select's text by itself. */
.review-grid select,
.review-grid input:not([type="checkbox"], [type="radio"]),
.approval-box input,
.initiator-row select,
.initiator-row input:not([type="checkbox"], [type="radio"]) { height: 37px; }
.review-grid select,
.initiator-row select { padding-block: 0; }

.initiator-list,
.review-file-list,
.message-list {
  display: grid;
  gap: 8px;
}

.initiator-row,
.review-file-row,
.message-row {
  border: 1px solid var(--reviewer-line);
  border-radius: 9px;
  padding: 10px;
}

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

.review-file-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.review-file-row.inactive {
  opacity: 0.7;
}

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

.review-file-group {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.review-file-group-title {
  color: var(--reviewer-muted);
  font-size: 13px;
  font-weight: 600;
}

.rework-box {
  border-top: 1px solid var(--reviewer-line);
  padding-top: 12px;
  display: grid;
  gap: 8px;
}

.approval-box {
  border-top: 1px solid var(--reviewer-line);
  padding-top: 12px;
  display: grid;
  grid-template-columns: minmax(140px, 180px) minmax(180px, 240px) auto;
  gap: 10px;
  align-items: end;
}

.batch-approval-results {
  display: grid;
  gap: 6px;
}

.approval-ok {
  color: var(--reviewer-success-ink);
}

.approval-failed {
  color: var(--reviewer-danger);
}

.package-failures {
  margin: 8px 0;
  padding-left: 20px;
  font-size: 13px;
}

/* v119 ReviewerPage.html .select-approve: per-form batch selection. */
.select-approve {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #065f46;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 999px;
  padding: 7px 10px;
  cursor: pointer;
}

.select-approve input {
  width: auto;
  margin: 0;
}

.approval-result {
  margin-top: 4px;
}

.message-row.reviewer_to_uo {
  border-left: 4px solid #b42318;
}

.message-row.uo_to_reviewer {
  border-left: 4px solid #1f5aa6;
}

.history-session > summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

/* The browser's marker went above the line of the date and counts, which is
   a flex row; the mark is part of the summary's own row instead. */
.history-session > summary::-webkit-details-marker { display: none; }
.history-session > summary > .history-summary-row { flex: 1; min-width: 0; }
.history-mark { flex: none; font-size: .75em; transition: transform .15s ease; }
.history-session[open] > summary > .history-mark { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .history-mark { transition: none; }
}

.history-session[open] > summary {
  margin-bottom: 12px;
}

.empty-state {
  padding: 30px;
  text-align: center;
  color: var(--reviewer-muted);
}

.button.danger {
  background: #fff;
  border-color: #f1b4ae;
  color: var(--reviewer-danger);
}

.button.warning {
  background: #fff8e7;
  border-color: #e9c46a;
  color: #725000;
}

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 900px) {
  .approval-box {
    grid-template-columns: 1fr;
  }

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

/* Session and procurement layout follows the stable v119 panels and controls. */
.review-panel, .review-detail, .review-list { border-color: #dadce0; border-radius: 12px; box-shadow: 0 2px 10px rgba(25, 40, 65, .09); }
.session-signers { display: grid; gap: 12px; }
.session-signers > p { margin: 0; }
.signer-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.signer-choice { display: flex; align-items: center; gap: 10px; border: 1px solid #dadce0; border-radius: 8px; padding: 12px; background: #f8fbff; font-size: 15px; }
.signer-choice input { width: 18px; height: 18px; accent-color: #2563eb; flex: none; }
/* ТЗ §11: the version chain of a revision, in its own tab. */
.review-chain-body > .muted { margin: 0; }
.review-chain-status:empty { display: none; }
.review-procurement { background: #fff; border-color: #dadce0; }
.review-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; align-items: stretch; }
.review-save-row { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.review-unsaved { color: var(--reviewer-warning-ink); font-size: 13px; font-weight: 700; }
.rework-box, .approval-box { border: 1px solid #dadce0; border-radius: 10px; padding: 16px; background: #fff; min-width: 0; }
.rework-box { display: flex; flex-direction: column; align-items: stretch; }
.rework-box h3, .approval-box h3 { color: #2563eb; margin: 0; font-size: 17px; }
.rework-box textarea { min-height: 85px; }
.rework-box .button { align-self: flex-start; margin-top: auto; }
.approval-box { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; align-content: start; }
.approval-box h3, .approval-box > .review-file-meta { grid-column: 1 / -1; }
.approval-box > .button { grid-column: 1 / -1; justify-self: start; }
.review-file-row { background: #fff; }
.review-file-row .button { color: #1d4ed8; border: 1px solid #c2d7fc; background: #e8f0fe; }
/* A primary button has a clear border, so it is as tall as the outlined
   buttons beside it (the session buttons stood 2 px apart). */
.reviewer-shell .button.primary { border: 1px solid transparent; background: #2563eb; color: #fff; }
.reviewer-shell .button.primary:hover:not(:disabled) { background: #1d4ed8; }
.reviewer-shell .button.subtle { border: 1px solid #c2d7fc; background: #e8f0fe; color: #174ea6; }
.reviewer-shell .button.warning { border: 1px solid #e9c46a; background: #fff8e7; color: #725000; }
.reviewer-shell .button.danger { border: 1px solid #f1b4ae; background: #fff; color: #b42318; }
.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) {
  .review-actions, .signer-list { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .approval-box { grid-template-columns: 1fr; }
  .attachment-preview-head { align-items: flex-start; flex-direction: column; }
}

/* Keep one compact feedback message in document flow, away from session controls. */
.reviewer-status { position: static; z-index: auto; width: min(1400px,calc(100% - 32px)); margin: 10px auto 0; display: flex; justify-content: flex-end; pointer-events: none; }
.reviewer-status:empty { display: none; }
.reviewer-status .toast { width: fit-content; max-width: min(340px,100%); padding: 8px 12px; font-size: 13px; line-height: 1.35; box-shadow: none; }

/* Fixed feedback slot at the top of the page column keeps session controls
   in place. The row grows only when its text needs more room (zoom, a
   narrow screen), instead of cutting the text off. */
.ownership-bar {
  position: sticky;
  top: 0;
  z-index: 19;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 72px;
}
.ownership-bar #ownershipText { min-width: 0; }
.ownership-bar .reviewer-status {
  position: static;
  width: min(340px, 42vw);
  height: 54px;
  margin: 0;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  overflow-y: auto;
}
.ownership-bar .reviewer-status:empty { display: flex; }
/* Auto margins centre a short message and start a long one at its first
   line: the row scrolls down to the rest, never up. */
.ownership-bar .reviewer-status .toast { max-width: 100%; margin-block: auto; }
.signer-list { grid-template-columns: 1fr; align-items: stretch; }
.signer-choice { justify-content: flex-start; }
.signer-choice strong { font-weight: 700; }
.signer-directory-add { border-top: 1px solid #e2e8f0; padding-top: 12px; }
.signer-directory-add summary { cursor: pointer; color: #2563eb; font-weight: 700; }
.signer-directory-form { margin-top: 12px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.signer-directory-form label { display: grid; gap: 6px; font-weight: 600; }
.signer-directory-form input[type="text"] { width: 100%; min-width: 0; padding: 10px; border: 1px solid #cbd5e1; border-radius: 6px; }
.signer-directory-form label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.signer-directory-form > p { grid-column: 1 / -1; margin: 0; }
.signer-directory-form > button { justify-self: start; }
@media (max-width: 720px) {
  .ownership-bar { min-height: 96px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 4px; }
  .ownership-bar .reviewer-status { width: 100%; height: auto; min-height: 40px; justify-content: flex-start; }
  .ownership-bar .reviewer-status:empty { display: none; }
  .signer-directory-form { grid-template-columns: 1fr; }
}

/* The reviewer sees the legacy initiator phone; optional metadata stays editable. */
.initiator-row { grid-template-columns: minmax(0,1.3fr) minmax(0,1.3fr) minmax(0,1fr) auto; }
.initiator-extra { grid-column: 1 / -1; }
.initiator-promote { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.initiator-extra summary { cursor: pointer; color: #2563eb; font-size: 13px; }
.initiator-extra-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 10px; }
@media (max-width: 900px) {
  .initiator-row, .initiator-extra-fields { grid-template-columns: 1fr; }
}

/* «Довідники» and «Запасний перевіряючий» (TO_BE_SPEC §12). Tables follow
   the v119 ReviewerPage.html .session-history-table (1px #e5e7eb cells,
   #f9fafb bold header); headings and controls reuse the session panels. */
.directory-panel { display: grid; gap: 12px; }
.directory-panel > p,
.directory-intro > p,
.backup-panel > p { margin: 0; }
.directory-intro, .backup-panel { display: grid; gap: 10px; }
.directory-title { color: #2563eb; font-size: 20px; }
.directory-table-wrap { width: 100%; overflow-x: auto; }
.directory-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.directory-table th,
.directory-table td { border: 1px solid var(--reviewer-line); padding: 7px 9px; text-align: left; vertical-align: middle; }
.directory-table th { background: #f9fafb; font-weight: 700; }
.directory-table .directory-order { width: 48px; text-align: center; color: var(--reviewer-muted); }
/* A signer's ↑ ↓ stand beside its number in «№ / порядок» (owner, 24.10.2026). */
.directory-table td.directory-order { white-space: nowrap; }
.directory-order .directory-action-pair { display: inline-flex; vertical-align: middle; margin-left: 8px; }
.directory-table .directory-present { width: 1%; text-align: center; }
.directory-table th.directory-present { white-space: normal; min-width: 120px; }
.directory-table input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: #2563eb; }
.directory-table .directory-input { width: 100%; min-width: 140px; border: 1px solid #d1d5db; border-radius: 8px; padding: 7px 8px; font: inherit; background: #fff; }
.directory-table .directory-phone { white-space: nowrap; }
.directory-row.inactive td { color: var(--reviewer-muted); }
.directory-empty td { color: var(--reviewer-muted); font-style: italic; }
.directory-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.directory-actions .button { white-space: nowrap; }
.directory-action-pair { display: flex; gap: 6px; }
.directory-archive > summary { cursor: pointer; color: #2563eb; font-weight: 700; }
.directory-archive[open] > summary { margin-bottom: 10px; }
.directory-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 10px; align-items: end; border-top: 1px solid #e2e8f0; padding-top: 12px; }
#signerAddForm { grid-template-columns: repeat(2, minmax(0, 1fr)) auto auto; }
.directory-form-title { grid-column: 1 / -1; margin: 0; color: #2563eb; font-size: 16px; }
.directory-form label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; min-width: 0; }
.directory-form .directory-input { width: 100%; min-width: 0; border: 1px solid #d1d5db; border-radius: 8px; padding: 9px; font: inherit; background: #fff; }
.directory-form .directory-check { display: flex; align-items: center; gap: 8px; font-weight: 400; padding-bottom: 10px; }
.directory-form .directory-check input { width: 18px; height: 18px; margin: 0; accent-color: #2563eb; }
.assignment-list { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.assignment-list dt { color: var(--reviewer-muted); }
.assignment-list dd { margin: 0; font-weight: 700; }
.backup-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.backup-form label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; width: min(420px, 100%); }
.backup-form select { width: 100%; border: 1px solid #d1d5db; border-radius: 8px; padding: 9px; font: inherit; font-weight: 400; background: #fff; }
@media (max-width: 900px) {
  .directory-form, #signerAddForm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .directory-form > .button { justify-self: start; }
}
@media (max-width: 620px) {
  .directory-form, #signerAddForm { grid-template-columns: 1fr; }
  .assignment-list { grid-template-columns: 1fr; gap: 2px; }
  .assignment-list dd { margin-bottom: 8px; }
}

/* The top status bar names the system action that runs (owner, 19.10.2026):
   a second line under the edit-mode text, with a small spinner. Idle, the
   line is empty and takes no room, so the row keeps its height. */
.ownership-main { display: grid; min-width: 0; }
.activity-status { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--reviewer-text); }
.activity-status.busy { margin-top: 3px; }
.activity-status:not(.busy) .activity-spinner { display: none; }
.activity-spinner { width: 12px; height: 12px; flex: none; border: 2px solid #dce3ed; border-top-color: var(--reviewer-accent); border-radius: 50%; animation: spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .activity-spinner { animation: none; } }

/* Cancelling a session and the results of its package: one native dialog,
   with the shell of the attachment preview. */
.session-dialog { width: min(640px, calc(100vw - 32px)); max-width: none; max-height: min(90vh, 900px); padding: 0; border: 1px solid #d1d5db; border-radius: 12px; box-shadow: 0 18px 60px rgba(0,0,0,.25); color: var(--reviewer-text); }
.session-dialog::backdrop { background: rgba(17,24,39,.7); }
.session-dialog-shell { display: grid; gap: 14px; padding: 18px; }
.session-dialog-shell > h2 { margin: 0; color: #2563eb; font-size: 20px; }
.session-dialog-body { display: grid; gap: 10px; font-size: 14px; line-height: 1.45; }
.session-dialog-body p,
.session-dialog-body ul,
.session-dialog-body ol { margin: 0; }
.session-dialog-body ul,
.session-dialog-body ol { display: grid; gap: 4px; padding-left: 20px; }
.session-dialog-body label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; }
.session-dialog-body textarea { width: 100%; min-height: 80px; resize: vertical; border: 1px solid #d1d5db; border-radius: 8px; padding: 9px; font: inherit; font-weight: 400; background: #fff; }
.session-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
/* The dialog sits outside .reviewer-shell; its buttons look the same. */
.session-dialog .button.primary { border: 1px solid transparent; background: #2563eb; color: #fff; }
.session-dialog .button.primary:hover:not(:disabled) { background: #1d4ed8; }
.session-dialog .button.subtle { border: 1px solid #c2d7fc; background: #e8f0fe; color: #174ea6; }
.session-dialog .button.danger { border: 1px solid #f1b4ae; background: #fff; color: #b42318; }
.session-steps li.done { color: var(--reviewer-success-ink); }
.session-steps li.current { font-weight: 700; }
.session-cancel-banner { border-color: #f1b4ae; display: grid; gap: 10px; justify-items: start; }
.session-cancel-banner > p { margin: 0; }
.auto-complete-line { font-weight: 700; }
.print-package-panel > .auto-complete-line { margin: 10px 0 8px; }
@media (max-width: 620px) {
  .session-dialog-shell { padding: 14px; }
  .session-dialog-actions { justify-content: stretch; }
  .session-dialog-actions .button { flex: 1 1 100%; }
}

/* Redesign «Г», stage 3 (owner, 23.10.2026): the side menu of shell.css,
   a white page header with the session's buttons and signers, and the
   forms of the session as a list with the open one beside it, in tabs. */
.reviewer-content > * { width: min(1400px, calc(100% - 56px)); justify-self: center; }
.reviewer-content > .review-page-header { width: 100%; }
/* The status row is the sticky row of this cabinet; the header scrolls. */
.review-page-header { position: static; align-items: flex-start; }
.review-page-header > .session-signers { flex: 1 1 100%; }
/* On a row of their own the session buttons stay on the right, as beside
   the title; on a phone they follow the title on the left, as before. */
.review-page-header .session-actions { justify-content: flex-end; margin-left: auto; }
@media (max-width: 620px) {
  .review-page-header .session-actions { justify-content: flex-start; margin-left: 0; }
}
.review-page-header .directory-readonly { margin: 0; }
.session-signers-title { margin: 0; color: #2563eb; font-size: 15px; }
/* One signer per line, as v119's «Підписанти для всієї сесії» (owner,
   24.10.2026: two of them could share a row). */
.review-page-header .signer-list { display: grid; grid-template-columns: minmax(0, 760px); gap: 6px; }
.review-page-header .signer-choice { padding: 8px 12px; font-size: 14px; }
.review-page-header .signer-choice:has(input:checked) { border-color: var(--reviewer-accent-line); background: var(--reviewer-accent-pale); }

.review-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.review-list {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  overflow: hidden;
}
.review-list-heading { margin: 0; padding: 16px 16px 10px; color: #2563eb; font-size: 18px; }
.review-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; border-bottom: 1px solid var(--reviewer-line); }
.review-filter {
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid var(--reviewer-line);
  border-radius: 999px;
  background: #fff;
  color: var(--reviewer-text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.review-filter[aria-pressed="true"] { border-color: var(--reviewer-accent-line); background: #dbeafe; color: #1d4ed8; }
.review-list-items { display: grid; gap: 6px; margin: 0; padding: 10px; list-style: none; overflow-y: auto; }
.review-list-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
}
.review-list-item:hover { background: #f9fafb; }
.review-list-item.current { border-color: var(--reviewer-accent-line); background: var(--reviewer-accent-pale); }
.review-list-select { display: flex; padding-top: 2px; cursor: pointer; }
.review-list-select input { width: 18px; height: 18px; margin: 0; accent-color: #2563eb; }
.review-list-open {
  display: grid;
  justify-items: start;
  gap: 4px;
  min-width: 0;
  flex: 1;
  padding: 0;
  border: 0;
  background: none;
  color: var(--reviewer-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.review-list-name { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.review-list-item.current .review-list-name { color: #1d4ed8; }
/* #6b7280 reads below 4.5:1 on the pale blue of the open row. */
.review-list-item.current .review-list-meta { color: #4b5563; }
.review-list-meta { color: var(--reviewer-muted); font-size: 12px; }
.review-list-empty { padding: 12px; color: var(--reviewer-muted); font-size: 13px; }
.review-list > .session-actions-bottom { padding: 12px 16px; border-top: 1px solid var(--reviewer-line); }

.review-detail { display: grid; gap: 0; min-width: 0; padding: 0; overflow: hidden; }
.review-detail.empty-state { padding: 30px; }
.review-detail-head { display: grid; gap: 8px; padding: 18px 20px 14px; }
.review-detail-title { margin: 0; color: #2563eb; font-size: 22px; overflow-wrap: anywhere; }
.review-detail-title:focus { outline: none; }
.review-detail-title:focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; }
.review-detail-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.review-detail-result { display: grid; gap: 8px; padding: 0 20px 20px; }
.review-detail-result > p { margin: 0; }
.review-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 20px; border-bottom: 1px solid var(--reviewer-line); }
.review-tab {
  min-height: 44px;
  margin-bottom: -1px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: #374151;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.review-tab:hover { color: #1d4ed8; }
.review-tab[aria-selected="true"] { border-bottom-color: #2563eb; color: #2563eb; }
.review-tab-panel { padding: 18px 20px; container-type: inline-size; }
.review-section-title { margin: 0; color: #111827; font-size: 15px; }
.review-detail .review-form { margin-top: 0; }
.review-detail .review-procurement { border: 0; border-radius: 0; padding: 0; }
.review-detail .review-procurement + .review-procurement { padding-top: 18px; border-top: 1px solid var(--reviewer-line); }
.review-files { display: grid; gap: 14px; }
.review-files > p { margin: 0; }
.review-files-procurement { display: grid; gap: 4px; }
.review-file-group-title { margin: 0; }
.review-detail .message-list > .review-section-title { margin-bottom: 2px; }
.review-detail > .review-actions { padding: 0 20px 20px; }
.review-detail > .review-actions > .review-save-row { padding-top: 14px; border-top: 1px solid var(--reviewer-line); }
.review-detail .select-approve { padding: 6px 10px; }

/* The list beside the form from 1100 px, in view under the status row
   while the form scrolls; a long list scrolls in its own column. */
@media (min-width: 1100px) {
  .review-workspace { grid-template-columns: 320px minmax(0, 1fr); }
  .review-list {
    position: sticky;
    top: calc(var(--reviewer-status-height, 72px) + 16px);
    max-height: calc(100vh - var(--reviewer-status-height, 72px) - 32px);
  }
}

/* Stacked above the form, a long list scrolls in its own box, so the form
   stays near the top of the page. */
@media (max-width: 1099px) {
  .review-list-items { max-height: min(60vh, 480px); }
}

/* A narrow form: two of the four field columns, then one. */
@container (max-width: 620px) {
  .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 380px) {
  .review-grid { grid-template-columns: minmax(0, 1fr); }
  .review-grid .half { grid-column: auto; }
}
@media (max-width: 900px) {
  .reviewer-content > * { width: calc(100% - 32px); }
  .review-detail-head, .review-tab-panel { padding-left: 14px; padding-right: 14px; }
  .review-tabs { padding: 0 8px; }
  .review-detail > .review-actions, .review-detail-result { padding-left: 14px; padding-right: 14px; }
}

/* «Відкрити у вікні нижче» (owner, 24.10.2026): a button that reads as the
   link «Відкрити документ» beside it, and the Google Docs editor in a panel
   under the page, as wide as the page's other panels. */
.inline-link { padding: 0; border: 0; background: none; color: LinkText; font: inherit; text-decoration: underline; cursor: pointer; }
.reviewer-content:has(+ .doc-frame:not([hidden])) { padding-bottom: 16px; }
.doc-frame { width: min(1400px, calc(100% - 56px)); align-self: center; margin-bottom: 60px; display: grid; gap: 10px; scroll-margin-top: calc(var(--reviewer-status-height, 72px) + 16px); }
.doc-frame[hidden] { display: none; }
.doc-frame-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.doc-frame-title { margin: 0; color: #2563eb; font-size: 18px; overflow-wrap: anywhere; }
.doc-frame-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-frame-actions a.button { display: inline-flex; align-items: center; text-decoration: none; }
.doc-frame > .review-file-meta { margin: 0; }
.doc-frame-editor { display: block; width: 100%; height: max(480px, calc(100vh - var(--reviewer-status-height, 72px) - 200px)); border: 1px solid var(--reviewer-line); border-radius: 8px; background: #fff; }
@media (max-width: 900px) {
  .doc-frame { width: calc(100% - 32px); }
}