/* ==========================================================================
   Prepare wizard — shared chrome, step 1 (documents), step 2 (recipients)
   Every class in this file is prefixed `prep-`.
   ========================================================================== */

.prep { display: flex; flex-direction: column; }

/* ============================================================== chrome === */

.prep-head { margin-bottom: var(--s-8); }
.prep-head__bar {
  display: flex; align-items: center; gap: var(--s-5);
  margin-bottom: var(--s-6);
}
.prep-head__bar .iconbtn { flex: none; }

.prep-crumbs {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--fs-12); color: var(--tx-3); min-width: 0;
}
.prep-crumbs a { color: var(--tx-3); }
.prep-crumbs a:hover { color: var(--tx-accent); }
.prep-crumbs svg { color: var(--tx-4); }

.prep-headmeta { display: flex; align-items: center; gap: var(--s-5); flex: none; }

.prep-head__main {
  display: flex; align-items: center; gap: var(--s-8);
  flex-wrap: wrap;
}

.prep-namewrap {
  display: flex; align-items: center; gap: var(--s-4);
  flex: 1 1 320px; min-width: 0;
  padding: var(--s-2) var(--s-5) var(--s-2) var(--s-4);
  margin-left: calc(var(--s-4) * -1);
  border: 1px solid transparent; border-radius: var(--r-8);
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
  cursor: text;
}
.prep-namewrap:hover { border-color: var(--br-2); background: var(--bg-surface); }
.prep-namewrap:focus-within { border-color: var(--br-accent); background: var(--bg-surface); box-shadow: var(--sh-focus); }
.prep-namewrap__ic { color: var(--tx-4); opacity: 0; transition: opacity var(--dur-2) var(--ease); flex: none; }
.prep-namewrap:hover .prep-namewrap__ic,
.prep-namewrap:focus-within .prep-namewrap__ic { opacity: 1; }

.prep-name {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: transparent; padding: 0;
  font-size: var(--fs-24); font-weight: 640; letter-spacing: -.02em; line-height: 1.25;
  color: var(--tx-1);
}
.prep-name:focus { outline: none; }
.prep-lockedname { font-size: var(--fs-24); font-weight: 640; letter-spacing: -.02em; }

.prep-steps { flex: none; margin-left: auto; }
.prep-steps .stepper__step { border: 0; background: none; }
.prep-steps .stepper__step:disabled { cursor: default; }
.prep-steps .stepper__step.is-clickable:hover { background: var(--bg-hover); }

.prep-lockedgrid {
  display: grid; gap: var(--s-7); margin-top: var(--s-8);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* ------------------------------------------------------------- the body -- */

.prep-body { flex: 1 1 auto; }
.prep-step { display: flex; flex-direction: column; gap: var(--s-8); }

.prep-intro h2 { font-size: var(--fs-18); font-weight: 620; letter-spacing: -.012em; }
.prep-intro p { margin-top: var(--s-3); max-width: 68ch; }

.prep-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }

/* --------------------------------------------------------- sticky footer -- */

.prep-foot {
  position: sticky; bottom: var(--s-5); z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--s-5);
  margin-top: var(--s-9);
  padding: var(--s-5) var(--s-6);
  background: var(--bg-surface);
  border: 1px solid var(--br-2); border-radius: var(--r-12);
  box-shadow: var(--sh-lg);
}
.prep-foot__hint {
  font-size: var(--fs-11); color: var(--tx-3); line-height: 1.4;
  text-align: right; max-width: 40ch;
}
.prep-tipwrap { display: inline-flex; }
.prep-tipwrap .btn:disabled { pointer-events: none; }
.prep-nextshort { display: none; }

/* ========================================================= step 1: docs = */

.prep-sources {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}
.prep-src {
  display: flex; align-items: center; gap: var(--s-5);
  padding: var(--s-6);
  background: var(--bg-surface);
  border: 1px solid var(--br-1); border-radius: var(--r-10);
  box-shadow: var(--sh-xs);
  text-align: left;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.prep-src:hover { border-color: var(--a-300); box-shadow: var(--sh-sm); transform: translateY(-1px); }
.prep-src__ic {
  display: grid; place-content: center; flex: none;
  width: 34px; height: 34px; border-radius: var(--r-8);
  background: var(--a-50); color: var(--a-600);
}
.prep-src__label { font-size: var(--fs-13); font-weight: 600; }
.prep-src__sub { font-size: var(--fs-11); color: var(--tx-3); }
.prep-src--muted .prep-src__ic { background: var(--bg-sunken); color: var(--tx-3); }

.prep-drop { display: block; width: 100%; }
.prep-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ----------------------------------------------------------- upload rows -- */

.prep-uploads { display: flex; flex-direction: column; gap: var(--s-4); }
.prep-uprow {
  display: flex; align-items: center; gap: var(--s-6);
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--br-1); border-radius: var(--r-8);
  background: var(--bg-sunken);
  animation: prepRowIn var(--dur-3) var(--ease-out);
}
.prep-uprow__ic { display: grid; place-content: center; width: 18px; height: 18px; flex: none; color: var(--a-500); }
.prep-uprow__stage {
  font-size: var(--fs-11); color: var(--tx-3); flex: none;
  min-width: 68px; text-align: right;
}
.prep-uprow.is-done { border-color: var(--ok-100); background: var(--ok-50); }
.prep-uprow.is-done .prep-uprow__ic { color: var(--ok-500); }
.prep-uprow.is-done .prog__fill { background: var(--ok-500); }
.prep-uprow.is-err {
  border-color: var(--err-100); background: var(--err-50); color: var(--err-600);
  align-items: flex-start;
}
.prep-uprow.is-err .prep-uprow__ic { color: var(--err-500); }
.prep-uprow.is-err .prog__fill { background: var(--err-500); }

@keyframes prepRowIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------- document rows --- */

.prep-doclist { display: flex; flex-direction: column; gap: var(--s-4); }
.prep-doc {
  display: grid;
  grid-template-columns: 22px 54px minmax(0, 1fr) auto;
  align-items: center; gap: var(--s-6);
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--br-1); border-radius: var(--r-10);
  background: var(--bg-surface);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.prep-doc:hover { border-color: var(--br-2); box-shadow: var(--sh-xs); }
.prep-doc.is-dragging {
  box-shadow: var(--sh-lg); border-color: var(--a-300);
  position: relative; z-index: 2; cursor: grabbing;
}
.prep-doc__grip {
  display: grid; place-content: center;
  width: 22px; height: 30px; border-radius: var(--r-4);
  color: var(--tx-4); cursor: grab; touch-action: none;
}
.prep-doc__grip:hover { background: var(--bg-hover); color: var(--tx-2); }
.prep-doc__thumb { display: block; width: 54px; overflow: hidden; border-radius: 2px; flex: none; }
.prep-doc__main { min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.prep-doc__name {
  width: 100%; min-width: 0;
  border: 1px solid transparent; border-radius: var(--r-6);
  background: transparent; padding: var(--s-2) var(--s-3);
  margin-left: calc(var(--s-3) * -1);
  font-size: var(--fs-13); font-weight: 570; color: var(--tx-1);
  text-overflow: ellipsis;
}
.prep-doc__name:hover { border-color: var(--br-2); background: var(--bg-surface); }
.prep-doc__name:focus { outline: none; border-color: var(--br-accent); box-shadow: var(--sh-focus); background: var(--bg-surface); }
.prep-doc__actions { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.prep-docsum { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--br-1); }

/* ------------------------------------------------------------- pickers --- */

.prep-pick { display: flex; flex-direction: column; gap: var(--s-6); }
.prep-pick__bar { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.prep-pick__folder { width: auto; min-width: 150px; }
.prep-pick__list {
  display: flex; flex-direction: column; gap: var(--s-4);
  max-height: 52vh; overflow-y: auto;
  margin: 0 calc(var(--s-2) * -1); padding: 0 var(--s-2);
}
.prep-pick__row {
  display: flex; align-items: center; gap: var(--s-6);
  padding: var(--s-6);
  border: 1px solid var(--br-1); border-radius: var(--r-8);
  background: var(--bg-surface);
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.prep-pick__row:hover { border-color: var(--br-2); background: var(--bg-hover); }
.prep-pick__ic {
  display: grid; place-content: center; flex: none;
  width: 34px; height: 34px; border-radius: var(--r-8);
  background: var(--bg-sunken); color: var(--tx-3);
}
.prep-preview { height: 100%; min-height: 0; display: flex; }
.prep-preview > .dv { flex: 1 1 auto; min-width: 0; }

/* ==================================================== step 2: recipients = */

.prep-cols {
  display: grid; gap: var(--s-8);
  grid-template-columns: minmax(0, 1fr) 316px;
  align-items: start;
}
.prep-maincol { display: flex; flex-direction: column; gap: var(--s-8); min-width: 0; }
.prep-side {
  display: flex; flex-direction: column; gap: var(--s-7);
  position: sticky; top: calc(var(--topbar-h) + var(--s-6));
  min-width: 0;
}

/* --------------------------------------------------------------- routing -- */

.prep-route { display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; }
.prep-route .switch__text { font-size: var(--fs-14); font-weight: 570; }

.prep-viz {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-5) var(--s-6);
  border: 1px dashed var(--br-2); border-radius: var(--r-8);
  background: var(--bg-sunken);
  flex: none; max-width: 100%;
}
.prep-viz__step { display: inline-flex; align-items: center; gap: var(--s-3); }
.prep-viz__num {
  display: grid; place-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--a-500); color: #fff;
  font-size: 10px; font-weight: 700;
}
.prep-viz__arrow { color: var(--tx-4); }
.prep-viz__all {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-size: var(--fs-11); font-weight: 600; color: var(--tx-3);
}

/* ---------------------------------------------------------- recipient row */

.prep-reciplist { display: flex; flex-direction: column; gap: var(--s-4); }

.prep-recip {
  display: grid;
  grid-template-columns: 22px 44px 36px minmax(120px, 1fr) minmax(170px, 1.35fr) minmax(142px, 158px) auto;
  grid-template-areas: "grip ord who name email role acts";
  align-items: start; gap: var(--s-5);
  padding: var(--s-6);
  border: 1px solid var(--br-1); border-left: 3px solid var(--rc-bd, var(--br-2));
  border-radius: var(--r-10);
  background: var(--bg-surface);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.prep-recip:hover { box-shadow: var(--sh-xs); }
.prep-recip:focus-within { border-color: var(--br-2); box-shadow: var(--sh-sm); }
.prep-recip.is-dragging { box-shadow: var(--sh-lg); position: relative; z-index: 2; cursor: grabbing; }

.prep-recip__grip {
  grid-area: grip;
  display: grid; place-content: center;
  width: 22px; height: 30px; border-radius: var(--r-4);
  color: var(--tx-4); cursor: grab; touch-action: none;
}
.prep-recip__grip:hover { background: var(--bg-hover); color: var(--tx-2); }

.prep-recip__ord { grid-area: ord; width: 46px; text-align: center; padding-inline: var(--s-2); }
.prep-recip__ord--any {
  display: grid; place-content: center; height: 28px;
  color: var(--tx-4); background: var(--bg-sunken);
  border: 1px solid var(--br-1); border-radius: var(--r-6);
}
.prep-recip__who { grid-area: who; display: flex; align-items: center; gap: var(--s-3); height: 28px; }
.prep-recip__name { grid-area: name; min-width: 0; }
.prep-recip__email { grid-area: email; min-width: 0; }
.prep-recip__role { grid-area: role; min-width: 0; }
.prep-recip__roledesc { font-size: var(--fs-11); color: var(--tx-3); line-height: 1.35; margin-top: var(--s-2); }
.prep-recip__err { margin-top: var(--s-2); }
/* `.field__error` sets display, which beats the [hidden] attribute on its own. */
.prep-step .field__error[hidden] { display: none; }
.prep-recip__acts { grid-area: acts; display: flex; align-items: center; gap: var(--s-3); height: 28px; }

.prep-recip__body {
  grid-column: 1 / -1;
  margin-top: var(--s-5); padding-top: var(--s-6);
  border-top: 1px dashed var(--br-1);
  animation: prepRowIn var(--dur-3) var(--ease-out);
}
.prep-recip__bodygrid {
  display: grid; gap: var(--s-7);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: start;
}
.prep-authextra { display: flex; flex-direction: column; gap: var(--s-4); }
.prep-authextra .input { min-width: 0; }
.prep-hostblock {
  grid-column: 1 / -1;
  padding: var(--s-6);
  border: 1px solid var(--br-1); border-radius: var(--r-8);
  background: var(--bg-sunken);
}

.prep-addrow {
  display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap;
  margin-top: var(--s-6); padding-top: var(--s-6);
  border-top: 1px solid var(--br-1);
}

/* --------------------------------------------------------- autocomplete -- */

.prep-acwrap { position: relative; min-width: 0; }
.prep-ac {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  z-index: var(--z-menu);
  max-height: 264px; overflow-y: auto;
  padding: var(--s-3);
  background: var(--bg-raised);
  border: 1px solid var(--br-2); border-radius: var(--r-8);
  box-shadow: var(--sh-lg);
  animation: prepRowIn var(--dur-2) var(--ease-out);
  min-width: 232px;
}
.prep-ac[hidden] { display: none; }
.prep-ac__opt {
  display: flex; align-items: center; gap: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-6);
  cursor: pointer;
}
.prep-ac__opt.is-active { background: var(--bg-selected); }
.prep-ac__opt.is-active .t-13 { color: var(--tx-accent); font-weight: 570; }

/* -------------------------------------------------------------- issues --- */

.prep-issuelist { margin: var(--s-3) 0 0; padding-left: var(--s-8); }
.prep-issuelist li {
  list-style: disc; font-size: var(--fs-12); margin-bottom: var(--s-1); line-height: 1.5;
}

/* ---------------------------------------------------------- side panels -- */

.prep-order { display: flex; flex-direction: column; gap: var(--s-6); }
.prep-order__step { display: flex; gap: var(--s-5); align-items: flex-start; }
.prep-order__num {
  display: grid; place-content: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--a-50); color: var(--a-600);
  font-size: var(--fs-11); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.prep-order__chip {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: 1px solid color-mix(in srgb, var(--rc-bd) 46%, transparent);
  border-radius: var(--r-6);
  background: var(--rc-soft, var(--bg-sunken));
  color: var(--rc-ink, var(--tx-1));
  min-width: 0;
}
.prep-order__chip .muted { color: color-mix(in srgb, var(--rc-ink) 74%, transparent); }
/* The recipient palette does not flip with the theme — soften it instead. */
:root[data-theme="dark"] .prep-order__chip {
  background: color-mix(in srgb, var(--rc-bd) 22%, transparent);
  border-color: color-mix(in srgb, var(--rc-bd) 52%, transparent);
  color: var(--tx-1);
}
:root[data-theme="dark"] .prep-order__chip .muted { color: var(--tx-3); }

/* ========================================================== responsive == */

@media (max-width: 1180px) {
  .prep-cols { grid-template-columns: minmax(0, 1fr); }
  .prep-side { position: static; flex-direction: row; flex-wrap: wrap; }
  .prep-side > .card { flex: 1 1 280px; }
}

@media (max-width: 1080px) {
  .prep-recip {
    grid-template-columns: 22px 46px 40px minmax(0, 1fr) auto;
    grid-template-areas:
      "grip ord who name acts"
      ".    .   .   email email"
      ".    .   .   role role";
  }
}

@media (max-width: 900px) {
  .prep-head__main { gap: var(--s-6); }
  .prep-steps { margin-left: 0; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .prep-steps::-webkit-scrollbar { display: none; }
  .prep-name { font-size: var(--fs-20); }
  .prep-foot__hint { display: none; }
  .prep-nextlabel { display: none; }
  .prep-nextshort { display: inline; }
}

@media (max-width: 720px) {
  .prep-hide-sm { display: none; }
}

@media (max-width: 640px) {
  .prep-doc {
    grid-template-columns: 22px 44px minmax(0, 1fr);
    grid-template-areas:
      "grip thumb main"
      ".    acts  acts";
    row-gap: var(--s-5);
  }
  .prep-doc__grip { grid-area: grip; }
  .prep-doc__thumb { grid-area: thumb; width: 44px; }
  .prep-doc__main { grid-area: main; }
  .prep-doc__actions { grid-area: acts; }

  .prep-recip {
    grid-template-columns: 22px 46px 40px minmax(0, 1fr);
    grid-template-areas:
      "grip ord who acts"
      "name name name name"
      "email email email email"
      "role role role role";
    row-gap: var(--s-5);
  }
  .prep-recip__acts { justify-content: flex-end; flex-wrap: wrap; height: auto; }
  .prep-recip__bodygrid { grid-template-columns: minmax(0, 1fr); }
  .prep-two { grid-template-columns: minmax(0, 1fr); }
  .prep-pick__row { flex-wrap: wrap; }
  .prep-src { padding: var(--s-5); }
  .prep-foot {
    bottom: 0; margin-top: var(--s-8);
    border-radius: var(--r-10);
    padding: var(--s-4) var(--s-5); gap: var(--s-4);
  }
}

@media (max-width: 420px) {
  .prep-sources { grid-template-columns: minmax(0, 1fr); }
  .prep-hide-xs { display: none; }
}