/* Eve migration — styles from the Paper foundations ("Current journey · minimal").
   Shared parts first; each screen's own rules go in its marked section at the end.
   The handbook for these classes is outside the repo (FOUNDATIONS.md). */

@font-face {
  font-family: "Family";
  src: url("/fonts/Family-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/fonts/dm-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens ---- */
:root {
  color-scheme: light;
  --font: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --paper: #f1ede4; /* page background */
  --ink: #000000; /* main text */
  --muted: #6b6560; /* lead, captions, labels */
  --header: #faf8f3; /* header bar */
  --card: rgb(255 255 255 / 72%);
  --field: #fdfaf6; /* inputs and secondary buttons */
  --primary: #24211d;
  --on-primary: #f1ede4;
  --line: rgb(0 0 0 / 10%); /* header, card and small-button borders */
  --line-strong: rgb(0 0 0 / 12%); /* inputs, buttons, stepper rings */
  --divider: rgb(0 0 0 / 8%); /* rows inside a card */
  --dashed: rgb(0 0 0 / 15%); /* drop zones, annotation rules */
  --underline: rgb(0 0 0 / 25%); /* text-button underline */
  --orange: #ff702d;
  --green: #66cc55;
  --error-text: #a3410f; /* field errors, refused-file reasons */
  --attention-tint: rgb(255 112 45 / 14%);
  --success-tint: rgb(102 204 85 / 14%);
  --neutral-tint: rgb(0 0 0 / 5%);
  --neutral-dot: #6b6560;
  --step-current: #000000;
  --on-step-current: #f1ede4;
  --step-done: rgb(102 204 85 / 18%);
  --step-check: #2f7a22;
  --focus: #000000;
  --skeleton: rgb(0 0 0 / 7%); /* loading shapes */
  --skeleton-shine: rgb(255 255 255 / 40%); /* the sweep across them */
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #0a0a08;
    --ink: #f1ede4;
    --muted: #9c9690;
    --header: #1a1916;
    --card: rgb(255 255 255 / 6%);
    --field: #1a1a16;
    --primary: #f1ede4;
    --on-primary: #0a0a08;
    --line: rgb(255 255 255 / 10%);
    --line-strong: rgb(255 255 255 / 12%);
    --divider: rgb(255 255 255 / 8%);
    --dashed: rgb(255 255 255 / 22%);
    --underline: rgb(241 237 228 / 35%);
    --error-text: #ff9f70;
    --attention-tint: rgb(255 112 45 / 18%);
    --success-tint: rgb(102 204 85 / 16%);
    --neutral-tint: rgb(255 255 255 / 7%);
    --neutral-dot: #9c9690;
    --step-current: #f1ede4;
    --on-step-current: #0a0a08;
    --step-done: rgb(102 204 85 / 20%);
    --step-check: #8fdb7f;
    --focus: #f1ede4;
    --skeleton: rgb(255 255 255 / 7%);
    --skeleton-shine: rgb(255 255 255 / 7%);
  }
}

/* ---- Base ---- */
* {
  box-sizing: border-box;
}
html {
  font-family: var(--font);
  font-size: 15px;
  line-height: 22px;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  margin: 0;
  min-height: 100vh;
  overflow-wrap: anywhere;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button,
summary {
  cursor: pointer;
}
input::placeholder {
  color: var(--muted);
  opacity: 1;
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
[hidden][hidden] {
  display: none;
}
h1,
h2,
h3,
h4,
p,
dl,
dd {
  margin: 0;
}
strong {
  font-weight: 600;
}
a {
  color: inherit;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: -80px;
  left: 16px;
  z-index: 20;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--header);
  color: var(--ink);
  font-weight: 600;
}
.skip-link:focus {
  top: 10px;
}

/* ---- Type ---- */
.page-title {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-heading {
  font-size: 40px;
  line-height: 44px;
  font-weight: 650;
  /* Paper renders DM Sans at optical size 40; our bundled file has no opsz
     axis, so tighter tracking stands in for the display cut (spec: -0.025em). */
  letter-spacing: -0.06em;
}
/* The h1 only takes focus programmatically after a screen change. */
.page-heading:focus {
  outline: none;
}
.page-lead {
  color: var(--muted);
  font-size: 16px;
  line-height: 24px;
}
.section-heading {
  font-size: 20px;
  line-height: 28px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.body-text {
  font-size: 15px;
  line-height: 22px;
}
.muted {
  color: var(--muted);
}
.caption {
  color: var(--muted);
  font-size: 13px;
  line-height: 18px;
}
.mono {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 16px;
}
.eyebrow {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---- Header ---- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 4;
  height: 64px;
  padding-inline: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--header);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--ink);
  text-decoration: none;
}
.brand-name {
  /* The supplied Family face is regular only; never synthesize a bold wordmark. */
  font-family: "Family", "DM Sans", serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: -0.01em;
}
.brand-subtitle {
  padding-left: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  line-height: 12px;
  letter-spacing: 0.15em;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-error {
  padding-left: 8px;
  color: var(--error-text);
  font-size: 13px;
  line-height: 18px;
}
.header-error:empty {
  display: none;
}

/* ---- Page frame ---- */
.page {
  padding: 56px 32px 96px;
}
.page:focus {
  outline: none;
}
.page-column {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
/* ---- Opening (board A0): until the right screen is known ---- */
.opening {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - 64px);
  padding: 32px 32px 96px;
}
.opening:focus {
  outline: none;
}
/* Invisible until OPENING_DELAY_MS has passed, so a fast load shows nothing. */
.opening-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transition: opacity 200ms ease-out;
}
.opening-indicator.is-visible {
  opacity: 1;
}
.opening-bar {
  width: 160px;
}
.opening-failed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 360px;
  text-align: center;
}
.opening-message {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.opening-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
/* Signed in, the migration loading: its outline sits where the screen will.
   (No display here, so the hidden attribute still hides it.) */
.opening.is-journey {
  align-items: stretch;
  justify-content: flex-start;
  padding: 56px 32px 96px;
}
.opening.is-journey .opening-indicator {
  display: block;
}
.skeleton-stepper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.skeleton-step {
  display: flex;
  align-items: center;
  gap: 8px;
}
.skeleton-step + .skeleton-step::before {
  content: "";
  width: 24px;
  height: 1px;
  margin-right: 4px;
  background: var(--line-strong);
}
.skeleton-stepper-compact {
  display: none;
}
.skeleton-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.skeleton-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* The content of one screen: title, notice, body, actions. */
.screen {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 12px;
}

/* ---- Stepper ---- */
.stepper-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.stepper-step {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
  line-height: 20px;
}
.stepper-step + .stepper-step::before {
  content: "";
  width: 24px;
  height: 1px;
  margin-right: 4px;
  background: var(--line-strong);
}
.stepper-mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 16px;
}
.stepper-step.is-current {
  color: var(--ink);
  font-weight: 600;
}
.is-current .stepper-mark {
  border-color: var(--step-current);
  background: var(--step-current);
  color: var(--on-step-current);
}
.is-done .stepper-mark {
  border-color: transparent;
  background: var(--step-done);
  color: var(--step-check);
}
.stepper-compact {
  display: none;
  color: var(--muted);
  font-size: 13px;
  line-height: 18px;
}

/* ---- Buttons ---- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--field);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  text-decoration: none;
  transition: background-color 150ms ease-out;
}
.button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--field) 92%, var(--ink));
}
.button-primary {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary);
}
.button-primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary) 88%, var(--paper));
}
/* Header sizes: "Sign out" is a small secondary; "New migration" a quiet one. */
.button-small {
  min-height: 36px;
  padding: 0 14px;
  gap: 8px;
  border-color: var(--line);
  font-size: 13px;
  line-height: 16px;
}
.button-quiet {
  border-color: transparent;
  background: transparent;
}
.button-quiet:hover:not(:disabled) {
  background: var(--neutral-tint);
}
.button-text {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  text-align: left;
  text-decoration: underline 1px var(--underline);
  text-underline-offset: 3px;
}
.button-text:hover:not(:disabled) {
  text-decoration-color: currentColor;
}
.button:disabled,
.button-text:disabled,
.disclosure-toggle:disabled,
.icon-button:disabled {
  cursor: default;
  opacity: 0.4;
}
.button.is-busy:disabled {
  opacity: 0.55;
}
.button-small.is-busy:disabled {
  opacity: 0.7;
}
.button-block {
  width: 100%;
}
.icon-button {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
}
.icon-button:hover:not(:disabled) {
  background: var(--neutral-tint);
  color: var(--ink);
}
.icon {
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Spinner ---- */
.spinner {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, currentColor 35%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}
.button-small .spinner {
  width: 12px;
  height: 12px;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---- Skeletons (ui/skeleton.ts): the shape of what's loading ---- */
/* One sweep crosses the whole window (a fixed background), so every shape
   shines together; reduced motion leaves them still. */
.skeleton {
  display: block;
  min-width: 0;
  max-width: 100%;
  border-radius: 5px;
  background-color: var(--skeleton);
  background-image: linear-gradient(
    100deg,
    transparent 42%,
    var(--skeleton-shine) 50%,
    transparent 58%
  );
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 200% 100%;
  animation: skeleton-shine 1800ms ease-in-out infinite;
}
.skeleton.is-round {
  flex-shrink: 0;
  border-radius: 50%;
}
.skeleton.is-pill {
  border-radius: 999px;
}
.skeleton.is-button {
  border-radius: 8px;
}
@keyframes skeleton-shine {
  from {
    background-position: 150% 0;
  }
  to {
    background-position: -50% 0;
  }
}
/* In-page skeletons stay invisible for a moment, so a fast load shows none. */
.skeleton-fade {
  animation: skeleton-in 240ms ease-out 150ms both;
}
@keyframes skeleton-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---- Disclosure toggle ("What's in the zip?") ---- */
.disclosure-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}
.disclosure-toggle .icon {
  transition: transform 150ms ease-out;
}
.disclosure-toggle[aria-expanded="true"] .icon {
  transform: rotate(180deg);
}

/* ---- Fields ---- */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field label,
.field-label {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}
.field input,
.input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--field);
  color: var(--ink);
  font-size: 15px;
  line-height: 18px;
}
.field input:disabled,
.input:disabled {
  opacity: 0.6;
}
.field input[aria-invalid="true"],
.input.is-error {
  border: 1.5px solid var(--orange);
  padding-inline: 15.5px;
}
.field-error {
  color: var(--error-text);
  font-size: 13px;
  line-height: 18px;
}
.field-error:empty {
  display: none;
}

/* ---- Notices and quiet note ---- */
.notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--neutral-tint);
  font-size: 14px;
  line-height: 20px;
}
.notice-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 6px; /* centred on the first 20px line */
  border-radius: 50%;
  background: var(--neutral-dot);
}
.notice-text {
  flex: 1 1 0;
  min-width: 0;
}
.notice .button-text {
  min-height: 20px;
  padding: 0;
  flex-shrink: 0;
}
.notice-attention {
  background: var(--attention-tint);
}
.notice-attention .notice-dot {
  background: var(--orange);
}
.notice-success {
  background: var(--success-tint);
}
.notice-success .notice-dot {
  background: var(--green);
}
.quiet-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 18px;
}
.quiet-note .icon {
  margin-top: 2px;
  stroke-width: 1.2;
}

/* ---- Card, file rows, metrics ---- */
.card {
  padding: 4px 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}
.card-padded {
  padding: 28px 32px;
}
.file-list {
  margin: 0;
  list-style: none;
}
.file-row {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding-block: 10px;
}
.file-row + .file-row {
  border-top: 1px solid var(--divider);
}
.file-row-main {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.file-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}
.file-reason,
.file-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 18px;
}
.file-reason {
  color: var(--error-text);
}
.file-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 18px;
}
.file-reason::before,
.file-status::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}
.file-reason::before {
  background: var(--orange);
}
.file-size {
  flex-shrink: 0;
  min-width: 72px;
  white-space: nowrap;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 16px;
  text-align: right;
}
.metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 56px;
}
.metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.metric-value {
  font-family: var(--mono);
  font-size: 44px;
  line-height: 48px;
  letter-spacing: -0.02em;
}
.metric-label {
  color: var(--muted);
  font-size: 13px;
  line-height: 18px;
}

/* ---- Login gate ---- */
.login-screen {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 520px;
  margin-inline: auto;
  padding: 96px 32px;
}
.login-screen:focus {
  outline: none;
}
.login-card,
.email-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.login-card > p {
  color: var(--muted);
}
.login-card h2 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.login-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.login-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.login-step-number {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  height: 28px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 12px;
}

/* ---- Mobile (≤ 700px) ---- */
@media (max-width: 700px) {
  /* Notice actions ("Try again", "Sign in again") are touch targets too. */
  .notice .button-text {
    min-height: 44px;
  }
  .topbar {
    padding: 0 12px 0 20px;
  }
  /* Mobile header keeps New migration: it's the only way to start over from the download screen. */
  .header-restart {
    padding-inline: 10px;
  }
  .button-small {
    min-height: 44px;
    font-size: 14px;
    line-height: 18px;
  }
  .page {
    padding: 28px 20px 48px;
  }
  .page-column,
  .screen {
    gap: 28px;
  }
  .stepper-list,
  .skeleton-stepper {
    display: none;
  }
  .stepper-compact,
  .skeleton-stepper-compact {
    display: block;
  }
  .opening.is-journey {
    padding: 28px 20px 48px;
  }
  /* The compact stepper sits 8px above the title, inside the title rhythm. */
  .stepper {
    margin-bottom: -20px;
  }
  .page-heading {
    font-size: 30px;
    line-height: 34px;
    letter-spacing: -0.045em;
  }
  /* Mobile actions: buttons go full width; text buttons keep their size. */
  .actions > .button,
  .button-block {
    width: 100%;
    min-height: 48px;
    font-size: 15px;
  }
  .icon-button {
    width: 44px;
    height: 44px;
  }
  .card {
    padding: 4px 8px 4px 16px;
  }
  .card-padded {
    padding: 20px;
  }
  .file-row {
    gap: 12px;
    min-height: 60px;
  }
  .file-size {
    min-width: 64px;
  }
  .metrics {
    gap: 12px 32px;
  }
  .metric {
    gap: 2px;
  }
  .metric-value {
    font-size: 30px;
    line-height: 36px;
  }
  .login-screen {
    padding: 48px 20px;
    gap: 32px;
  }
}

/* Touch screens keep 44px targets even on wide layouts. */
@media (pointer: coarse) {
  .button,
  .button-text,
  .notice .button-text,
  .disclosure-toggle,
  .icon-button {
    min-height: 44px;
  }
  .icon-button {
    width: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *:not(.spinner),
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  /* A spinner that stops dead still reads as "busy"; slow it instead. */
  .spinner {
    animation-duration: 2400ms;
  }
}

/* ---- Action rows (after the button rules so the cascade reads in order) ---- */
/* Buttons sit 12px apart; a text action after a button gets a little more room. */
.actions > .button + .button-text {
  margin-inline-start: 12px;
}
@media (max-width: 700px) {
  /* Full-width buttons wrap, so the text action starts its own line. */
  .actions > .button + .button-text {
    margin-inline-start: 0;
  }
}

/* ==== screen: sign-in ==== */
/* Email sign-in (board A1): the journey on the left, the sign-in card on
   the right. Phones stack the same blocks, card above the steps (board A5).
   Grid placement puts the card beside the intro without reordering the DOM,
   so phones read headline, card, steps, note without a visual mismatch. */
.signin-screen {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 440px);
  align-items: start;
  justify-content: center;
  gap: 32px 120px;
  max-width: calc(1120px + 64px);
  padding: 120px 32px 96px;
}
.signin-intro-text {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.signin-steps {
  grid-column: 1;
  grid-row: 2;
  gap: 16px;
}
.signin-steps li {
  align-items: flex-start;
  gap: 16px;
}
.signin-steps .login-step-number {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
}
.signin-step-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.signin-step-text strong {
  font-size: 15px;
  line-height: 22px;
}
.signin-note {
  grid-column: 1;
  grid-row: 3;
}
.signin-card {
  grid-column: 2;
  grid-row: 1 / span 3;
  gap: 24px;
  /* Fluid, so the card fills its grid column once the columns shrink. */
  width: 100%;
  padding: 28px 32px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}
/* A step up from the 20px section heading so the card reads as the place
   to start. */
.signin-card h2 {
  font-size: 24px;
  line-height: 32px;
}
.signin-card-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.signin-form {
  gap: 20px;
}
/* The hint and "We emailed a code" line are the card's body copy: the same
   14px as the field label and notices, not the 13px caption. Balanced
   wrapping keeps "6-digit" from splitting at its hyphen. */
.signin-form > .caption {
  font-size: 14px;
  line-height: 20px;
  text-wrap: balance;
}
.email-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
}
/* Between the stacked layout and the full 1120px spread, a fixed 120px gap
   would squeeze both columns; tighten the gap and page padding instead. */
@media (max-width: 1100px) {
  .signin-screen {
    column-gap: 48px;
    padding-inline: 24px;
  }
}
@media (max-width: 700px) {
  .signin-screen {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 520px;
    padding: 48px 20px;
  }
  .signin-card {
    width: 100%;
    padding: 20px;
  }
}
/* ==== end sign-in ==== */

/* ==== screen: prepare ==== */
/* Export help body: notice, field, progress, steps card, actions (28px rhythm). */
.prepare-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}
.prepare-body > * {
  max-width: 100%;
}
.prepare-ending,
.prepare-steps,
.prepare-body > .actions {
  width: 100%;
}
.prepare-field,
.prepare-finding {
  width: 560px;
}
.prepare-phones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 560px;
}
.prepare-phone-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.prepare-field-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.prepare-field-row input {
  flex: 1 1 0;
  min-width: 0;
}
.prepare-field-row .button {
  flex-shrink: 0;
  min-height: 48px;
}
.prepare-finding {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.prepare-finding-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
.prepare-finding-line .spinner {
  width: 16px;
  height: 16px;
  color: var(--primary);
}
.prepare-finding-line .button-text {
  margin-left: 4px;
  padding: 0;
}
.prepare-finding-progress {
  padding-left: 26px;
}
.prepare-steps {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.prepare-steps-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.prepare-steps-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.prepare-steps-heading:focus {
  outline: none;
}
.prepare-steps-head .button-text {
  flex-shrink: 0;
  min-height: 28px;
  padding: 0;
}
.prepare-step-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.prepare-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.prepare-step-number {
  flex-shrink: 0;
  width: 24px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 22px;
}
.prepare-step-text {
  flex: 1 1 0;
  min-width: 0;
}
.prepare-sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding-top: 18px;
  border-top: 1px solid var(--divider);
}
.prepare-source-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  line-height: 18px;
  text-decoration: none;
}
.prepare-source-link > span:first-child {
  text-decoration: underline 1px var(--underline);
  text-underline-offset: 3px;
}
.prepare-source-link:hover > span:first-child {
  text-decoration-color: currentColor;
}
.prepare-source-link .icon {
  color: var(--muted);
  stroke-width: 1.2;
}
/* Choose screen detail: what an export is, the next steps, the lock note. */
.prepare-detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}
.prepare-detail > .caption {
  max-width: 560px;
}
.next-steps {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}
.next-step-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.next-step {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.next-step-label {
  flex: 0 0 176px;
  font-size: 14px;
  font-weight: 650;
  line-height: 20px;
}
.next-step-text {
  flex: 1 1 0;
  min-width: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 20px;
}
@media (max-width: 700px) {
  .prepare-field,
  .prepare-phones,
  .prepare-finding {
    width: 100%;
  }
  /* Narrow cards stack the label over its one-line detail. */
  .next-step {
    flex-direction: column;
    gap: 2px;
  }
  .next-step-label {
    flex-basis: auto;
  }
  .prepare-steps {
    gap: 20px;
    padding: 12px 20px 8px;
  }
  .prepare-steps-title {
    padding-top: 8px;
  }
  .prepare-sources {
    padding-top: 4px;
  }
  .prepare-source-link {
    min-height: 44px;
  }
}
/* Touch targets stay 44px on any touch screen, not just narrow ones. */
@media (max-width: 700px), (pointer: coarse) {
  .prepare-steps-head .button-text,
  .prepare-finding-line .button-text {
    min-height: 44px;
  }
}
/* ==== end prepare ==== */

/* ==== screen: files ==== */
/* Add files (C1–C6), upload failed, convert and converting (E0–E2), expired (E5). */
.files-body,
.files-picks {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* Caption then lock note, under the empty drop zone and the expired screen. */
.files-detail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}
.files-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 64px 40px;
  border: 1.5px dashed var(--dashed);
  border-radius: 12px;
  background: var(--card);
  text-align: center;
  transition: border-color 150ms ease-out;
}
.files-drop.is-dragover {
  border-color: var(--ink);
}
.files-drop.is-disabled > :not(.button) {
  opacity: 0.5;
}
.files-drop-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--field);
  color: var(--ink);
}
.files-tray {
  stroke-width: 1.6;
}
.files-drop-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.files-drop-title {
  font-size: 20px;
  font-weight: 650;
  line-height: 28px;
  letter-spacing: -0.01em;
}
.files-drop.is-compact {
  flex-direction: row;
  gap: 14px;
  padding: 12px 12px 12px 20px;
  background: transparent;
  text-align: left;
}
.is-compact .files-tray {
  color: var(--muted);
  stroke-width: 1.7;
}
.files-drop-hint {
  flex: 1 1 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 22px;
}
/* "+ Choose more files" is the mobile wording; desktop reads "Choose files". */
.files-choose .icon,
.files-more {
  display: none;
}
.files-size-over {
  color: var(--error-text);
}
.files-remove-spacer {
  flex-shrink: 0;
  width: 32px;
}
.files-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 16px;
}
.files-count {
  margin-left: auto;
}
.files-footer > .quiet-note {
  flex-basis: 100%;
}
/* Upload confirmation (C7): the box, what it confirms, when files are
   deleted, and the terms link lined up under the words. */
.files-confirm {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 18px 20px 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}
.files-confirm-label {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
}
.files-confirm-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.files-confirm-statement {
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
}
.files-confirm-box {
  display: grid;
  flex-shrink: 0;
  place-content: center;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  border: 1.5px solid var(--muted);
  border-radius: 5px;
  background: var(--field);
  cursor: pointer;
  appearance: none;
}
.files-confirm-box::before {
  width: 10px;
  height: 5px;
  border: solid var(--on-primary);
  border-width: 0 0 2px 2px;
  content: "";
  opacity: 0;
  transform: translateY(-1px) rotate(-45deg);
}
.files-confirm-box:checked {
  border-color: var(--primary);
  background: var(--primary);
}
.files-confirm-box:checked::before {
  opacity: 1;
}
.files-confirm-box:disabled,
.files-confirm-box:disabled + .files-confirm-text {
  cursor: default;
  opacity: 0.55;
}
.files-confirm-terms {
  margin-left: 34px;
}
/* Terms of Service pop-up (C8): a fixed head and the text scrolling below. */
.terms-dialog {
  width: min(640px, calc(100vw - 32px));
  max-width: none;
  height: min(720px, calc(100dvh - 48px));
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--field);
  color: var(--ink);
}
.terms-dialog[open] {
  display: flex;
  flex-direction: column;
}
.terms-dialog::backdrop {
  background: rgb(10 10 8 / 40%);
}
.terms-head {
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 20px 20px 32px;
  border-bottom: 1px solid var(--divider);
}
.terms-head-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.terms-title {
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 30px;
}
.terms-close {
  width: 44px;
  height: 44px;
  color: var(--ink);
}
.terms-body {
  flex: 1 1 auto;
  padding: 24px 32px 32px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.terms-body:focus-visible {
  outline-offset: -2px;
}
.terms-intro {
  font-size: 15px;
  line-height: 23px;
}
.terms-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 24px;
}
.terms-heading {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 18px;
}
.terms-paragraph {
  color: color-mix(in srgb, var(--ink) 78%, var(--paper));
  font-size: 15px;
  line-height: 23px;
}
.terms-paragraph strong {
  color: var(--ink);
  font-weight: 600;
}
.terms-paragraph.is-indent-1 {
  padding-left: 16px;
}
.terms-paragraph.is-indent-2 {
  padding-left: 32px;
}
.files-progress-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.files-progress {
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--divider);
}
/* Indeterminate: slides across; reduced motion leaves it still at 29%. */
.files-progress-bar {
  display: block;
  width: 32%;
  height: 100%;
  margin-left: 29%;
  border-radius: 2px;
  background: var(--primary);
  animation: files-progress 1600ms ease-in-out infinite;
  animation-delay: -700ms; /* start mid-track, not off-screen */
}
@keyframes files-progress {
  from {
    margin-left: -32%;
  }
  to {
    margin-left: 100%;
  }
}
@media (pointer: coarse) {
  .files-remove-spacer {
    width: 44px;
  }
}
@media (max-width: 700px) {
  .files-body {
    gap: 28px;
  }
  .files-picks {
    gap: 12px;
  }
  .files-drop {
    padding: 40px 20px;
  }
  .files-drop.is-compact {
    padding: 0;
  }
  .is-compact > .files-tray,
  .files-drop-hint {
    display: none;
  }
  .files-choose {
    flex: 1 1 auto;
    min-height: 49px;
    border: 0;
    background: transparent;
  }
  .files-choose .icon {
    display: block;
    stroke-width: 1.6;
  }
  .files-more {
    display: inline;
  }
  .files-remove-spacer {
    width: 44px;
  }
  /* Mobile order: primary, count, lock note, then the text action. */
  .files-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .files-footer > .button {
    order: 1;
    width: 100%;
    min-height: 48px;
    font-size: 15px;
  }
  .files-count {
    order: 2;
    margin: 14px 0 0;
    text-align: center;
  }
  .files-footer > .quiet-note {
    order: 3;
    margin-top: 28px;
  }
  .files-footer > .button-text {
    order: 4;
    align-self: flex-start;
    margin-top: 12px;
  }
  .files-confirm {
    padding: 16px 16px 4px;
  }
  /* On a phone the terms fill the screen. */
  .terms-dialog {
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }
  .terms-head {
    padding: 16px 12px 16px 20px;
  }
  .terms-title {
    font-size: 22px;
    line-height: 28px;
  }
  .terms-body {
    padding: 20px 20px 32px;
  }
}
/* ==== end files ==== */

/* ==== shared: tabs and the destination select ==== */
/* First drawn for Check columns (removed 2026-10-21); Review changes uses
   them for its file tabs and its destination and kind selects. */
.checkcols-tabs {
  display: flex;
  align-items: end;
  gap: 28px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.checkcols-tab {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  height: 44px;
  margin-bottom: -1px;
  padding: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  white-space: nowrap;
}
.checkcols-tab.is-active {
  border-bottom-color: var(--ink);
  color: var(--ink);
  font-weight: 600;
}
.checkcols-tab:focus-visible {
  outline-offset: -2px;
}

/* The destination: a native select styled as the boards' field. */
.checkcols-pick {
  position: relative;
  min-width: 0;
}
.checkcols-select {
  width: 100%;
  height: 40px;
  padding: 0 36px 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--field);
  color: var(--ink);
  font-size: 14px;
  line-height: 20px;
  text-overflow: ellipsis;
  appearance: none;
  cursor: pointer;
}
.checkcols-select option,
.checkcols-select optgroup {
  color: var(--ink);
}
.checkcols-select:disabled {
  cursor: default;
  opacity: 0.6;
}
.checkcols-chevron {
  position: absolute;
  top: 50%;
  right: 14px;
  display: flex;
  color: var(--muted);
  transform: translateY(-50%);
  pointer-events: none;
}

@media (max-width: 1000px) {
  .checkcols-tabs {
    gap: 20px;
  }
  .checkcols-pick {
    flex-basis: 100%;
  }
  .checkcols-select {
    height: 44px;
    font-size: 15px;
  }
}
/* ==== end shared ==== */

/* ==== screen: check-categories, shared layout ==== */
/* Check categories (D6, D7) lays its tags out in the lanes, rows and footer
   first drawn for Check columns, which is gone; only what it uses is kept. */
.page-column.is-wide {
  max-width: 1040px;
}

.checkcols-root,
.checkcols,
.checkcols-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.checkcols-panel {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

.checkcols-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
}

.checkcols-head-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  min-width: 0;
}

.checkcols-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  font-size: 15px;
  line-height: 22px;
}

.checkcols-layout strong {
  font-weight: 600;
}

.checkcols-size {
  flex-shrink: 0;
  white-space: nowrap;
}

.checkcols-list {
  --lanes: 12px 232px minmax(0, 1fr) 24px 320px;
  display: flex;
  flex-direction: column;
}

.checkcols-lanes,
.checkcols-row {
  display: grid;
  grid-template-columns: var(--lanes);
  column-gap: 16px;
  align-items: center;
}

.checkcols-lanes {
  height: 36px;
  padding: 0 24px;
  border-top: 1px solid var(--divider);
  color: var(--muted);
  font-size: 13px;
  line-height: 18px;
}

.checkcols-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.checkcols-row {
  row-gap: 6px;
  padding: 10px 24px;
  border-top: 1px solid var(--divider);
}

.checkcols-row.is-flagged {
  padding-block: 14px;
  background: color-mix(in srgb, var(--orange) 6%, transparent);
}

.checkcols-marker {
  display: flex;
  justify-content: center;
}

.checkcols-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
}

.checkcols-name {
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
}

.checkcols-samples {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkcols-arrow {
  display: flex;
  justify-content: center;
  color: color-mix(in srgb, var(--ink) 35%, transparent);
}

.checkcols-reason {
  grid-column: 2 / -1;
  color: var(--error-text);
  font-size: 13px;
  line-height: 18px;
}

.checkcols-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 8px;
}

.checkcols-footer .checkcols-convert {
  flex-shrink: 0;
  margin-left: auto;
}

@media (max-width: 1000px) {
  .checkcols-panel {
    gap: 12px;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .checkcols-head {
    padding: 0;
  }
  .checkcols-head-main {
    flex: 1;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .checkcols-layout {
    flex-direction: column;
    min-width: 0;
  }
  .checkcols-size,
  .checkcols-lanes,
  .checkcols-arrow {
    display: none;
  }
  .checkcols-list {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
  }
  .checkcols-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    padding: 14px 16px;
  }
  .checkcols-row.is-flagged {
    padding-block: 14px;
  }
  .checkcols-rows > :first-child {
    border-top: 0;
  }
  .checkcols-marker {
    align-self: center;
  }
  .checkcols-marker:empty {
    display: none;
  }
  .checkcols-samples {
    flex: 1 1 0;
    text-align: right;
  }
  .catcheck-list .checkcols-pick,
  .checkcols-reason {
    flex-basis: 100%;
  }
  .checkcols-footer {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 10px;
    padding-top: 0;
  }
  .checkcols-footer-text {
    text-align: center;
  }
  .checkcols-footer .checkcols-convert {
    width: 100%;
    min-height: 48px;
    margin-left: 0;
    font-size: 15px;
  }
}

.checkcols-pick.is-empty .checkcols-select {
  color: var(--muted);
}

.checkcols-pick.is-flagged .checkcols-select {
  padding-left: 11.5px;
  border: 1.5px solid var(--orange);
}
/* ==== end check-categories, shared layout ==== */

/* ==== screen: download ==== */
.download-totals {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.download-nowrap {
  white-space: nowrap;
}
/* File list: a real table, styled as the shared list card. */
.download-files {
  overflow-x: auto;
}
.download-table {
  width: 100%;
  border-collapse: collapse;
}
.download-table th {
  height: 44px;
  padding: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  text-align: left;
}
.download-table td {
  padding: 14px 0;
  border-top: 1px solid var(--divider);
  vertical-align: middle;
}
.download-file-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.download-table .download-number {
  width: 104px; /* 88px column + 16px gap */
  padding-left: 16px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 18px;
  text-align: right;
  white-space: nowrap;
}
.download-table th.download-number {
  font-family: var(--font);
}
/* A reason that wraps keeps its dot on the first line. */
.download-file-main .file-reason {
  align-items: flex-start;
}
.download-file-main .file-reason::before {
  margin-top: 6px;
}
.download-dash {
  color: var(--muted);
}
.download-unit {
  display: none;
}
/* Download button, an optional failure notice above it, and the zip list. */
.download-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.download-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}
.download-size {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  opacity: 0.6;
}
.download-zip-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 4px 0 4px 16px;
  border-left: 2px solid var(--line-strong);
  list-style: none;
}
.download-zip-list[hidden] {
  display: none;
}
.download-zip-list li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-size: 13px;
  line-height: 20px;
}
.download-zip-file {
  flex: 0 0 200px;
  font-family: var(--mono);
}
.download-zip-text {
  flex: 1 1 0;
  min-width: 0;
  color: var(--muted);
}
/* A folder's files on the lines under it, their text in line with the rest. */
.download-zip-list .download-zip-folder {
  flex-wrap: wrap;
  row-gap: 0;
}
.download-zip-folder > .download-zip-list {
  flex: 1 0 100%;
  margin-top: 8px;
}
.download-zip-folder > .download-zip-list .download-zip-file {
  flex-basis: 182px;
}
@media (max-width: 700px) {
  .download-files {
    padding: 2px 16px;
  }
  /* Mobile: name + status, and the contact count with its unit on the right. */
  .download-table thead,
  .download-table td.download-number:nth-child(2) {
    display: none;
  }
  .download-table tbody tr:first-child td {
    border-top: 0;
  }
  .download-table td.download-number {
    width: 76px; /* 64px + 12px gap */
    padding-left: 12px;
  }
  .download-table td.download-number:last-child {
    vertical-align: middle;
  }
  .download-value,
  .download-unit {
    display: block;
  }
  .download-unit {
    margin-top: 2px;
    color: var(--muted);
    font-family: var(--font);
    font-size: 12px;
    line-height: 16px;
  }
  .download-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .download-button {
    width: 100%;
    min-height: 48px;
    font-size: 15px;
  }
  .download-toggle {
    align-self: center;
  }
  .download-zip-list li {
    flex-direction: column;
    gap: 0;
  }
  .download-zip-file,
  .download-zip-folder > .download-zip-list .download-zip-file {
    flex-basis: auto;
  }
}
/* ==== end download ==== */

/* ==== screen: review changes (boards F0, G1–G5) ==== */
.page-column.is-review {
  max-width: 1200px;
}
.download-review-hint {
  margin: 0;
}
.review-screen {
  position: relative;
}
.review-titlebar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
}
.review-titlebar .page-title {
  flex: 1 1 520px;
  min-width: 0;
}
.review-title-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 20px;
}
.review-download .icon {
  stroke: currentColor;
}
.review-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 18px;
}

/* The contact (left), what's left to check and what's done (right). */
.review-area {
  display: grid;
  grid-template-areas:
    "card left"
    "card done";
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: 0 40px;
}
.review-left-rail {
  display: flex;
  flex-direction: column;
  grid-area: left;
  gap: 6px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.review-done-rail {
  display: flex;
  flex-direction: column;
  grid-area: done;
  gap: 12px;
  padding-top: 24px;
}
.review-rail-title {
  margin: 0 0 4px 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}
.review-left-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.review-left {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--ink);
  font-size: 15px;
  line-height: 20px;
  text-align: left;
}
.review-left:hover:not(:disabled) {
  background: var(--neutral-tint);
}
.review-left.is-current {
  border-color: var(--line);
  background: var(--card);
  font-weight: 600;
}
.review-left-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  opacity: 0.55;
}
.review-left.is-current .review-left-dot {
  opacity: 1;
}
.review-left.is-done .review-left-dot {
  background: var(--green);
  opacity: 1;
}
.review-left-label {
  flex: 1 1 auto;
  min-width: 0;
}
.review-left-count {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  line-height: 16px;
}
.review-left.is-current .review-left-count {
  color: var(--ink);
}
.review-left.is-done .review-left-count {
  color: var(--step-check);
  font-family: var(--font);
}
.review-left-pick {
  display: none;
}
/* A row of Left to check while the screen opens (ui/skeleton.ts). */
.skeleton-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 0 14px;
}
.skeleton-left > :last-child {
  margin-left: auto;
}
.review-left-note {
  margin: 6px 14px 0;
}
.review-done-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0 14px;
  list-style: none;
}
.review-done-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 22px;
}
.review-done-tick {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--step-done);
  color: var(--step-check);
}
.review-done-tick .icon {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
}
.review-done-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.review-done-link {
  min-height: 28px;
  margin-top: 2px;
}
.review-whole {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-top: 12px;
  padding: 24px 14px 0;
  border-top: 1px solid var(--line);
}

.review-card {
  display: flex;
  flex-direction: column;
  grid-area: card;
  min-width: 0;
  padding: 0;
}
.review-card.is-empty {
  padding: 24px;
}
.review-empty {
  margin: 0;
  color: var(--muted);
}
/* "Contact 3 of 351", the progress track and Previous/Next. */
.review-card-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 16px 14px 24px;
  border-bottom: 1px solid var(--divider);
}
.review-position {
  flex-shrink: 0;
  margin: 0;
  font-size: 15px;
  line-height: 22px;
}
.review-position strong {
  font-weight: 600;
}
/* "Loading…" holds focus while a contact is on its way; it isn't a control. */
.review-position:focus {
  outline: none;
}
.review-position-of {
  color: var(--muted);
}
.review-track {
  flex: 1 1 auto;
  height: 4px;
  border-radius: 2px;
  background: var(--neutral-tint);
  overflow: hidden;
}
.review-track-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--primary);
}
.review-pager {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}
.review-step .icon {
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
}
.review-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 14px 14px;
}
.review-card-body > :not(.review-fields, .review-compare-wrap) {
  margin-inline: 14px;
}
.review-back-kind {
  align-self: flex-start;
  min-height: 28px;
  font-size: 13px;
}
.review-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.review-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 12px;
  background: var(--attention-tint);
  color: var(--error-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}
.review-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}
.review-tag.is-checked {
  background: var(--success-tint);
  color: var(--step-check);
}
.review-tag.is-checked::before {
  background: var(--green);
}
.review-name {
  margin: 0;
  font-size: 28px;
  font-weight: 650;
  line-height: 34px;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.review-name:focus {
  outline: none;
}
.review-where {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 14px;
  line-height: 20px;
}
/* One field a row: its name and source | its value | what we changed, or Fix it. */
.review-fields {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.review-field {
  display: grid;
  grid-template-columns: minmax(120px, 200px) minmax(160px, 1fr) minmax(
      0,
      190px
    );
  align-items: start;
  gap: 4px 20px;
  padding: 10px 14px;
  border-top: 1px solid var(--divider);
}
.review-field.is-problem,
.review-field.is-editing,
.review-field.is-added {
  border: 1px solid rgb(255 112 45 / 25%);
  border-radius: 10px;
  background: rgb(255 112 45 / 6%);
  padding: 13px;
}
.review-field.is-editing {
  border-color: var(--line-strong);
  background: var(--field);
}
.review-field.is-added {
  border-color: rgb(102 204 85 / 30%);
  background: var(--success-tint);
}
.review-field.is-problem + .review-field,
.review-field.is-editing + .review-field,
.review-field.is-added + .review-field {
  border-top-color: transparent;
}
.review-field-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.review-field-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.review-field-from {
  color: var(--muted);
  font-size: 13px;
  line-height: 18px;
  overflow-wrap: anywhere;
}
.review-field-value {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.review-field-text {
  font-size: 15px;
  line-height: 22px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.review-field.is-problem .review-field-text {
  font-weight: 500;
}
.review-field-text.is-empty {
  color: var(--muted);
}
.review-field-reason {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 20px;
  opacity: 0.8;
}
.review-field-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 22px;
  text-align: right;
}
/* "was …" with its Undo always on the line under it, however long the value. */
.review-field-note {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  overflow-wrap: anywhere;
}
.review-field-undo {
  min-height: 24px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}
.review-field-mark {
  color: var(--step-check);
}
.review-fix {
  min-height: 32px;
}
/* Fix it and Compare: one width in every field (Compare's), so the lane lines up. */
.review-field-buttons {
  display: grid;
  gap: 8px;
}
.review-field-buttons .button {
  min-width: 88px;
}
.review-field-buttons:not(:first-child) {
  margin-top: 6px;
}
/* A problem's own answers (Put ‹agency› in Company, Split into …, Leave out),
   in a row under why, across the value and the Fix it lane. */
.review-field-choices {
  display: flex;
  grid-column: 2 / -1;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.review-input {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--field);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}
textarea.review-input {
  height: 88px;
  padding: 8px 12px;
  resize: vertical;
}
.review-input:focus-visible {
  outline: 1.5px solid var(--focus);
  outline-offset: 0;
}
.review-loose {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
}
.review-loose > p {
  flex: 1 1 320px;
  margin: 0;
}
.review-empty-line {
  margin: 4px 14px 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 20px;
}
.review-not-going {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.review-not-going-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 20px;
  overflow-wrap: anywhere;
}
.review-not-going-column {
  font-weight: 500;
}
.review-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  border-top: 1px solid var(--divider);
}
.review-progress {
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
  line-height: 18px;
}

/* Two contacts that might be one person, side by side (board G3). */
.review-compare-wrap {
  overflow-x: auto;
}
.review-compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
  line-height: 22px;
}
.review-compare th,
.review-compare td {
  padding: 10px 14px;
  border-top: 1px solid var(--divider);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.review-compare thead td,
.review-compare thead th {
  border-top: 0;
}
.review-compare-field {
  width: 180px;
  font-size: 14px;
  font-weight: 500;
}
.review-compare-who {
  font-weight: 400;
}
.review-compare-name {
  display: block;
  font-size: 15px;
  font-weight: 600;
}
.review-compare tr.is-shared > * {
  border-top-color: rgb(255 112 45 / 25%);
  border-bottom: 1px solid rgb(255 112 45 / 25%);
  background: rgb(255 112 45 / 6%);
}
.review-compare tr.is-shared > :first-child {
  border-left: 1px solid rgb(255 112 45 / 25%);
  border-radius: 10px 0 0 10px;
}
.review-compare tr.is-shared > :last-child {
  border-right: 1px solid rgb(255 112 45 / 25%);
  border-radius: 0 10px 10px 0;
}
.review-compare tr.is-shared + tr > * {
  border-top-color: transparent;
}

/* Nothing left to check (board G4). */
.review-done {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 780px;
}
.review-done-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.review-done-chip .icon {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
}
.review-done-chip::before {
  display: none;
}
.review-done-card {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 32px;
}
.review-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 56px;
}
.review-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.review-stat-number {
  font-family: var(--mono);
  font-size: 40px;
  line-height: 48px;
}
.review-done-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}
.review-done .review-done-rail {
  padding-top: 0;
}

/* What we tidied: one line per column and rule, with examples and Undo all. */
.review-arrow {
  justify-self: center;
  stroke: var(--muted);
  stroke-width: 1.4;
  fill: none;
}
.review-line-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 64px;
}
.review-line-state {
  color: var(--muted);
  font-size: 13px;
  line-height: 18px;
}
.review-tidied {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.review-tidied-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.review-tidied-line {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px 24px;
  padding: 14px 24px;
}
.review-tidied-line + .review-tidied-line {
  border-top: 1px solid var(--divider);
}
.review-tidied-line .review-line-end {
  align-self: center;
}
.review-tidied-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.review-tidied-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  overflow-wrap: anywhere;
}
.review-tidied-count {
  color: var(--muted);
  font-size: 12px;
  line-height: 16px;
}
.review-tidied-examples {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.review-tidied-example {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  min-width: 0;
  font-size: 13px;
  line-height: 18px;
}
.review-tidied-example .review-arrow {
  width: 12px;
  height: 12px;
}
.review-tidied-original {
  color: var(--muted);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.review-tidied-result {
  font-weight: 500;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.review-tidied-result.is-empty,
.review-tidied-original.is-empty {
  color: var(--muted);
  font-weight: 400;
}
.review-tidied-line.is-undone .review-tidied-result {
  color: var(--muted);
  text-decoration: line-through;
}

/* Preview of the download: tabs, a sticky-header grid and a pager. */
.review-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.review-preview-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
}
.review-section-title {
  margin: 0;
  font-size: 20px;
  font-weight: 650;
  line-height: 26px;
  letter-spacing: -0.01em;
}
.review-section-title:focus {
  outline: none;
}
.review-tab-count {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}
.review-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.review-chips-label {
  padding-right: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 18px;
}
.review-chip,
.review-head-source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 12px;
  line-height: 16px;
  text-align: left;
}
.review-chip {
  min-height: 32px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--field);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
.review-head-source {
  padding: 0;
  white-space: nowrap;
}
.review-head-source:hover:not(:disabled) {
  color: var(--ink);
}
.review-chip .icon,
.review-head-source .icon {
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 1.3;
  fill: none;
}
.review-grid-card {
  padding: 0;
  overflow: hidden;
}
.review-grid-wrap {
  /* Positioned, so the screen-reader-only labels in its cells scroll and clip with it. */
  position: relative;
  max-height: 560px;
  overflow: auto;
}
.review-grid {
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.review-grid th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--header);
  text-align: left;
  vertical-align: top;
}
.review-grid th + th,
.review-grid td + td {
  border-left: 1px solid var(--divider);
}
.review-grid th.is-open {
  box-shadow: inset 0 -2px 0 var(--ink);
}
.review-head-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
}
.review-head-label.mono-head {
  font-family: var(--mono);
  font-weight: 400;
}
.review-grid td {
  max-width: 280px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--divider);
  font-size: 14px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.review-row-open {
  min-width: 32px;
  min-height: 28px;
  padding: 0 4px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: underline 1px transparent;
  text-underline-offset: 3px;
  cursor: pointer;
}
.review-row-open:hover:not(:disabled) {
  background: var(--neutral-tint);
  color: var(--ink);
  text-decoration-color: var(--underline);
}
.review-grid .review-row-number {
  width: 56px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
}
.review-grid tr.is-current td {
  background: var(--field);
}
.review-grid tr.is-current td:first-child {
  box-shadow: inset 3px 0 0 var(--ink);
  color: var(--ink);
}
.review-grid td.is-changed {
  background: rgb(255 112 45 / 8%);
}
.review-grid tr.is-current td.is-changed {
  background: rgb(255 112 45 / 12%);
}
.review-grid td.is-edited,
.review-grid tr.is-current td.is-edited {
  background: var(--success-tint);
}
.review-grid td.is-undone,
.review-grid tr.is-current td.is-undone {
  background: var(--neutral-tint);
}
.review-grid-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 20px;
  border-top: 1px solid var(--divider);
}
.review-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 18px;
}
.review-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.review-swatch.is-changed {
  background: rgb(255 112 45 / 18%);
}
.review-swatch.is-edited {
  margin-left: 10px;
  background: rgb(102 204 85 / 32%);
}
.review-range {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 16px;
}
.review-page-step {
  border: 1px solid var(--line-strong);
  background: var(--field);
  color: var(--ink);
}
.review-page-step .icon {
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
}

/* Where a column comes from: floats under its heading (board F3). */
.review-popover {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(360px, 100%);
  padding: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--field);
  box-shadow:
    0 12px 32px rgb(0 0 0 / 10%),
    0 2px 6px rgb(0 0 0 / 5%);
}
.review-popover-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.review-popover-label {
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}
.review-popover-goes {
  color: var(--muted);
  font-size: 13px;
  line-height: 18px;
}
.review-popover-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Below this the card is too narrow beside the rail: it goes above. */
@media (max-width: 1180px) {
  .review-area {
    grid-template-areas:
      "left"
      "card"
      "done";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 16px;
  }
  .review-left-rail {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .review-left-rail .review-rail-title {
    margin-left: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
  }
  .review-left-list {
    display: none;
  }
  .review-left-pick {
    display: block;
  }
  .review-left-select {
    height: 48px;
    font-weight: 600;
  }
  .review-left-note {
    margin-left: 0;
  }
  .review-done-rail {
    padding-top: 8px;
  }
}
@media (max-width: 700px) {
  .review-title-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    width: 100%;
    gap: 8px;
  }
  .review-title-actions .button-text {
    align-self: center;
  }
  .review-card-header {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 12px 14px 16px;
  }
  .review-position {
    flex: 1 1 auto;
  }
  .review-track {
    flex-basis: 100%;
    order: 3;
  }
  .review-step {
    width: 44px;
    min-height: 44px;
    padding: 0;
  }
  .review-step-label {
    display: none;
  }
  .review-card-body {
    padding: 16px 8px 8px;
  }
  .review-card-body > :not(.review-fields, .review-compare-wrap) {
    margin-inline: 10px;
  }
  .review-name {
    font-size: 22px;
    line-height: 28px;
  }
  .review-field {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 10px;
  }
  .review-field.is-problem,
  .review-field.is-editing,
  .review-field.is-added {
    padding: 12px 10px;
  }
  .review-field-name {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
  }
  .review-field-end,
  .review-field-note {
    align-items: flex-start;
    text-align: left;
  }
  .review-field-undo,
  .review-done-link {
    min-height: 44px;
  }
  .review-fix {
    min-height: 44px;
    padding-inline: 20px;
  }
  .review-field-buttons,
  .review-loose .review-fix {
    margin-top: 6px;
  }
  .review-field-buttons .button {
    min-width: 106px;
  }
  .review-field-choices {
    grid-column: 1;
  }
  .review-empty-line {
    margin-inline: 10px;
  }
  .review-card-footer {
    padding: 12px 16px 16px;
  }
  .review-card-footer .button {
    flex: 1 1 100%;
    min-height: 48px;
  }
  .review-progress {
    flex-basis: 100%;
    margin-left: 0;
    text-align: center;
  }
  .review-compare-field {
    width: auto;
  }
  .review-done-card {
    padding: 20px;
  }
  .review-done-actions .button {
    flex: 1 1 100%;
    min-height: 48px;
  }
  .review-grid-wrap {
    max-height: 420px;
  }
  .review-legend {
    display: none;
  }
  .review-page-step {
    width: 44px;
    height: 44px;
  }
  .review-popover {
    width: 100%;
  }
  .review-tidied-line {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px 16px;
  }
  .review-tidied-line .review-line-end {
    justify-content: flex-start;
    min-width: 0;
  }
}
/* ==== end review changes ==== */

/* A contact the agent left out: kept in the preview so rows keep their
   places, but not in the download. */
.review-grid tr.is-left-out td {
  text-decoration: line-through;
  color: var(--muted);
}
.review-left-out {
  margin: 0 0 12px;
  color: var(--muted);
}

/* A contact the agent merged (board G7): which row's values won, and the
   ways to change that or take the merge back. */
.review-merged {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--success-tint);
  font-size: 14px;
  line-height: 20px;
}
.review-merged-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 600;
}
.review-merged-title::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    var(--green)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M2 5.2L4.1 7.2L8 3' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 10px 10px no-repeat;
}
.review-merged-title:focus {
  outline: none;
}
.review-merged-text {
  margin: 0;
}
.review-merged-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ==== check categories (board D6) ==== */
/* The prefix for the agent's own lists and the import tag, above the tags;
   the tag rows reuse the lanes, selects and footer above. */
.catcheck-settings {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: flex-start;
}
.catcheck-prefix {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(360px, 100%);
}
.catcheck-label {
  color: var(--muted);
  font-size: 13px;
  line-height: 18px;
}
.catcheck-input {
  width: 320px;
  max-width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--field);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}
.catcheck-input[aria-invalid="true"] {
  border-color: var(--error-text);
}
.catcheck-import {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 26px;
}
.catcheck-import .caption {
  padding-left: 32px;
}
.catcheck-check {
  display: inline-flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 20px;
  cursor: pointer;
}
.catcheck-check input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--primary);
}
.catcheck-count {
  display: flex;
  gap: 8px;
  align-items: baseline;
  min-width: 0;
}
.catcheck-count .mono {
  flex-shrink: 0;
  width: 44px;
  font-size: 12px;
}
.catcheck-list .checkcols-select {
  padding-right: 128px;
}
.catcheck-kind {
  position: absolute;
  top: 50%;
  right: 36px;
  color: var(--muted);
  font-size: 11px;
  line-height: 14px;
  text-transform: uppercase;
  transform: translateY(-50%);
  pointer-events: none;
}
.catcheck-own {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  grid-column: 2 / -1;
}
.catcheck-own-input {
  width: 280px;
  height: 36px;
}
.catcheck-rename {
  font-size: 13px;
}
.catcheck-actions {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-left: auto;
}
/* The import tag on the download summary when no column fills Categories (D7). */
.download-import {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.download-import .caption {
  padding-left: 32px;
}
@media (max-width: 700px) {
  .catcheck-settings {
    flex-direction: column;
    gap: 20px;
  }
  .catcheck-import {
    padding-top: 0;
  }
  .catcheck-own {
    grid-column: auto;
  }
  .catcheck-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    width: 100%;
  }
}
/* ==== end check categories ==== */