/* Sentinel v2 - document.css
   Document (Draft): reader typography, margin findings, outline, overview ruler, progress.
   Owned by the 'document' area of the v2 redesign; tokens come from v2/tokens.css.

   Every rule here is scoped under `.app` (or a Draft root inside it), so it wins over styles.css at equal weight because
   this file loads after it, and it reaches no other page. Colours read the v2 tokens when they exist (tokens area) and fall
   back to the spec's own values, so the page is right before and after the tokens land. */

/* ---------------------------------------------------------------- local tokens */
.app {
  --v2d-gutter: 3rem;                  /* the hanging clause-number gutter */
  --v2d-sub: 2.75rem;                  /* a sub-clause's own gutter, under its parent's text edge */
  --v2d-sheet-max: 1040px;             /* THE SHEET IS WIDE (the owner, 2026-10-15): ~900 px of text on a laptop; v2/document.js
                                          caps it to the room the page has */
  --v2d-pad: 64px;                     /* the sheet's side margins */
  --v2d-ease: cubic-bezier(.22, 1, .36, 1);
  --v2d-sev-critical: var(--sev-critical, #9f1239);
  --v2d-sev-high: var(--sev-high, #c2410c);
  --v2d-sev-medium: var(--sev-medium, #a16207);
  --v2d-sev-low: var(--sev-low, #5c6571);
  --v2d-ink-1: var(--ink-1, var(--text-primary));
  --v2d-ink-2: var(--ink-2, var(--text-secondary));
  --v2d-ink-3: var(--ink-3, #5f6874);
  --v2d-line: var(--line-1, var(--border-hairline));
  --v2d-brand: var(--brand, #1a2fe6);
  /* the paper and the desk it lies on: the paper is the theme's card, the desk a step below the page, its edge a hairline of
     ink and its lift the theme's own second elevation - so every theme, light or dark, gets a sheet that reads as one */
  --v2d-paper: var(--surface-card, var(--bg-doc));
  --v2d-desk: color-mix(in srgb, var(--surface-sunken, var(--bg-sunken)) 55%, var(--surface-app, var(--bg-app)));
  --v2d-edge: color-mix(in srgb, var(--v2d-ink-1) 9%, transparent);
  --v2d-lift: 0 1px 2px rgba(26, 35, 48, .05), 0 14px 34px -16px rgba(26, 35, 48, .2);
  --v2d-text: var(--v2d-ink-1);
  /* the reading size: 15/25.5 (the owner: 17 px was too big); the reader's own Typography setting is written inline on .app
     and wins */
  --font-doc-size: 15px;
  --font-doc-line: 1.7;
}
@media (min-width: 1760px) { .app { --v2d-sheet-max: 1120px; } }
.app[data-theme="midnight"], .app[data-theme="eclipse"] {
  --v2d-sev-critical: var(--sev-critical, #ff5c7a);
  --v2d-sev-high: var(--sev-high, #ff9f43);
  --v2d-sev-medium: var(--sev-medium, #e0b64a);
  --v2d-sev-low: var(--sev-low, #9aa1ad);
  --v2d-ink-3: var(--ink-3, #9aa1ad);
  --v2d-brand: var(--brand, #8ea0ff);
  /* at night the desk is the darkest surface and the paper lifts off it; the text is a shade off pure white for long reading */
  --v2d-desk: var(--surface-page, #0b0d12);
  --v2d-edge: rgba(255, 255, 255, .07);
  --v2d-lift: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 18px 44px -18px rgba(0, 0, 0, .75);
  --v2d-text: color-mix(in srgb, var(--v2d-ink-1) 90%, var(--v2d-ink-2));
}

/* ---------------------------------------------------------------- the desk and the sheet */
/* The page under the paper is a desk a step darker than the app, so the sheet reads as a sheet (white on near-white was a
   card on nothing); Side by side gives the parse's half the same desk the original's pages lie on. */
.app .mode-stage:has(> .draft-layout),
.app .draft-compare-parsed { background: var(--v2d-desk); }
/* One block, not a grid: the overlays (outline, ruler, margin cards) hang off a zero-height sticky dock, so they take no
   room in the flow and the text never moves when they change. */
.app .draft-layout {
  display: block;
  position: relative;
  max-width: none;
  --v2d-lpad-t: 28px;
  --v2d-lpad-x: 24px;
  padding: var(--v2d-lpad-t) var(--v2d-lpad-x) 72px;
  min-width: 0;
}
/* THE SHEET (the owner, 2026-10-15: "too narrow ... the previous paper was wider"): as wide as the page allows up to
   --v2d-sheet-max, less the outline's rail and, in Edit, the tool lane (v2/document.js measure writes --v2d-sheet-cap). A
   paper edge, a soft lift off the desk, square-ish corners and real margins. */
.app .draft-layout > .parsed-doc {
  box-sizing: border-box;
  font-size: var(--font-doc-size);
  width: 100%;
  max-width: var(--v2d-sheet-cap, var(--v2d-sheet-max));
  margin: 0 auto;
  padding: 60px var(--v2d-pad) 96px;
  border: 1px solid var(--v2d-edge);
  border-radius: 4px;
  background: var(--v2d-paper);
  box-shadow: var(--v2d-lift);
  color: var(--v2d-text);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}

/* the header: the contract's title set centred in reading case, who it is between, and one strip of what the page holds */
.app .parsed-doc h1.parsed-title {
  font-family: var(--font-doc);
  font-size: 26px;
  line-height: 33px;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-transform: none;
  text-align: center;
  text-wrap: balance;
  max-width: 32em;
  margin: 0 auto 8px;
  color: var(--v2d-ink-1);
}
.app .parsed-doc .parsed-parties {
  max-width: none;
  margin: 0 auto 4px;
  font-size: 14px;
  line-height: 21px;
  color: var(--v2d-ink-2);
}
.app .parsed-doc .parsed-parties .pp-party b { font-weight: 600; color: var(--v2d-ink-1); }
.app .parsed-doc .parsed-manual-parties {
  margin: 0 0 8px;
  max-width: none;
  text-align: start;
  font-size: 15px;
  line-height: 22px;
  font-style: normal;
  color: var(--v2d-ink-2);
}
/* the facts strip: the file it was read from and its size, between two hairlines - one quiet line, never the parser's log */
.app .parsed-doc .parsed-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 4px 0;
  margin: 22px 0 34px;
  padding: 9px 0 8px;
  border-top: 1px solid var(--v2d-line);
  border-bottom: 1px solid var(--v2d-line);
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  color: var(--v2d-ink-3);
}
.app .parsed-doc .parsed-meta > span + span::before { content: "·"; margin: 0 10px; color: var(--v2d-ink-3); opacity: .7; }
.app .parsed-doc .pm-file { font-family: var(--font-mono); font-size: 11.5px; color: var(--v2d-ink-2); overflow-wrap: anywhere; }
/* a column too narrow for the strip on one line (Side by side, a phone): the file on a line of its own, the sizes under it -
   never a line that starts with a separator */
.app .draft-layout[data-v2-justify="off"] .parsed-doc .pm-file { flex-basis: 100%; text-align: center; margin-bottom: 2px; }
.app .draft-layout[data-v2-justify="off"] .parsed-doc .pm-file + span::before { content: none; }

/* body: justified and hyphenated in the sheet's own language (the sheet carries lang=) - a wide column reads as a page, not
   a chat. Not `text-wrap: pretty` here: under justify Chrome spread a clause's LAST line edge to edge ("immediate ...
   effect.") where the block ends in its note marker. A column too narrow to justify cleanly (Side by side, a phone:
   v2/document.js measure, data-v2-justify="off") is set ragged right, and there pretty wrapping is safe. */
.app .parsed-doc .pb {
  font-size: var(--font-doc-size);
  line-height: var(--font-doc-line);
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 2;
  padding: 3px 12px 3px calc(12px + var(--v2d-gutter));
  margin: 4px -12px;
  border-radius: 0 6px 6px 0;
  scroll-margin-top: 72px;
}
.app .parsed-doc .pb-body { font-size: inherit; line-height: inherit; }
/* a paragraph break inside a clause, in Preview (parsed-view.js paragraphBreak): the gap between two clauses, not a whole
   empty line - a definitions list reads as a list, not as double spacing. Edit keeps the empty line the caret sits on. */
.app .parsed-doc .pb-gap { display: block; height: .6em; }
.app .draft-layout[data-v2-justify="off"] .parsed-doc .pb { text-align: start; text-wrap: pretty; }
/* the first block opens the text: the strip above has its own margin, a heading does not add its own to it */
.app .parsed-doc .parsed-blocks > .pb:first-child { margin-top: 0; }
/* the clause number hangs in a fixed gutter, so every line of the clause starts on one edge: the document's own face, its
   lining figures in step, a size below the text and a shade lighter - part of the page, not a code listing */
.app .parsed-doc .pb > .pb-num {
  position: absolute;
  left: 12px;
  top: 3px;
  width: calc(var(--v2d-gutter) - 10px);
  margin: 0;
  padding: 0;
  font-family: var(--font-doc);
  font-size: .9em;
  line-height: calc(var(--font-doc-size) * var(--font-doc-line));
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .01em;
  color: var(--v2d-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  text-align: start;
}
.app .parsed-doc .pb > .pb-num[data-edit-number]:hover { background: none; color: var(--v2d-ink-1); }
/* sub-clauses and bullets are the contract's own words: full ink. A sub-clause's number stands under its parent's text edge
   and its text in a gutter of its own; a bullet one step further in. */
.app .parsed-doc .pb-clause.is-sub {
  margin-left: calc(-12px + var(--v2d-gutter));
  padding-left: calc(12px + var(--v2d-sub));
  font-size: var(--font-doc-size);
  color: var(--v2d-text);
}
.app .parsed-doc .pb-clause.is-sub > .pb-num { width: calc(var(--v2d-sub) - 8px); font-weight: 500; }
.app .parsed-doc .pb-clause.is-bullet {
  margin-left: calc(-12px + var(--v2d-gutter) + var(--v2d-sub));
  padding-left: calc(12px + 1.5rem);
  font-size: var(--font-doc-size);
  color: var(--v2d-text);
}
.app .parsed-doc .pb-clause.is-bullet > .pb-num { width: calc(1.5rem - 6px); color: var(--v2d-ink-3); }
/* headings: capitals of the text face, tracked, over a hairline the width of the text - from the number's edge to the text's
   right edge, not the block's hover box (a background line, so a hover or a landing tint never takes it away); the number in
   the gutter */
.app .parsed-doc .pb-section {
  display: block;
  margin: 34px -12px 12px;
  padding: 4px 12px 8px calc(12px + var(--v2d-gutter));
  font-family: var(--font-doc);
  font-size: calc(var(--font-doc-size) * .9);
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: start;
  color: var(--v2d-ink-1);
  border-bottom: 0;
  background-image: linear-gradient(var(--v2d-line), var(--v2d-line));
  background-repeat: no-repeat;
  background-size: calc(100% - 24px) 1px;
  background-position: 12px 100%;
  text-wrap: balance;
}
.app .parsed-doc .pb-section > .pb-num,
.app .parsed-doc .pb-subsection > .pb-num {
  top: 4px;
  line-height: 1.45;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--v2d-ink-3);
}
.app .parsed-doc .pb-subsection {
  display: block;
  margin: 22px -12px 6px;
  font-size: var(--font-doc-size);
  line-height: var(--font-doc-line);
  font-weight: 650;
  text-align: start;
}
.app .parsed-doc .pb-subsection > .pb-num { line-height: var(--font-doc-line); top: 3px; font-size: .9em; }
.app .parsed-doc .pb-subsection.is-prose { font-weight: 400; margin: 8px -12px 4px; text-align: justify; }
.app .draft-layout[data-v2-justify="off"] .parsed-doc .pb-subsection { text-align: start; }
.app .parsed-doc .pb-appendix { display: block; padding-left: 12px; text-align: start; }
.app .parsed-doc .pb-signature { padding-left: 12px; text-align: start; }
.app .parsed-doc .pb-tag { color: var(--v2d-ink-3); background: transparent; border-color: var(--v2d-line); font-size: 11px; }
.app .parsed-doc.is-preview .pb:hover { background-color: transparent; }
/* the place and date line over a Russian contract: the text's own size, its weight, the place on the text edge and the date
   on the right one */
.app .parsed-doc .pb-doc-place-date {
  margin: 0 0 22px;
  padding-left: calc(var(--v2d-gutter) - 4px);
  font-size: calc(var(--font-doc-size) * .93);
  line-height: 1.5;
  font-weight: 600;
}
/* the date ends on the text edge in Edit too (its 34 px kept room for an align row that now hangs under the line) */
.app .parsed-doc .pb-doc-date { padding-right: 4px; }
/* in a narrow column the place and the date each take the line (side by side, half a phone's width each, "г. Алматы «20»"
   broke from "февраля 2026 г.") */
.app .draft-layout[data-v2-room="narrow"] .parsed-doc .pb-doc-place-date { grid-template-columns: minmax(0, 1fr); gap: 0; }
/* a line the parser read as one cell (the place and the date in one: "г. Алматы «20» февраля 2026 г.") takes the whole line,
   not the half of a two-cell grid - in Side by side it broke inside the date. The empty cell holds nothing to type into. */
.app .parsed-doc .pb-doc-place-date > :is(.pb-doc-place, .pb-doc-date):not([data-seg]) { display: none; }
.app .parsed-doc .pb-doc-place-date:has(> :is(.pb-doc-place, .pb-doc-date):not([data-seg])) { grid-template-columns: minmax(0, 1fr); }
/* Edit: a cell's align row hangs UNDER its own line - the place's under its start, the date's under its end - never over it
   (at the cell's right edge it sat on the end of the date). The line keeps room under it for the row, and stacked in a narrow
   column, between its two cells. */
.app .parsed-doc:not(.is-preview) .pb-doc-place-date { margin-bottom: 28px; }
.app .parsed-doc:not(.is-preview) .pb-doc-place-date > :is(.pb-doc-place, .pb-doc-date) > .pb-align { top: calc(100% - 3px); bottom: auto; }
.app .parsed-doc:not(.is-preview) .pb-doc-place-date > .pb-doc-place > .pb-align { left: 0; right: auto; }
.app .parsed-doc:not(.is-preview) .pb-doc-place-date > .pb-doc-date > .pb-align { left: auto; right: 0; }
.app .draft-layout[data-v2-room="narrow"] .parsed-doc:not(.is-preview) .pb-doc-place-date { row-gap: 24px; }

/* tables: the document's face with its figures in step, ruled like a printed table (a rule over, one under the head, one
   under) - no grid of boxes, no typewriter */
.app .parsed-doc .pb-table-host {
  margin: 10px -12px 16px;
  padding: 4px 12px 6px calc(12px + var(--v2d-gutter));
  background: none;
  border: 0;
  border-radius: 0 6px 6px 0;
}
.app .parsed-doc .pb-table-label {
  margin: 0 0 4px;
  font-family: var(--font-ui);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--v2d-ink-3);
}
.app .parsed-doc.is-preview .pb-table-label { display: none; }
.app .parsed-doc .pb-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1.5px solid color-mix(in srgb, var(--v2d-ink-1) 70%, transparent);
  border-bottom: 1.5px solid color-mix(in srgb, var(--v2d-ink-1) 70%, transparent);
  font-family: var(--font-doc);
  font-size: calc(var(--font-doc-size) * .92);
  line-height: 1.45;
  font-variant-numeric: lining-nums tabular-nums;
  text-align: start;
  hyphens: manual;
}
.app .parsed-doc .pb-table th,
.app .parsed-doc .pb-table td {
  border: 0;
  border-bottom: 1px solid var(--v2d-line);
  padding: 7px 14px 7px 0;
  text-align: start;
  vertical-align: top;
}
.app .parsed-doc .pb-table tr > :last-child { padding-right: 0; }
.app .parsed-doc .pb-table tr:last-child > td { border-bottom: 0; }
.app .parsed-doc .pb-table th {
  background: none;
  border-bottom: 1px solid color-mix(in srgb, var(--v2d-ink-1) 45%, transparent);
  font-weight: 650;
  color: var(--v2d-ink-1);
}

/* ---------------------------------------------------------------- findings in the text */
/* a 3 px severity bar beside every cited clause (the block's own ::before, so nothing is added to the text) - beside the text
   only, not the room a clause takes below it for its note marker (--v2d-note-grow, v2/document.js) */
.app .parsed-doc .pb[data-v2-sev]::before {
  width: 3px;
  top: 6px;
  bottom: calc(6px + var(--v2d-note-grow, 0px));
  left: 0;
  border-radius: 2px;
  background: var(--v2d-bar, transparent);
}
.app .parsed-doc .pb[data-v2-sev="critical"] { --v2d-bar: var(--v2d-sev-critical); }
.app .parsed-doc .pb[data-v2-sev="high"] { --v2d-bar: var(--v2d-sev-high); }
.app .parsed-doc .pb[data-v2-sev="medium"] { --v2d-bar: var(--v2d-sev-medium); }
.app .parsed-doc .pb[data-v2-sev="low"] { --v2d-bar: var(--v2d-sev-low); }
.app .parsed-doc .pb[data-v2-sev]:hover::before { width: 4px; }

/* arriving from a finding: the rule beside the clause DRAWS itself and stays (no pulse, no toast) - in the severity bar's own
   place, which it stands in for while it is there (a rule and a bar side by side read as two marks for one clause) */
.app .parsed-doc .pb.is-v2-landed[data-v2-sev]::before { visibility: hidden; }
.app .parsed-doc .pb.is-v2-landed::after {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: calc(2px + var(--v2d-note-grow, 0px));
  width: 3px;
  border-radius: 2px;
  background: var(--v2d-land, var(--v2d-brand));
  transform-origin: top;
  animation: v2dRuleDraw 420ms var(--v2d-ease) both;
}
.app .parsed-doc .pb.is-v2-landed { background-color: color-mix(in srgb, var(--v2d-land, var(--v2d-brand)) 7%, transparent); }
@keyframes v2dRuleDraw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.app .parsed-doc .pb.is-v2-landed.is-v2-still::after { animation: none; }
/* the clause a margin card is about, while the card is pointed at */
.app .parsed-doc .pb.is-v2-hover { background-color: color-mix(in srgb, var(--v2d-bar, var(--v2d-brand)) 6%, transparent); }
/* the old 2.2 s background pulse is not drawn on the Document any more */
.app .parsed-doc .seg-jump-pulse { animation: none; }

/* evidence quotes, painted by the CSS Custom Highlight API (no DOM change): a light wash of the severity, so a quoted clause
   still reads as the page's text (a whole clause at 16 % read as a marker pen); at night the dark themes' own severity hues */
::highlight(v2d-ev-critical) { background-color: color-mix(in srgb, #9f1239 10%, transparent); }
::highlight(v2d-ev-high) { background-color: color-mix(in srgb, #c2410c 10%, transparent); }
::highlight(v2d-ev-medium) { background-color: color-mix(in srgb, #a16207 11%, transparent); }
::highlight(v2d-ev-low) { background-color: color-mix(in srgb, #5c6571 10%, transparent); }
.app:is([data-theme="midnight"], [data-theme="eclipse"]) ::highlight(v2d-ev-critical) { background-color: color-mix(in srgb, #ff5c7a 15%, transparent); }
.app:is([data-theme="midnight"], [data-theme="eclipse"]) ::highlight(v2d-ev-high) { background-color: color-mix(in srgb, #ff9f43 14%, transparent); }
.app:is([data-theme="midnight"], [data-theme="eclipse"]) ::highlight(v2d-ev-medium) { background-color: color-mix(in srgb, #e0b64a 14%, transparent); }
.app:is([data-theme="midnight"], [data-theme="eclipse"]) ::highlight(v2d-ev-low) { background-color: color-mix(in srgb, #9aa1ad 12%, transparent); }

/* ---------------------------------------------------------------- the dock: overlays that take no room */
.app .v2d-dock {
  position: sticky;
  top: 0;
  height: 0;
  /* the dock spans the layout's whole box (its padding included), from the stage's top edge, so its children are placed
     the same whether it is stuck or not */
  margin: calc(-1 * var(--v2d-lpad-t)) calc(-1 * var(--v2d-lpad-x)) var(--v2d-lpad-t);
  z-index: 7;
  pointer-events: none;
}
.app .v2d-dock > * { pointer-events: auto; }
/* 2 px reading progress, on transform only */
.app .v2d-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  pointer-events: none;
}
.app .v2d-progress > span {
  display: block;
  height: 100%;
  background: var(--v2d-brand);
  transform-origin: 0 50%;
  transform: scaleX(var(--v2d-progress, 0));
}
/* the sticky condensed section heading */
.app .v2d-stickyhead {
  position: absolute;
  top: 0;
  left: var(--v2d-sheet-left, 0px);
  width: var(--v2d-sheet-w, 100%);
  box-sizing: border-box;
  padding: 7px var(--v2d-pad) 7px calc(var(--v2d-pad) + var(--v2d-gutter));
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--v2d-ink-2);
  background: color-mix(in srgb, var(--v2d-paper) 96%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--v2d-line);
  border-radius: 0 0 8px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 160ms var(--v2d-ease), transform 160ms var(--v2d-ease);
  pointer-events: none;
}
.app .v2d-stickyhead.is-on { opacity: 1; transform: none; }
.app .v2d-stickyhead .v2d-sh-num { font-family: var(--font-mono); letter-spacing: 0; margin-right: 10px; color: var(--v2d-ink-3); }

/* the floating outline: a dash rail at rest, titles on hover or focus */
.app .v2d-outline {
  position: absolute;
  top: 18px;
  left: max(0px, calc(var(--v2d-sheet-left, 0px) - 52px));
  max-height: calc(var(--v2d-vh, 600px) - 120px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 6px;
  border-radius: 10px;
  width: 36px;
  transition: width 160ms var(--v2d-ease), background-color 160ms var(--v2d-ease), box-shadow 160ms var(--v2d-ease);
}
/* the rail is drawn only where v2/document.js kept it a column of its own beside the sheet - never over the text */
.app .draft-layout:not([data-v2-rail="on"]) .v2d-outline { display: none; }
.app .v2d-outline:hover,
.app .v2d-outline:focus-within {
  width: 264px;
  overflow-y: auto;
  background: var(--bg-doc);
  box-shadow: 0 0 0 1px var(--v2d-line), 0 10px 32px rgba(15, 20, 30, .14);
}
.app .v2d-ol-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 18px;
  padding: 2px 4px;
  border: 0;
  border-radius: 5px;
  background: none;
  font: inherit;
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 16px;
  color: var(--v2d-ink-3);
  text-align: start;
  cursor: pointer;
  white-space: nowrap;
}
.app .v2d-ol-dash {
  flex: none;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  opacity: .45;
  transition: width 160ms var(--v2d-ease), opacity 160ms var(--v2d-ease);
}
.app .v2d-ol-item.is-current { color: var(--v2d-ink-1); }
.app .v2d-ol-item.is-current .v2d-ol-dash { width: 20px; opacity: 1; background: var(--v2d-brand); }
.app .v2d-ol-text { overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity 120ms var(--v2d-ease); }
.app .v2d-ol-num { font-family: var(--font-mono); font-size: 11.5px; margin-right: 6px; color: var(--v2d-ink-3); }
.app .v2d-outline:hover .v2d-ol-text,
.app .v2d-outline:focus-within .v2d-ol-text { opacity: 1; }
.app .v2d-ol-item:hover { background: var(--bg-soft); color: var(--v2d-ink-1); }
.app .v2d-ol-item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.app .v2d-ol-dot {
  flex: none;
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--v2d-dot, transparent);
}
.app .v2d-outline:not(:hover):not(:focus-within) .v2d-ol-dot { position: absolute; left: 30px; margin: 0; }
.app .v2d-ol-item { position: relative; }
.app .v2d-ol-dot[data-sev="critical"] { --v2d-dot: var(--v2d-sev-critical); }
.app .v2d-ol-dot[data-sev="high"] { --v2d-dot: var(--v2d-sev-high); }
.app .v2d-ol-dot[data-sev="medium"] { --v2d-dot: var(--v2d-sev-medium); }
.app .v2d-ol-dot[data-sev="low"] { --v2d-dot: var(--v2d-sev-low); }

/* the overview ruler on the right edge: section ticks, finding ticks, the viewport window */
.app .v2d-ruler {
  position: absolute;
  top: 0;
  right: var(--v2d-ruler-r, 0px);
  width: 14px;
  height: var(--v2d-vh, 600px);
  cursor: pointer;
  border-left: 1px solid color-mix(in srgb, var(--v2d-line) 70%, transparent);
  background: color-mix(in srgb, var(--bg-pane) 40%, transparent);
}
.app .v2d-ruler-tick {
  position: absolute;
  left: 3px;
  right: 3px;
  height: 1px;
  background: var(--v2d-ink-3);
  opacity: .35;
  pointer-events: none;
}
.app .v2d-ruler-tick.is-finding { height: 3px; left: 2px; right: 2px; border-radius: 1px; opacity: 1; }
.app .v2d-ruler-tick[data-sev="critical"] { background: var(--v2d-sev-critical); }
.app .v2d-ruler-tick[data-sev="high"] { background: var(--v2d-sev-high); }
.app .v2d-ruler-tick[data-sev="medium"] { background: var(--v2d-sev-medium); }
.app .v2d-ruler-tick[data-sev="low"] { background: var(--v2d-sev-low); }
.app .v2d-ruler-win {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--v2d-win-h, 40px);
  transform: translateY(var(--v2d-win-y, 0px));
  background: color-mix(in srgb, var(--v2d-ink-1) 10%, transparent);
  border-radius: 2px;
  pointer-events: none;
}
.app .draft-layout[data-v2-room="narrow"] .v2d-ruler { width: 8px; }

/* compact margin cards aligned to their clauses (>= 1280 with room) */
.app .v2d-margin {
  position: absolute;
  top: 0;
  left: calc(var(--v2d-sheet-left, 0px) + var(--v2d-sheet-w, 0px) + var(--v2d-lane, 0px) + 12px);
  width: var(--v2d-cards-w, 240px);
  height: 0;
  z-index: 4;
}
.app .draft-layout[data-v2-room="narrow"] .v2d-margin { display: none; }
.app .v2d-card {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--v2d-line);
  border-radius: 8px;
  background: var(--bg-doc);
  font: inherit;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 18px;
  color: var(--v2d-ink-1);
  text-align: start;
  cursor: pointer;
  transition: border-color 120ms var(--v2d-ease), box-shadow 120ms var(--v2d-ease);
}
.app .v2d-card:hover { border-color: var(--v2d-card-sev, var(--v2d-ink-3)); box-shadow: 0 4px 14px rgba(15, 20, 30, .08); }
.app .v2d-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.app .v2d-card-glyph { flex: none; width: 12px; color: var(--v2d-card-sev, var(--v2d-ink-3)); font-size: 11px; line-height: 18px; text-align: center; }
.app .v2d-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.app .v2d-card-more { flex: none; margin-left: auto; font-size: 11px; color: var(--v2d-ink-3); }
/* beside the sheet, a card's title and its "+n" are the card's own line (in a pin, its panel) */
.app .v2d-card-text { display: contents; }
.app .v2d-card[data-sev="critical"] { --v2d-card-sev: var(--v2d-sev-critical); }
.app .v2d-card[data-sev="high"] { --v2d-card-sev: var(--v2d-sev-high); }
.app .v2d-card[data-sev="medium"] { --v2d-card-sev: var(--v2d-sev-medium); }
.app .v2d-card[data-sev="low"] { --v2d-card-sev: var(--v2d-sev-low); }
.app .v2d-card.is-hot { border-color: var(--v2d-card-sev); }

/* NO ROOM FOR THE CARDS BESIDE A WIDE SHEET: they fold into pins in the sheet's own right margin (data-v2-room="pins") - a
   severity glyph level with its clause's first line, clear of the text and of the block's note marker. Pointed at or
   focused, the pin opens its panel UNDER it (over it near the bottom of the view: v2/document.js pinFlip), reaching out
   over the desk as far as the page allows, so it hides as little text as it can and never the clause's first line - which
   a panel opened leftwards from the pin did. A click opens the finding as the card does. The panel is only faded out, never
   hidden, so a screen reader hears the pin's title. */
.app .draft-layout[data-v2-room="pins"] .v2d-margin {
  left: calc(var(--v2d-sheet-left, 0px) + var(--v2d-sheet-w, 0px) - var(--v2d-pad) / 2 - 13px);
  width: 26px;
}
.app .draft-layout[data-v2-room="pins"] .v2d-card {
  left: auto;
  right: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  justify-content: center;
  align-items: center;
  border-radius: 13px;
  border-color: color-mix(in srgb, var(--v2d-card-sev, var(--v2d-ink-3)) 35%, var(--v2d-line));
  background: var(--v2d-paper);
  transition: box-shadow 160ms var(--v2d-ease), border-color 120ms var(--v2d-ease);
}
.app .draft-layout[data-v2-room="pins"] .v2d-card .v2d-card-glyph { width: auto; font-size: 10px; line-height: 1; }
.app .draft-layout[data-v2-room="pins"] .v2d-card:hover,
.app .draft-layout[data-v2-room="pins"] .v2d-card:focus-visible,
.app .draft-layout[data-v2-room="pins"] .v2d-card.is-hot {
  border-color: var(--v2d-card-sev, var(--v2d-ink-3));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--v2d-card-sev, var(--v2d-ink-3)) 14%, transparent);
  z-index: 6;
}
.app .draft-layout[data-v2-room="pins"] .v2d-card-text {
  position: absolute;
  top: calc(100% + 6px);
  right: calc(-1 * (var(--v2d-pin-out, 0px) + var(--v2d-pad) / 2 - 13px));
  box-sizing: border-box;
  width: 232px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 10px 8px;
  border: 1px solid color-mix(in srgb, var(--v2d-card-sev, var(--v2d-ink-3)) 55%, var(--v2d-line));
  border-radius: 8px;
  background: var(--v2d-paper);
  box-shadow: var(--e3, 0 12px 32px -10px rgba(15, 20, 30, .28));
  white-space: normal;
  text-align: start;
  opacity: 0;
  transform: translateY(-3px);
  pointer-events: none;
  transition: opacity 140ms var(--v2d-ease), transform 140ms var(--v2d-ease);
}
.app .draft-layout[data-v2-room="pins"] .v2d-card-text .v2d-card-title { -webkit-line-clamp: 3; }
/* a bridge over the gap between the pin and its panel: the pointer on its way down keeps the panel open */
.app .draft-layout[data-v2-room="pins"] .v2d-card-text::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.app .draft-layout[data-v2-room="pins"] .v2d-card.is-v2-up .v2d-card-text { top: auto; bottom: calc(100% + 6px); transform: translateY(3px); }
.app .draft-layout[data-v2-room="pins"] .v2d-card.is-v2-up .v2d-card-text::before { top: auto; bottom: -8px; }
.app .draft-layout[data-v2-room="pins"] .v2d-card:hover .v2d-card-text,
.app .draft-layout[data-v2-room="pins"] .v2d-card:focus-visible .v2d-card-text { opacity: 1; transform: none; pointer-events: auto; }
/* ---------------------------------------------------------------- the way back */
/* It no longer floats over the text (a fixed pill at the bottom centre sat on the paragraph being read): it is the right end
   of the sticky heading bar, which stays on while there is somewhere to go back to - a bar over the page's top edge, never
   over a line of the contract. (Placed there by v2/document.js; drawn in the layout only for the instant before.) */
.app .draft-return-pill.v2d-return { position: static; transform: none; animation: none; box-shadow: none; }
.app .v2d-stickyhead { display: flex; align-items: center; gap: 12px; }
.app .v2d-stickyhead .v2d-sh-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.app .v2d-stickyhead.has-return { opacity: 1; transform: none; pointer-events: auto; }
.app .v2d-stickyhead .draft-return-pill.v2d-return {
  margin-left: auto;
  flex: none;
  padding: 3px 10px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
  text-transform: none;
}

/* ---------------------------------------------------------------- notes */
/* a note marker that is hidden is out of the tab order (app.js sets tabindex); the one with notes, or of the block being
   read, shows. On a touch screen the tapped block shows its own. */
.app .parsed-doc .pb.is-v2-active > .seg-comment-marker { opacity: 1; }
/* on a wide sheet the marker stands in the right margin, on the clause's last line and in the pins' column - never over the
   end of a full last line. A clause with a pin keeps it there too when it runs to two lines or more (the pin by its first
   line, the marker a step low by its last: v2/document.js placeCards marks it data-v2-multiline). */
.app .draft-layout:is([data-v2-room="pins"], [data-v2-room="cards"]) .parsed-doc .pb > .seg-comment-marker {
  right: auto;
  left: calc(100% + var(--v2d-pad) / 2 - 12px);
  bottom: calc(3px + (var(--font-doc-size) * var(--font-doc-line) - 22px) / 2);
  transform: translateX(-50%);
}
.app .draft-layout[data-v2-room="pins"]:not(.draft-compare-parsed *) .parsed-doc .pb[data-v2-sev][data-v2-multiline] > .seg-comment-marker { bottom: calc((var(--font-doc-size) * var(--font-doc-line) - 22px) / 2); }
/* A ONE-line clause with a pin has one row for the pin and the marker, and the column cannot hold both: placeCards (D.stack)
   says where the marker goes (data-v2-note) - "side": beside the pin, on the clause's row, where the line ends short of it;
   "under": under the pin, ending before the next clause (a clause with notes beside a full line takes that room below its
   line); else ("corner", one shown only to add a note) the clause's corner. Never level with the next clause's line, where
   it read as that clause's and fell on that clause's own marker. */
.app .draft-layout[data-v2-room="pins"] .parsed-doc .pb[data-v2-sev]:not([data-v2-multiline]) > .seg-comment-marker { left: auto; right: 8px; bottom: 6px; transform: none; }
.app .draft-layout[data-v2-room="pins"]:not(.draft-compare-parsed *) .parsed-doc .pb[data-v2-sev][data-v2-note="side"]:not([data-v2-multiline]) > .seg-comment-marker {
  left: auto;
  right: var(--v2d-note-right, -3px);
  top: var(--v2d-note-top, 2px);
  bottom: auto;
  transform: none;
}
.app .draft-layout[data-v2-room="pins"]:not(.draft-compare-parsed *) .parsed-doc .pb[data-v2-sev][data-v2-note="under"]:not([data-v2-multiline]) > .seg-comment-marker {
  left: calc(100% + var(--v2d-pad) / 2 - 12px);
  right: auto;
  top: var(--v2d-note-top, 34px);
  bottom: auto;
  transform: translateX(-50%);
}
/* a marker in the column that the one above would have met moves down, still by its own clause (D.stack: pushed) */
.app .draft-layout[data-v2-room="pins"]:not(.draft-compare-parsed *) .parsed-doc .pb[data-seg][data-v2-note="pushed"] > .seg-comment-marker { top: var(--v2d-note-top); bottom: auto; }

/* ---------------------------------------------------------------- Edit: controls on ONE block */
/* The toolbars of the blocks that are not hovered or holding the caret are not just transparent - they are hidden, so they
   are out of the tab order and the accessibility tree (1,056 invisible buttons before). */
.app .parsed-doc:not(.is-preview) .pb > .pb-toolbar,
.app .parsed-doc:not(.is-preview) .pb > .pb-align,
.app .parsed-doc:not(.is-preview) .pb > .pb-add-after {
  visibility: hidden;
  transition: opacity 120ms var(--v2d-ease), transform 120ms var(--v2d-ease), visibility 0s linear 120ms;
}
.app .parsed-doc:not(.is-preview) .pb:hover > .pb-toolbar,
.app .parsed-doc:not(.is-preview) .pb:focus-within > .pb-toolbar,
.app .parsed-doc:not(.is-preview) .pb:hover > .pb-align,
.app .parsed-doc:not(.is-preview) .pb:focus-within > .pb-align,
.app .parsed-doc:not(.is-preview) .pb:hover > .pb-add-after,
.app .parsed-doc:not(.is-preview) .pb:focus-within > .pb-add-after {
  visibility: visible;
  transition: opacity 120ms var(--v2d-ease), transform 120ms var(--v2d-ease), visibility 0s;
}
.app .parsed-doc:not(.is-preview) .pb:focus-within > .pb-toolbar,
.app .parsed-doc:not(.is-preview) .pb:focus-within > .pb-align { opacity: 1; pointer-events: auto; transform: none; }
.app .parsed-doc.is-typing .pb:has(> .pb-body:focus) > .pb-toolbar,
.app .parsed-doc.is-typing .pb:has(> .pb-body:focus) > .pb-align { opacity: 0; pointer-events: none; }
/* the align row keeps to the block's bottom-LEFT, clear of the note marker at the bottom-right */
.app .parsed-doc:not(.is-preview) .pb > .pb-align { right: auto; left: calc(12px + var(--v2d-gutter)); }
/* Edit gives a block back the bottom padding the base had (5 px), so the "+" under its middle stays off the last line */
.app .parsed-doc:not(.is-preview) .pb:has(> .pb-align) { padding-bottom: 5px; }
/* WITH ROOM BESIDE THE SHEET, the toolbar and the align row stand in a lane in the right margin - never over a line. The
   toolbar is a column at the block's top; the align row stands under it, as wide, wherever the toolbar ends (its height is
   the block type's: CSS anchor positioning, each block scoping its own toolbar as the anchor). Over a line, the row hid
   the first words of the clause being edited ("The Sunnlier"): the last line of a one-line clause is its only line. */
.app .draft-layout[data-v2-lane="on"] .parsed-doc:not(.is-preview) .pb { anchor-scope: --v2d-tools; }
.app .draft-layout[data-v2-lane="on"] .parsed-doc:not(.is-preview) .pb > .pb-toolbar {
  top: 0;
  right: auto;
  left: calc(100% + var(--v2d-pad) - 12px + 10px);
  box-sizing: border-box;
  width: 86px;
  flex-direction: column;
  align-items: stretch;
  gap: 1px;
  padding: 3px;
  transform: translateX(-2px);
  anchor-name: --v2d-tools;
}
.app .draft-layout[data-v2-lane="on"] .parsed-doc:not(.is-preview) .pb:hover > .pb-toolbar,
.app .draft-layout[data-v2-lane="on"] .parsed-doc:not(.is-preview) .pb:focus-within > .pb-toolbar { transform: none; }
.app .draft-layout[data-v2-lane="on"] .parsed-doc:not(.is-preview) .pb > .pb-toolbar .pb-tool-sep,
.app .draft-layout[data-v2-lane="on"] .parsed-doc:not(.is-preview) .pb > .pb-toolbar .pb-tool-spacer { display: none; }
/* the type in the lane's head: the name alone, as wide as the lane lets it ("Заголовок" whole); a longer one ends in an ellipsis
   and is read whole in the button's title */
.app .draft-layout[data-v2-lane="on"] .parsed-doc:not(.is-preview) .pb > .pb-toolbar .pb-type-pick { justify-content: center; min-width: 0; padding: 3px 6px; }
.app .draft-layout[data-v2-lane="on"] .parsed-doc:not(.is-preview) .pb > .pb-toolbar .pb-type-pick > svg { display: none; }
.app .draft-layout[data-v2-lane="on"] .parsed-doc:not(.is-preview) .pb > .pb-toolbar .pb-type-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app .draft-layout[data-v2-lane="on"] .parsed-doc:not(.is-preview) .pb:has(> .seg-comment-marker) > .pb-toolbar { right: auto; }
.app .draft-layout[data-v2-lane="on"] .parsed-doc:not(.is-preview) .pb > .pb-align {
  position-anchor: --v2d-tools;
  top: calc(anchor(bottom) + 4px);
  left: anchor(left);
  right: auto;
  bottom: auto;
  box-sizing: border-box;
  width: 86px;
  justify-content: space-between;
  padding: 2px 3px;
}
/* a browser without anchor positioning: the row heads the lane and the toolbar stands under it (the row's height is fixed) */
@supports not (anchor-name: --v2d-tools) {
  .app .draft-layout[data-v2-lane="on"] .parsed-doc:not(.is-preview) .pb > .pb-align { top: 0; left: calc(100% + var(--v2d-pad) - 12px + 10px); }
  .app .draft-layout[data-v2-lane="on"] .parsed-doc:not(.is-preview) .pb:has(> .pb-align) > .pb-toolbar { top: 29px; }
}
/* the margin cards make way for the lane in Edit (v2/document.js geometry: LANE) */
.app .draft-layout:not([data-draft-preview]) { --v2d-lane: 100px; }

/* no lane beside the sheet, with a mouse: the toolbar stays in its block's corner, but never wider than the block */
.app .draft-layout:not([data-v2-lane="on"]) .parsed-doc:not(.is-preview) .pb > .pb-toolbar { max-width: calc(100% - 24px); overflow-x: auto; }
/* ...and the align row hangs below the block's last line, in a bottom padding grown to hold its top half, its bottom half
   in the gap before the next block - clear of both lines (25 px of row: 12 inside the block, 13 below it) */
.app .draft-layout:not([data-v2-lane="on"]) .parsed-doc:not(.is-preview) .pb:has(> .pb-align) { padding-bottom: 10px; }
.app .draft-layout:not([data-v2-lane="on"]) .parsed-doc:not(.is-preview) .pb > .pb-align { bottom: -13px; }
/* a phone, or a touch screen: the block holding the caret gets its controls in a bar at the bottom of the screen - the
   line being edited is never under them; a hover alone (an emulated one) shows nothing. (No lane on a touch screen:
   v2/document.js measure. The .draft-layout in each selector lets these win over the corner rules above.) */
@media (pointer: coarse), (max-width: 760px) {
  .app .draft-layout .parsed-doc:not(.is-preview) .pb:focus-within > .pb-toolbar {
    position: fixed; top: auto; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); width: auto;
    max-width: none; justify-content: space-between; overflow-x: auto; z-index: 60; transform: none;
    flex-direction: row; box-shadow: 0 8px 28px rgba(15, 20, 30, .22);
  }
  .app .draft-layout .parsed-doc:not(.is-preview) .pb:hover:not(:focus-within) > .pb-toolbar { visibility: hidden; opacity: 0; pointer-events: none; }
  /* the align row rides just above that bar, so it never sits on the block's last line either */
  .app .draft-layout .parsed-doc:not(.is-preview) .pb:focus-within > .pb-align { position: fixed; top: auto; left: 8px; right: auto; bottom: calc(60px + env(safe-area-inset-bottom, 0px)); z-index: 60; }
  .app .draft-layout .parsed-doc:not(.is-preview) .pb:hover:not(:focus-within) > .pb-align { visibility: hidden; opacity: 0; pointer-events: none; }
}
/* touch: the block holding the caret shows its controls (no hover on a phone) and the hit areas grow */
@media (pointer: coarse) {
  .app .parsed-doc:not(.is-preview) .pb:focus-within > .pb-toolbar { opacity: 1; pointer-events: auto; visibility: visible; }
  .app .parsed-doc .pb-tool { min-width: 34px; min-height: 34px; }
  .app .parsed-doc .seg-comment-marker { padding: 6px 10px; }
  .app .v2d-ruler { width: 10px; }
}

/* ---------------------------------------------------------------- Side by side */
/* the parse's half: a sheet with narrower margins (set on the layout, so the sticky heading and the pins read them too) */
.app .draft-compare-parsed .draft-layout { --v2d-lpad-x: 20px; --v2d-pad: 36px; }
.app .draft-compare-parsed .draft-layout > .parsed-doc { padding-top: 44px; }
/* the half's 36 px margin holds a pin but not a note marker with its count: the marker keeps to its block's corner */
.app .draft-compare-parsed .draft-layout .parsed-doc .pb > .seg-comment-marker { left: auto; right: 8px; bottom: 6px; transform: none; }
/* a sheet too narrow even for pins (Side by side in a laptop window): the margins and the number gutter a phone's, so a line
   keeps its words. Only what sits inside the sheet changes - never the room around it, which decided "narrow" */
.app .draft-layout[data-v2-room="narrow"] { --v2d-pad: 22px; --v2d-gutter: 2.3rem; --v2d-sub: 2.1rem; }
/* the scroll-together toggle means something only beside the parse: the original's view is kept across the switch to
   Original alone, and the toggle went with it */
.app .draft-original .v2d-sync { display: none; }
.app .v2d-sync {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--v2d-line);
  border-radius: 999px;
  background: var(--bg-pane);
  font: inherit;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--v2d-ink-2);
  cursor: pointer;
}
.app .v2d-sync[aria-pressed="true"] { color: var(--v2d-brand); border-color: color-mix(in srgb, var(--v2d-brand) 45%, var(--v2d-line)); }
.app .v2d-sync:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* in a narrow pane the toggle is its icon (its name stays its title) */
@container pv (max-width: 640px) { .app .v2d-sync span { display: none; } }

/* ---------------------------------------------------------------- phones */
/* a phone: the sheet IS the page - edge to edge, no desk around it, no lift - with margins a thumb's width and a narrower
   number gutter, so a line keeps ~40 characters */
@media (max-width: 760px) {
  .app { --v2d-gutter: 2.3rem; --v2d-sub: 2.1rem; }
  .app .mode-stage .draft-layout { --v2d-lpad-t: 0px; --v2d-lpad-x: 0px; --v2d-pad: 18px; padding: 0 0 56px; }
  .app .mode-stage:has(> .draft-layout) { background: var(--v2d-paper); }
  .app .draft-layout > .parsed-doc { padding: 28px var(--v2d-pad) 64px; border: 0; border-radius: 0; box-shadow: none; }
  .app .parsed-doc h1.parsed-title { font-size: 23px; line-height: 29px; }
  .app .parsed-doc .parsed-meta { margin: 16px 0 24px; }
  .app .parsed-doc .pb-clause.is-sub { margin-left: calc(-12px + 1rem); }
  .app .parsed-doc .pb-clause.is-bullet { margin-left: calc(-12px + 1rem + var(--v2d-sub)); }
  .app .parsed-doc .pb-section { margin-top: 28px; }
}
@media print {
  .app .v2d-dock, .app .v2d-margin, .app .draft-return-pill { display: none !important; }
}