.podd-tool, .podd-tool * { box-sizing: border-box; }
.podd-tool { font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 0; padding: 24px; color: #222; }
.podd-tool .wrap { width: 1290px; margin: 0 auto; display: grid; grid-template-columns: 420px 850px; gap: 24px; align-items: start; }
.podd-tool h1 { font-size: 17px; font-weight: 600; margin: 0 0 4px; }
.podd-tool .panel { background: #fff; border: 1px solid #e2e2e0; border-radius: 10px; padding: 16px; }
.podd-tool .panel h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #999; margin: 18px 0 8px; }
.podd-tool .panel h2:first-child { margin-top: 0; }
.podd-tool label { display: block; font-size: 12.5px; color: #555; margin-bottom: 3px; }
.podd-tool input[type=text], .podd-tool input[type=number], .podd-tool textarea, .podd-tool select {
    width: 100%; padding: 6px 8px; border: 1px solid #ccc; border-radius: 6px; font-size: 13px;
    font-family: inherit; margin-bottom: 10px; resize: vertical;
  }
.podd-tool textarea { min-height: 56px; }
.podd-tool .row { display: flex; gap: 8px; }
.podd-tool .row > div { flex: 1; }
.podd-tool .chk { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #333; margin-bottom: 10px; }
.podd-tool .chk input { width: auto; margin: 0; }
.podd-tool fieldset { border: 1px solid #e5e5e3; border-radius: 8px; padding: 10px 12px 4px; margin-bottom: 10px; }
.podd-tool legend { font-size: 12px; font-weight: 600; color: #555; padding: 0 4px; }
.podd-tool .list-row { display: flex; gap: 6px; align-items: flex-start; margin-bottom: 6px; }
.podd-tool .list-row > * { flex: 1; }
.podd-tool .list-row button { flex: 0 0 auto; }
.podd-tool .btn { padding: 6px 10px; border: 1px solid #ccc; background: #fafafa; border-radius: 6px; cursor: pointer; font-size: 12.5px; }
.podd-tool .btn:hover { background: #f0f0f0; }
.podd-tool .btn-add { color: #2f6feb; border-color: #2f6feb; background: #fff; }
.podd-tool .btn-x { color: #c0392b; border-color: #e0b4ac; width: 28px; }
.podd-tool #generateBtn { width: 100%; margin-top: 6px; padding: 11px 12px; background: #2f6feb; color: #fff; border: none; border-radius: 8px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.podd-tool #generateBtn:hover { background: #255bc4; }
.podd-tool .doc-toolbar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.podd-tool .doc-toolbar .btn { padding: 7px 14px; }
.podd-tool .hint { font-size: 11.5px; color: #999; margin: -6px 0 10px; }

/* ===== Step 1 РДМ upload: a proper drag-and-drop zone instead of the bare
   native <input type=file>. Markup is a <label for="rdmSchemeFile"> wrapping
   a visually-hidden (but still focusable/keyboard-operable) file input --
   the native label-click-opens-picker behavior needs no extra JS, so
   rdm-import/file-handler.js's initRdmFileInput() only has to add the drag-
   event listeners + the "file chosen" filename readout. ===== */
.podd-tool .podd-dropzone {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 4px; padding: 26px 16px; margin: 2px 0 12px; cursor: pointer;
  background: #fafbfd; border: 2px dashed #cfd6e4; border-radius: 12px;
  transition: background-color .15s ease, border-color .15s ease;
}
.podd-tool .podd-dropzone:hover { background: #f2f6fe; border-color: #9fb6ef; }
.podd-tool .podd-dropzone:focus-within { outline: 2px solid #2f6feb; outline-offset: 2px; }
.podd-tool .podd-dropzone.podd-dropzone-drag { background: #eaf1fe; border-color: #2f6feb; border-style: solid; }
.podd-tool .podd-dropzone.podd-dropzone-has-file { border-style: solid; border-color: #8fc98f; background: #f6fbf6; }
.podd-tool .podd-dropzone-input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.podd-tool .podd-dropzone-icon { font-size: 26px; line-height: 1; color: #7f93b8; margin-bottom: 2px; }
.podd-tool .podd-dropzone.podd-dropzone-drag .podd-dropzone-icon,
.podd-tool .podd-dropzone.podd-dropzone-has-file .podd-dropzone-icon { color: #2f6feb; }
.podd-tool .podd-dropzone-title { font-size: 13.5px; font-weight: 600; color: #2c3446; margin: 0; }
.podd-tool .podd-dropzone-hint { font-size: 11.5px; color: #909aad; max-width: 340px; margin: 0; }
.podd-tool .podd-dropzone-filename { font-size: 12.5px; font-weight: 600; color: #2f7d31; margin-top: 4px; }
.podd-tool .podd-dropzone-filename:empty { display: none; }

.podd-tool #rdmSchemePreview { font-size: 12px; color: #333; margin: 8px 0 10px; }
.podd-tool #rdmSchemePreview:empty { display: none; }
.podd-tool #rdmSchemePreview .rdm-ok { background: #f4f9f4; border: 1px solid #cfe8cf; border-radius: 8px; padding: 8px 10px; }
.podd-tool #rdmSchemePreview .rdm-err { background: #fdf3f2; border: 1px solid #f0c4bd; border-radius: 8px; padding: 8px 10px; color: #a23; }
.podd-tool #rdmSchemePreview img { display: block; max-width: 100%; margin-top: 6px; border: 1px solid #eee; border-radius: 6px; }
.podd-tool #rdmSchemePreview table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.podd-tool #rdmSchemePreview td { padding: 1px 0; font-size: 11.5px; }
.podd-tool #rdmSchemePreview td.k { color: #888; }
.podd-tool #rdmSchemePreview td.v { text-align: right; font-weight: 600; }
.podd-tool .doc-page-wrap { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.podd-tool .page {
    position: relative;
    width: 209.903mm; min-height: 297.039mm; flex: 0 0 auto;
    background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.18);
  }
.podd-tool .page-wm { position: absolute; width: auto; pointer-events: none; z-index: 3; user-select: none; }
.podd-tool .page-content {

    box-sizing: border-box !important; width: 100% !important; height: 284.516mm !important;
    overflow: hidden !important; padding: 7.514mm 7.373mm 5.009mm 20.003mm !important;
    font-family: 'GOST type A', 'Times New Roman', Times, serif;
    font-size: 14pt; font-style: italic; line-height: 1.15; color: #111;
  }
.podd-tool .page-content p { margin: 0 0 6pt; text-align: justify; }
.podd-tool .page-content p.center { text-align: center; }
.podd-tool .page-content p.heading { text-align: center; font-weight: 700; margin: 12pt 0 8pt; }
.podd-tool .page-content p.heading:first-child { margin-top: 0; }
.podd-tool .page-content table.sign-row { width: 100%; border-collapse: collapse; margin: 0 0 2pt; font-size: 14pt; }
.podd-tool .page-content table.sign-row td { padding: 0; border: none; vertical-align: top; font-size: 14pt; }
.podd-tool .page-content table.sign-row td.sig { text-align: right; white-space: nowrap; }
.podd-tool .page-content p.sign-cap { text-align: right; font-size: 12pt; margin: 0 0 10pt; }
/* font-family/style/color/size restated explicitly (not left to inherit) --
   plenty of WordPress themes ship a global reset targeting bare ul/li/ol
   (e.g. "ul, ol, li { font-family: ... }") that otherwise silently wins over
   plain inheritance from .page-content, same bug class as the iframe/
   max-width overrides handled elsewhere in this file. ::marker is included
   too so the bullet glyph itself matches instead of falling back to the
   browser's own default marker font. */
.podd-tool .page-content ul.podd-list { margin: 0 0 6pt; padding-left: 20pt; font: inherit; color: inherit; }
.podd-tool .page-content ul.podd-list li { margin: 0 0 4pt; text-align: justify; font: inherit; color: inherit; }
.podd-tool .page-content ul.podd-list li::marker { font: inherit; color: inherit; }
.podd-tool .page-content .title-page { display: flex; flex-direction: column; height: 100%; }
.podd-tool .page-content .title-page > p { flex: 0 0 auto; }
.podd-tool .page-content .title-page .spacer { flex: 1 1 0; }
.podd-tool .page-content b { font-weight: 700; }
.podd-tool .page-content[contenteditable="true"] { outline: 2px solid #2f6feb44; overflow: visible; }
.podd-tool .page-num { text-align: center; font-size: 10.5px; color: #999; margin-top: -14px; }
.podd-tool .page-number {
    position: absolute; right: 7.373mm; bottom: 6mm; z-index: 2;
    font-family: 'GOST type A', 'Times New Roman', Times, serif;
    font-size: 12pt; font-style: normal; color: #111;
  }
.podd-tool .page-content.scheme-page { height: auto !important; min-height: 284.516mm; overflow: visible !important; }
.podd-tool .page-content.scheme-page .scheme-slot { font-style: normal; }
/* Section 10 (автопоезд/сопровождение) diagrams: one per sheet, and the sheet
   (caption + figure) may use at most 80% of the A4 height (297 mm * 0.8 =
   237.6 mm). The SVGs are width:100% with a tall viewBox (the escort ones are
   620x1200 => ~350 mm at full text width), so without a cap the figure spills
   past the sheet -- on screen the page just grows, but in print/PDF the caption
   stayed on one sheet and the picture moved to the next. 205 mm for the figure
   + the page's top padding + up to a 3-line caption stays under 80%; the SVG
   keeps full width and centres the (aspect-preserving) drawing inside. */
.podd-tool .page-content .scheme-slot .podd-scheme-block svg,
.podd-tool .podd-preview-body .scheme-slot .podd-scheme-block svg { max-height: 205mm; }
.podd-tool .page-content .scheme-slot .podd-scheme-block,
.podd-tool .page-content .scheme-change-block { break-inside: avoid; page-break-inside: avoid; }
.podd-tool .page-content .scheme-change-block { font-style: normal; }
.podd-tool .page-content .scheme-change-img-wrap { text-align: center; margin-top: 6pt; position: relative; }
.podd-tool .page-content .scheme-change-img { width: 100%; height: 260mm; object-fit: contain; }
.podd-tool .podd-truck-overlay { position: absolute; inset: 0; pointer-events: none; }
.podd-tool .podd-truck-icon {
    position: absolute;
    width: 10mm;
    cursor: move;
    pointer-events: auto;
    -webkit-user-select: none; user-select: none;
    touch-action: none;
  }
.podd-tool .podd-truck-icon.is-dragging, .podd-tool .podd-truck-icon.is-active { z-index: 25; }
.podd-tool .podd-truck-body { width: 100%; display: block; }
.podd-tool .podd-truck-body .podd-truck-body-svg { width: 100%; height: auto; display: block; overflow: visible; }
.podd-tool .podd-truck-ui {
    position: absolute;
    left: 50%; bottom: 100%;
    transform: translateX(-50%);
    margin-bottom: 4px;
    display: none;
    gap: 2px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 2px;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
    white-space: nowrap;
    z-index: 30;
  }
.podd-tool .podd-truck-icon.is-active .podd-truck-ui { display: inline-flex; }
.podd-tool .podd-truck-ui button {
    position: relative; /* anchors .podd-truck-copied-bubble to THIS button, not some distant positioned ancestor -- see showTruckCopiedBubble */
    width: 22px; height: 22px; padding: 0; border: 1px solid #ccc; background: #fafafa;
    border-radius: 4px; cursor: pointer; font-size: 12px; line-height: 1;
  }
.podd-tool .podd-truck-ui button:hover { background: #eee; }
.podd-tool .podd-truck-lock-btn.is-locked { background: #ffe1a8; border-color: #c98a1f; color: #7a4a00; }
.podd-tool .trucks-lock-hint { font-size: 11.5px; color: #999; margin: -6px 0 10px; }
/* "какая-то анимашка чтобы было понятно что скопировано" -- a small speech
   bubble popping up to the LEFT of whichever button triggered a copy (see
   showTruckCopiedBubble in truck-overlay.js). Its own little triangle
   (::after) points right, back at the button, like a real speech bubble.
   `no-print` (via JS not adding it to any printed content, since these
   buttons/buttons' bubbles only ever exist inside .podd-truck-ui/the step 2
   header toolbar, both already screen-only) needs no extra @media print
   rule here. */
.podd-tool .podd-truck-copied-bubble {
    position: absolute;
    right: 100%; top: 50%;
    background: #222; color: #fff;
    font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 11px; font-style: normal; font-weight: 400;
    padding: 4px 8px; border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 60;
    opacity: 0;
    animation: podd-truck-copied-pop 1.1s ease forwards;
  }
.podd-tool .podd-truck-copied-bubble::after {
    content: '';
    position: absolute;
    left: 100%; top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: #222;
  }
@keyframes podd-truck-copied-pop {
  0%   { opacity: 0; transform: translate(-2px, -50%) scale(.85); }
  15%  { opacity: 1; transform: translate(-8px, -50%) scale(1); }
  75%  { opacity: 1; transform: translate(-8px, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-14px, -50%) scale(.95); }
}
/* "к каждому авто прикрытия/ГИБДД сбоку подпись под 45 градусов" -- a
   sibling of .podd-truck-body (NOT baked into it or its SVG), so the label
   always stays at its own fixed 45° regardless of the vehicle's own `rot`,
   exactly like .podd-truck-ui stays upright regardless of `rot`. Anchored to
   the icon's right edge, vertically centered, then rotated around that
   anchor point. Unlike .podd-truck-ui this one is NOT hidden in @media
   print -- it's meant to appear in the actual generated/printed document,
   not just the on-screen editing toolbar. Sized in mm (like the rest of the
   document's real-world-scaled text) rather than px, so it reads at a
   consistent physical size regardless of how big/small the vehicle icon
   itself has been scaled. */
.podd-tool .podd-truck-label {
    position: absolute;
    left: 100%; top: 50%;
    transform-origin: left center;
    transform: translateY(-50%) rotate(-45deg);
    margin-left: 1.2mm;
    font-family: 'GOST type A', 'Times New Roman', Times, serif;
    font-size: 2.8mm;
    font-style: italic;
    line-height: 1;
    color: #111;
    white-space: nowrap;
    pointer-events: none;
    z-index: 20;
  }
.podd-tool .page-content table.tc-table { width: 100%; border-collapse: collapse; margin: 0 0 6pt; font-size: 12pt; font-style: italic; }
.podd-tool .page-content table.tc-table th, .podd-tool .page-content table.tc-table td { border: 1px solid #000; padding: 2px 7px; vertical-align: top; }
.podd-tool .page-content table.tc-table th.section-title { text-align: center; font-weight: 700; font-size: 13pt; }
.podd-tool .page-content table.tc-table td.label { text-align: left; }
.podd-tool .page-content table.tc-table td.val { text-align: center; min-width: 40px; }
.podd-tool .page-content p.toc-title { text-align: center; font-weight: 700; font-size: 15pt; margin: 0 0 14pt; font-style: normal; }
.podd-tool .page-content .toc-entry { display: flex; align-items: baseline; margin: 0 0 5pt; font-size: 12pt; font-style: normal; }
.podd-tool .page-content .toc-entry .toc-text { flex: 0 1 auto; }
.podd-tool .page-content .toc-entry .toc-dots { flex: 1 1 auto; border-bottom: 1px dotted #555; margin: 0 4px 3px; height: 0; min-width: 6px; }
.podd-tool .page-content .toc-entry .toc-page { flex: 0 0 auto; }
.podd-tool .page-content .rdm-vehicle-scheme { font-style: normal; margin: 8pt 0; width: 100%; }
.podd-tool .page-content .rdm-vehicle-scheme img { width: 100%; height: auto; display: block; }
.podd-tool .page-content .rdm-vehicle-scheme .rdm-scale-wrap { position: relative; overflow: hidden; width: 100%; }
.podd-tool .page-content .rdm-vehicle-scheme iframe { position: absolute; top: 0; left: 0; border: 0; background: #fff; max-width: none !important; }
.podd-tool .page-content .rdm-route-scheme { font-style: normal; margin: 8pt 0; text-align: center; }
.podd-tool .page-content .rdm-route-scheme svg,
.podd-tool .page-content .rdm-route-scheme img { max-width: 100%; height: auto; }
.podd-tool .page-content .rdm-route-scheme ymaps { font-style: normal; }
@media print {
  .podd-tool .panel, .podd-tool .doc-toolbar, .podd-tool .page-num { display: none !important; }
  .podd-tool .podd-truck-ui { display: none !important; }
  .podd-tool { padding: 0; }
  .podd-tool .wrap { display: block; width: auto; }
  .podd-tool .page { box-shadow: none; margin: 0 auto; break-after: page; page-break-after: always; }
  .podd-tool .page:last-child { break-after: auto; page-break-after: auto; }
  @page { size: A4; margin: 0; }
}

/* ===== Wizard shell (new): step nav, progress dots, step-panel show/hide.
   Deliberately additive -- everything above this point is the original
   stylesheet, untouched, and the .wrap/.panel/.btn/.doc-toolbar rules above
   already give the wizard's 2-column layout (left column = one active
   .podd-step at a time, right column = persistent #docOutput) its look for
   free; these rules only add the step-switching + nav-dot chrome. ===== */
.podd-tool .podd-wizard-wrap { align-items: start; }
.podd-tool .podd-wizard-col-left { min-width: 0; }
.podd-tool .podd-wizard-col-right { min-width: 0; display: none; } /* shown by wizard-controller.js on step 3 only */
/* Step 1 has no right-column content to share space with yet (see JS) --
   the original .wrap grid still reserves its 850px second track even
   while that column is display:none, which is what left the form stuck in
   a cramped 420px strip. On step 1 wizard-controller.js adds
   .podd-phase-form to .wrap, switching it to a single wide column instead
   of the 2-column grid, with the form itself capped at 80% width so long
   lines of text/inputs still don't stretch edge-to-edge on very wide
   screens. Step 3 keeps the original 420px-left / rest-right grid
   untouched (no override needed -- that's just the base .wrap rule). Step
   2 lives entirely outside .wrap (see .podd-review below). */
.podd-tool .podd-wizard-wrap.podd-phase-form { display: block; width: 100%; max-width: 1600px; }
.podd-tool .podd-wizard-wrap.podd-phase-form .podd-wizard-col-left { width: 80%; max-width: 1400px; margin: 0 auto; }
@media (max-width: 900px) {
  .podd-tool .podd-wizard-wrap.podd-phase-form .podd-wizard-col-left { width: 100%; }
}
.podd-tool .podd-step { display: none; }
.podd-tool .podd-step.active { display: block; }
.podd-tool .podd-wizard-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid #eee; }
.podd-tool .podd-wizard-actions .btn { flex: 0 0 auto; }
.podd-tool .podd-wizard-actions #generateBtn { flex: 1 1 auto; margin-top: 0; }
.podd-tool #poddDocToolbar { display: none; }
/* The pencil glyph (✎) in editToggleBtn's own label renders as a pale
   yellow/tan colored emoji in some browsers/fonts, which is hard to see on
   the toolbar's near-white background -- the template pairs it with a
   U+FE0E "text presentation" selector to request the plain monochrome
   glyph, and this makes sure the surrounding text color is unambiguously
   black too (belt-and-suspenders for browsers that ignore U+FE0E). */
.podd-tool #poddDocToolbar .btn { color: #000; }
.podd-tool .podd-wizard-nav { width: 1290px; max-width: 100%; margin: 0 auto 20px; display: flex; gap: 4px; }
.podd-tool .podd-wizard-step-dot { flex: 1 1 0; display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #fff; border: 1px solid #e2e2e0; border-radius: 8px; font-size: 12.5px; color: #222; }
.podd-tool .podd-wizard-step-dot .dot { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #eee; color: #888; font-size: 11px; font-weight: 600; flex: 0 0 auto; }
.podd-tool .podd-wizard-step-dot .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #000; font-weight: 500; }
.podd-tool .podd-wizard-step-dot.active { border-color: #2f6feb; }
.podd-tool .podd-wizard-step-dot.active .dot { background: #2f6feb; color: #fff; }
.podd-tool .podd-wizard-step-dot.done .dot { background: #d8ecd8; color: #2f8f2f; }
@media (max-width: 900px) {
  .podd-tool .podd-wizard-step-dot .label { display: none; }
}
@media print {
  .podd-tool .podd-wizard-nav, .podd-tool .podd-wizard-actions { display: none !important; }
}

/* ===== Step 2 "review": merged data-entry + live preview. Full width, no
   left form column at all -- see #poddStep2 in templates/wizard-template.php,
   a sibling of .podd-wizard-wrap (which goToStep() hides entirely,
   display:none, while this is active). Three areas side by side: a narrow
   field column (only the current section's inputs -- see wizard/section-
   preview.js's updateActiveSection()), an always-visible bookmark rail, and
   the continuous preview itself; a small sticky icon pair (edit / download
   .docx) sits to its right. There is no bottom action bar -- the bookmark
   rail is the only explicit navigation, and the single "Сгенерировать
   проект" trigger lives in the always-visible header row instead (see
   .podd-review-head-row below), so it's never gated behind scrolling. ===== */
.podd-tool .podd-review { width: 1500px; max-width: 100%; margin: 0 auto; background: #fff; border: 1px solid #e2e2e0; border-radius: 10px; padding: 16px 20px 20px; }
.podd-tool .podd-review-head-row { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; }
.podd-tool .podd-review-head-row .podd-slideshow-progress { flex: 1 1 auto; margin: 0; }
.podd-tool .podd-review-head-row #poddGenerateProjectBtn { flex: 0 0 auto; margin: 0; }
.podd-tool .podd-slideshow-progress { font-size: 13px; color: #444; background: #f4f6fb; border: 1px solid #dde3f0; border-radius: 8px; padding: 8px 12px; margin: 10px 0 4px; }
.podd-tool .podd-slideshow-progress strong { color: #111; }
.podd-tool .podd-review-body { display: flex; align-items: flex-start; gap: 18px; margin-top: 14px; }

/* ===== Loading state: replaces the whole fields/preview/bookmarks row for
   as long as renderAllSectionsPlain() is (re)building all 15 sections (see
   showReviewLoading()/hideReviewLoading()/updateReviewLoadingProgress() in
   wizard/section-preview.js). Centered in the card, not just one column, so
   it reads as "the project is being prepared" rather than "the fields panel
   is empty". ===== */
/* .podd-review-stage is the positioning context: the loading overlay sits
   ON TOP of (not instead of) the real .podd-review-body -- see the markup
   comment in templates/wizard-template.php for why the real content has to
   stay actually laid out (just visually covered) rather than display:none.
   min-height keeps the overlay a comfortable size even right at the very
   start of the build loop, before .podd-review-body has grown to its full
   (eventually much taller) height. */
.podd-tool .podd-review-stage { position: relative; min-height: 60vh; }
.podd-tool .podd-review-loading { display: none; position: absolute; inset: 0; z-index: 5; background: #fff; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.podd-tool .podd-review-loading.active { display: flex; }
.podd-tool .podd-review-loading-spinner { width: 52px; height: 52px; border-radius: 50%; border: 4px solid #e3e9f8; border-top-color: #2f6feb; animation: podd-review-spin .85s linear infinite; }
@keyframes podd-review-spin { to { transform: rotate(360deg); } }
.podd-tool .podd-review-loading-title { font-size: 15px; font-weight: 600; color: #2c3446; }
.podd-tool .podd-review-loading-sub { font-size: 12.5px; color: #8b95a8; min-height: 16px; }
.podd-tool .podd-review-loading-bar { width: 280px; max-width: 70vw; height: 8px; border-radius: 999px; background: #eef1f8; overflow: hidden; }
.podd-tool .podd-review-loading-bar-fill { display: block; height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, #2f6feb, #6fa1f5); transition: width .25s ease; }

/* Left: only the active section's field group(s) are shown (JS toggles
   display per group -- see updateActiveSection()); reuses the original
   .podd-field-group card look, just one column wide instead of a CSS-column
   masonry grid (there's no need to compact many groups at once anymore --
   only ever 0-3 are visible together). */
.podd-tool .podd-review-fields { flex: 0 0 320px; max-width: 320px; max-height: 78vh; overflow-y: auto; padding-right: 4px; }
.podd-tool .podd-field-group { display: none; background: #fafaf8; border: 1px solid #eee; border-radius: 8px; padding: 12px 14px 14px; margin: 0 0 14px; }
.podd-tool .podd-field-group h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #999; margin: 0 0 8px; }

/* Middle: bookmarks -- one per section (title + all 13 body sections, in
   final document order), click jumps the preview pane to that anchor;
   highlighted to match whichever section is currently active (by click, by
   Back/Forward, or just by scrolling -- see setupSectionObserver()). */
.podd-tool .podd-review-preview { flex: 1 1 auto; min-width: 0; display: flex; gap: 14px; align-items: flex-start; }
.podd-tool .podd-review-bookmarks { flex: 0 0 190px; position: sticky; top: 0; max-height: 78vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.podd-tool .podd-bookmark { text-align: left; background: #fafafa; border: 1px solid #e2e2e0; border-radius: 6px; padding: 6px 9px; font-size: 12px; color: #333; cursor: pointer; }
.podd-tool .podd-bookmark:hover { background: #f0f0f0; }
.podd-tool .podd-bookmark.active { border-color: #2f6feb; background: #eaf1ff; color: #164a9c; font-weight: 600; }

/* Right: the continuous preview itself. Deliberately NOT the A4 "sheet"
   look (.page/.page-content, watermarks, page numbers) that the final
   step 3 document uses -- this step is for checking/editing TEXT, not for
   previewing print layout, so it's just a plain scrollable column of
   readable text, one block per section (.podd-preview-section), each with
   its own anchor id for the bookmarks/Back/Forward controls to target. */
.podd-tool .podd-review-doc-slot { flex: 1 1 auto; min-width: 0; max-height: 82vh; overflow-x: hidden; overflow-y: scroll; border: 1px solid #dfe2e8; border-radius: 8px; padding: 14px 10px; background: #e9ebef; }
/* The A4 sheets are 209.9 mm wide; when the slot is narrower they are shown
   scaled down (fitDocToSlot() in section-preview.js sets the transform on
   #docOutput and the exact size of this wrapper) so there is never a horizontal
   scrollbar. The scale lives on #docOutput itself, never in the exported HTML. */
.podd-tool .podd-doc-scaler { position: relative; margin: 0 auto; }
.podd-tool .podd-doc-scaler > .doc-page-wrap { transform-origin: 0 0; }
.podd-tool .podd-preview-section { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px dashed #eee; scroll-margin-top: 6px; }
.podd-tool .podd-preview-section:last-child { border-bottom: none; margin-bottom: 0; }
/* "верни в шаге 2 шрифт GOST... там roboto" -- this rule already declares the
   right font and, in this stripped-down test harness (no WordPress theme
   loaded at all), verifiably wins: getComputedStyle() on both this element
   and a <p> inside it confirms 'GOST type A' renders, not Roboto/sans-serif
   (see the diagnostic used while fixing this). The likely real-world cause
   is a WordPress theme stylesheet loaded after this one whose reset targets
   this same specificity (same class of bug already called out in the
   .page-content comment below re: bare ul/li/ol resets) -- !important is
   added here as a hard guarantee against exactly that, the way .page-content
   already forces box-sizing/width/height/overflow/padding with !important. */
.podd-tool .podd-preview-body {
    font-family: 'GOST type A', 'Times New Roman', Times, serif !important;
    font-size: 13.5pt !important; font-style: italic !important; line-height: 1.45 !important; color: #111 !important;
  }
.podd-tool .podd-preview-body p { margin: 0 0 8pt; text-align: justify; }
.podd-tool .podd-preview-body p.center { text-align: center; }
.podd-tool .podd-preview-body p.heading { text-align: center; font-weight: 700; margin: 10pt 0 6pt; }
.podd-tool .podd-preview-body p.heading:first-child { margin-top: 0; }
.podd-tool .podd-preview-body b { font-weight: 700; }
.podd-tool .podd-preview-body[contenteditable="true"] { outline: 2px solid #2f6feb44; }
.podd-tool .podd-preview-body table.sign-row { width: 100%; border-collapse: collapse; margin: 0 0 2pt; font-size: 13.5pt; }
.podd-tool .podd-preview-body table.sign-row td { padding: 0; border: none; vertical-align: top; font-size: 13.5pt; }
.podd-tool .podd-preview-body table.sign-row td.sig { text-align: right; white-space: nowrap; }
.podd-tool .podd-preview-body p.sign-cap { text-align: right; font-size: 11.5pt; margin: 0 0 8pt; }
.podd-tool .podd-preview-body ul.podd-list { margin: 0 0 8pt; padding-left: 20pt; font: inherit; color: inherit; }
.podd-tool .podd-preview-body ul.podd-list li { margin: 0 0 4pt; text-align: justify; font: inherit; color: inherit; }
.podd-tool .podd-preview-body ul.podd-list li::marker { font: inherit; color: inherit; }
.podd-tool .podd-preview-body .title-page .spacer { display: block; height: 10pt; }
.podd-tool .podd-preview-body .rdm-vehicle-scheme,
.podd-tool .podd-preview-body .rdm-route-scheme { font-style: normal; margin: 8pt 0; width: 100%; }
.podd-tool .podd-preview-body .rdm-vehicle-scheme img,
.podd-tool .podd-preview-body .rdm-route-scheme img { max-width: 100%; height: auto; }
.podd-tool .podd-preview-body .rdm-route-scheme ymaps { font-style: normal; }
.podd-tool .podd-preview-body .scheme-slot { font-style: normal; }
/* These four mirror .page-content-scoped rules from the ORIGINAL stylesheet
   (lines ~76-78 and ~126-127 above) that only ever matched inside a real
   A4 .page-content box -- .podd-preview-body isn't one, so without a
   .podd-preview-body-scoped copy these silently never applied here. The
   position:relative ones are not cosmetic: the RDM vehicle-scheme iframe
   and the "9." escort/GIBDD/КГТС truck-icon overlay are BOTH absolutely
   positioned (inset:0 / top:0;left:0) expecting this exact wrapper as
   their containing block. Without it, an absolutely positioned element
   with no positioned ancestor anywhere falls back to the page's initial
   containing block -- so the icons/iframe detached from their own
   section entirely and rendered pinned near the top of the whole
   document instead of scrolling along with their own preview section
   ("схемы из РДМ... при скроле остаются на месте"). */
.podd-tool .podd-preview-body .rdm-vehicle-scheme .rdm-scale-wrap { position: relative; overflow: hidden; width: 100%; }
.podd-tool .podd-preview-body .rdm-vehicle-scheme iframe { position: absolute; top: 0; left: 0; border: 0; background: #fff; max-width: none !important; }
.podd-tool .podd-preview-body .scheme-change-block { font-style: normal; }
.podd-tool .podd-preview-body .scheme-change-img-wrap { text-align: center; margin-top: 6pt; position: relative; }
.podd-tool .podd-preview-body .scheme-change-img { width: 100%; height: 260mm; object-fit: contain; }

/* Far right: small sticky icon pair -- step 2's OWN edit/download-docx
   controls (wizard/section-preview.js's toggleReviewEditing/
   proxyDownloadDoc), independent of the original #poddDocToolbar (which
   stays hidden until step 3 -- see goToStep()). Square icon buttons: each
   button is two real elements, not one text string with a hidden prefix
   (an earlier ::first-letter + font-size:0 approach was fragile --
   ::first-letter only matches an actual "letter", and a leading symbol
   character like ✎ doesn't count as one in most browsers, so it matched
   nothing and BOTH buttons rendered completely blank). .podd-icon-glyph
   is the only thing shown, sized and colored explicitly black so it reads
   clearly on a white card regardless of the browser's default emoji
   rendering; .podd-icon-label carries the same text for screen readers
   (and the "title" attribute covers a mouse-hover tooltip) but is visually
   hidden, not removed. */
.podd-tool .podd-review-icons { flex: 0 0 auto; position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; }
.podd-tool .podd-review-icons .btn {
    position: relative; /* anchors .podd-truck-copied-bubble to THIS button -- see showTruckCopiedBubble */
    width: 44px; height: 44px; padding: 0;
    display: flex; align-items: center; justify-content: center;
  }
.podd-tool .podd-review-icons .podd-icon-glyph svg { width: 26px; height: 26px; display: block; }
.podd-tool .podd-review-icons .podd-icon-glyph { font-size: 20px; line-height: 1; color: #000; }
.podd-tool .podd-review-icons .podd-icon-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
@media (max-width: 1100px) {
  .podd-tool .podd-review-body { flex-direction: column; }
  .podd-tool .podd-review-fields, .podd-tool .podd-review-bookmarks { max-width: none; max-height: none; }
  .podd-tool .podd-review-preview { flex-direction: column; width: 100%; }
  .podd-tool .podd-review-doc-slot { max-height: none; }
  .podd-tool .podd-review-icons { flex-direction: row; position: static; }
}

/* ===== Step 2 preview = the real sheets (see wizard/section-preview.js) ===== */
.podd-tool .podd-review-doc-slot .doc-page-wrap { gap: 18px; }
.podd-tool .podd-review-doc-slot .page { box-shadow: 0 1px 6px rgba(0,0,0,.25); }
.podd-tool .podd-review-busy { display: none; margin-left: 12px; font-size: 12px; color: #2f6feb; }
.podd-tool .podd-review-busy.active { display: inline; }
/* the nav dots of earlier steps are links back */
.podd-tool .podd-wizard-step-dot.done { cursor: pointer; }
.podd-tool .podd-wizard-step-dot.done:hover { border-color: #2f6feb; }
/* title page: every direct child keeps its own height (a sign table or the
   .title-sign group must never be squeezed by the flex column) */
.podd-tool .page-content .title-page > * { flex: 0 0 auto; }
.podd-tool .page-content .title-page > .spacer { flex: 1 1 0; }

/* ===== Step 3: two big centred buttons, laid over the covered step-2 preview ===== */
.podd-tool { position: relative; }
.podd-tool .podd-review.podd-covered { pointer-events: none; user-select: none; }
.podd-tool .podd-step.podd-final { display: none; }
.podd-tool .podd-step.podd-final.active {
  display: flex; position: absolute; left: 0; right: 0; bottom: 0; top: 62px; z-index: 40;
  background: #fff; align-items: center; justify-content: center; border-radius: 10px;
  min-height: 60vh;
}
.podd-tool .podd-final-card { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 24px; text-align: center; }
.podd-tool .podd-final-title { font-size: 22px; font-weight: 600; color: #1f2430; }
.podd-tool .podd-final-buttons { display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; }
.podd-tool .podd-final-btn {
  width: 260px; min-height: 210px; padding: 22px 18px; border: 2px solid #cfd6e4; border-radius: 16px; background: #f7f9fd;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; cursor: pointer;
  font-family: inherit; color: #1f2430; transition: transform .12s, box-shadow .12s, border-color .12s, background .12s;
}
.podd-tool .podd-final-btn:hover:not(:disabled) { border-color: #2f6feb; background: #eef4ff; box-shadow: 0 6px 18px rgba(47,111,235,.18); transform: translateY(-2px); }
.podd-tool .podd-final-btn:disabled { opacity: .55; cursor: progress; }
.podd-tool .podd-final-btn.busy { border-color: #2f6feb; opacity: 1; }
.podd-tool .podd-final-ico { width: 64px; height: 64px; border-radius: 14px; background: #2b579a; color: #fff; font-size: 38px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.podd-tool .podd-final-ico-pdf { background: #d93025; font-size: 22px; letter-spacing: .5px; }
.podd-tool .podd-final-label { font-size: 30px; font-weight: 700; }
.podd-tool .podd-final-note { font-size: 12.5px; color: #6b7487; line-height: 1.3; }
.podd-tool .podd-final-status { min-height: 20px; font-size: 14px; color: #44506a; }
@media print { .podd-tool .podd-step.podd-final { display: none !important; } }

/* step 1: download / instruction links in the bottom-left corner of the card */
.podd-tool .podd-step1-links { display: flex; gap: 22px; justify-content: flex-start; margin-top: 18px; font-size: 13.5px; }
.podd-tool .podd-step1-links a { color: #2f6feb; text-decoration: none; border-bottom: 1px dashed rgba(47,111,235,.45); }
.podd-tool .podd-step1-links a:hover { border-bottom-style: solid; }