/* ============================================================
   Policy parse visual — sample policy page and extracted fields.
   Motion is stroke weight, single-axis wipes and slides;
   nothing crossfades. Hidden "before" states only apply once
   policy-parse.js adds .is-js, so no-JS renders the finished state.
   ============================================================ */

.v-swiss .pp {
  --pp-ease-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
  --pp-ease-entrance: cubic-bezier(0, 0, 0.38, 0.9);
  --pp-ease-exit: cubic-bezier(0.2, 0, 1, 0.9);
  --pp-scan: 1600ms;
  --pp-sheet: 400ms;
  --pp-region: var(--sw-blue-tint-40);
  --pp-field: var(--sw-blue);
  --pp-flag: var(--sw-ink);
  /* Flag color lives here only; the rest of the site stays blue. */
  --pp-denied: #A4262C;

  margin: 0;
  min-width: 0;
}

/* ---- tabs -------------------------------------------------- */
.v-swiss .pp__tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  column-gap: 16px;
}
.v-swiss .pp__tab {
  appearance: none;
  margin: 0;
  padding: 10px 0 12px;
  border: 0;
  border-top: 2px solid var(--sw-rule);
  background: none;
  text-align: left;
  font-family: var(--sw-text);
  font-size: var(--sw-fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sw-ink-50);
  cursor: pointer;
  transition: border-color 0.18s var(--pp-ease-standard), color 0.18s var(--pp-ease-standard);
}
.v-swiss .pp__tab:hover { color: var(--sw-ink); }
.v-swiss .pp__tab[aria-selected="true"] {
  border-top-color: var(--sw-blue);
  color: var(--sw-ink);
}
.v-swiss .pp__tab:focus-visible {
  outline: 2px solid var(--sw-blue);
  outline-offset: 2px;
}
/* ---- panels ------------------------------------------------ */
.v-swiss .pp__viewport {
  display: grid;
  overflow: clip;
  padding-top: 12px;
}
.v-swiss .pp__panel {
  grid-area: 1 / 1;
  min-width: 0;
}
.v-swiss .pp.is-js .pp__panel:not(.is-current):not(.is-leaving) {
  visibility: hidden;
}

/* ---- document ---------------------------------------------- */
/* Page and results share one cell, so the frame is always at least as
   tall as the results sheet even where the page renders short. */
.v-swiss .pp__doc {
  display: grid;
  overflow: clip;
  border: 1px solid var(--sw-ink);
  background: #fff;
}
.v-swiss .pp__sheet,
.v-swiss .pp__results {
  grid-area: 1 / 1;
}
.v-swiss .pp__sheet {
  position: relative;
  align-self: start;
}
.v-swiss .pp__page {
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 7;
}
.v-swiss .pp__overlay {
  position: absolute;
  inset: 0;
}
.v-swiss .pp__region {
  position: absolute;
  border: 1px solid var(--pp-region);
}
.v-swiss .pp__region--field {
  border-width: 2px;
  border-color: var(--pp-field);
}
.v-swiss .pp__region--field.is-flagged { border-color: var(--pp-flag); }
/* Tags sit in the page's left margin so they never cover adjacent rows. */
.v-swiss .pp__tag {
  position: absolute;
  top: -2px;
  right: calc(100% + 2px);
  min-width: 1.5em;
  padding: 2px 4px;
  background: var(--pp-field);
  color: #fff;
  font-size: var(--sw-fs-label);
  font-weight: 700;
  font-style: normal;
  line-height: 1.2;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.v-swiss .pp:not(.is-js) .pp__region--field.is-flagged .pp__tag,
.v-swiss .pp.is-js .is-judged .pp__region--field.is-flagged .pp__tag {
  background: var(--pp-flag);
}
.v-swiss .pp__scan { display: none; }

/* ---- results sheet ------------------------------------------ */
.v-swiss .pp__results {
  position: relative;
  z-index: 1;
  align-self: end;
  border-top: 1px solid var(--sw-ink);
  background: var(--sw-paper);
}
.v-swiss .pp__results-label {
  margin: 0;
  padding: 12px 20px 0;
  font-size: var(--sw-fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sw-ink-50);
}
.v-swiss .pp__fields {
  margin: 0;
  padding: 4px 20px 8px;
}
.v-swiss .pp__field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  column-gap: 16px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--sw-rule);
}
.v-swiss .pp__field:last-child { border-bottom: 0; }
.v-swiss .pp__field dt {
  font-size: var(--sw-fs-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--sw-ink);
}
.v-swiss .pp__field dd {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--sw-fs-body);
  line-height: 1.4;
  color: var(--sw-ink);
}
.v-swiss .pp__mark {
  flex: none;
  display: inline-flex;
  align-self: center;
  color: var(--sw-blue);
}
.v-swiss .pp__field.is-flagged .pp__mark { color: var(--pp-denied); }

/* ============================================================
   Sequence states (JS only). The page starts bare; the results
   sheet slides up over it once the scan has finished.
   is-scanning → is-scanned → field.is-found → is-shown → is-judged
   ============================================================ */
.v-swiss .pp.is-js .pp__region { border-width: 0; }
.v-swiss .pp.is-js .is-scanning .pp__region {
  border-width: 1px;
  border-color: var(--pp-region);
  transition: border-width 0s linear calc(var(--pp-scan) * var(--y));
}
.v-swiss .pp.is-js .pp__region--field.is-found {
  border-width: 2px;
  border-color: var(--pp-field);
  transition: border-color 0.18s var(--pp-ease-standard);
  animation: pp-stroke 0.3s var(--pp-ease-standard);
}
.v-swiss .pp.is-js .is-judged .pp__region--field.is-flagged { border-color: var(--pp-flag); }

/* Tags wipe in from the box edge outward (right to left). */
.v-swiss .pp.is-js .pp__tag { clip-path: inset(0 0 0 100%); }
.v-swiss .pp.is-js .pp__region--field.is-found .pp__tag {
  clip-path: inset(0);
  transition: clip-path 0.2s var(--pp-ease-entrance) 0.1s;
}

@keyframes pp-stroke {
  0% { border-width: 1px; }
  45% { border-width: 4px; }
  100% { border-width: 2px; }
}

.v-swiss .pp.is-js .pp__scan {
  display: block;
  position: absolute;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}
.v-swiss .pp.is-js .pp__scan i {
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  margin-top: -1px;
  background: var(--sw-blue);
}
.v-swiss .pp.is-js .is-scanning:not(.is-scanned) .pp__scan {
  visibility: visible;
  transform: translateY(100%);
  transition: transform var(--pp-scan) linear;
}

.v-swiss .pp.is-js .pp__results {
  visibility: hidden;
  transform: translateY(100%);
  transition: transform var(--pp-sheet) var(--pp-ease-exit), visibility 0s linear var(--pp-sheet);
}
.v-swiss .pp.is-js .is-shown .pp__results {
  visibility: visible;
  transform: none;
  transition: transform var(--pp-sheet) var(--pp-ease-entrance), visibility 0s;
}

/* Marks: left-to-right wipes. */
.v-swiss .pp.is-js .pp__mark {
  clip-path: inset(0 100% 0 0);
}
.v-swiss .pp.is-js .is-judged .pp__mark {
  clip-path: inset(0);
  transition: clip-path 0.18s var(--pp-ease-entrance) calc(var(--i) * 80ms);
}

/* Jump straight to a state (reduced motion, off-screen catch-up). */
.v-swiss .pp .is-instant,
.v-swiss .pp .is-instant * {
  transition: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .v-swiss .pp *,
  .v-swiss .pp *::before,
  .v-swiss .pp *::after {
    transition: none !important;
    animation: none !important;
  }
}

@media (max-width: 640px) {
  .v-swiss .pp__results-label { padding-inline: 14px; }
  .v-swiss .pp__fields { padding-inline: 14px; }
  .v-swiss .pp__field { grid-template-columns: 1fr; row-gap: 2px; padding: 6px 0; }
}