/* The sample uses the same section structure as the real CV, but its headings
   are visual labels rather than form-navigation controls. */
.cv-document.is-example {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.cv-document.is-example::before {
  content: "მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი\A\Aმაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი\A\Aმაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი\A\Aმაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი\A\Aმაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი\A\Aმაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი\A\Aმაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი\A\Aმაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი\A\Aმაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი\A\Aმაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი   •   მაგალითი";
  position: absolute;
  inset: -16%;
  z-index: 0;
  display: block;
  pointer-events: none;
  overflow: hidden;
  transform: rotate(-28deg);
  transform-origin: center;
  white-space: pre;
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  line-height: 2.8;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  word-spacing: 0.25em;
  text-align: center;
  color: rgba(47, 111, 94, 0.11);
}

.cv-document.is-example .cv-section--empty,
.app-main.is-finished:not(.is-picking) .cv-section--empty {
  /* An empty heading on screen is a place to click and fill; on the sample,
     and on a CV that is ready (src/scan/finish.js), it only reads as a
     section left unfinished. "რამის შეცვლა" (is-picking) brings them back,
     as the places to tap. */
  display: none;
}

.cv-document.is-example > * {
  position: relative;
  z-index: 1;
}

/* Which sample: a rating's or an officer's (maritime-preview.js
   sampleSwitch). Screen UI over the sheet, in the interface's own type. */
.cv-example-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

.cv-example-switch-label {
  color: var(--text-secondary);
}

.cv-example-option {
  min-height: var(--touch-min);
  padding: 0 var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.cv-example-option[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  font-weight: var(--weight-semibold);
}

/* The sample giving way to the customer's own document, and back again after a
   reset. docs/DESIGN_SYSTEM.md §Motion asks for it — "example → real CV uses a
   short opacity transition" — and it had never once run: the rule that used to
   live here was written for a class nothing ever added, so the swap was always
   instant.
   
   An animation rather than a transition, and `both` rather than a JS-driven
   fade-out/swap/fade-in, for the same reason .step-reveal is built this way:
   if the script stops between adding the class and removing it, the animation
   still finishes at opacity 1. An invisible document is the one failure this
   product cannot afford, since the document *is* the product.

   Opacity only. "Avoid animating large heights/layout" rules out the rest, and
   the sheet must never move under someone reading it. */
.cv-document.is-switching {
  animation: document-switch 180ms ease-out both;
}

@keyframes document-switch {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Second line of defence. render() skips the class entirely when motion is not
   wanted, so this only matters if that check is ever lost. */
@media (prefers-reduced-motion: reduce) {
  .cv-document.is-switching {
    animation: none;
  }
}

@media print {
  /* The sample exists only to sell the editor on screen. Never let it become
     downloadable CV content, even if somebody explicitly confirms an empty
     document in the payment flow. */
  .cv-document.is-example,
  .cv-document.is-example::before {
    display: none !important;
  }
}