/* Per-recipient signing (Pro only) — /sign page's lt-form.
   Light theme, inline with the rest of the signed-in surfaces. */

.lt-wrap {
  max-width: 920px;
  margin: 0 auto;
  padding: 48px clamp(24px, 4vw, 48px) 96px;
}

.lt-header h1 {
  margin: 0 0 8px;
  font-size: 1.75rem;
  color: var(--ink);
}
.lt-header .subtitle {
  margin: 0 0 24px;
  color: var(--fg-dim);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.lt-fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px 20px;
  margin-bottom: 16px;
  background: var(--surface);
}

.lt-fieldset legend {
  padding: 0 8px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.7rem;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.lt-fieldset label {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
}

.lt-fieldset input[type="text"],
.lt-fieldset select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  padding: 10px 12px;
  font-size: 0.95rem;
  font-family: inherit;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  background: var(--bone);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.lt-fieldset input:focus,
.lt-fieldset select:focus {
  border-color: var(--ink);
}

.lt-help {
  margin: 0 0 12px;
  color: var(--fg-dim);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Recipient list — rounded-pill inputs that match the
   "+ Add recipient" pill button's silhouette. Each row is a
   relative-positioned wrapper with the input filling the row and
   a small absolute × button hugged to the right edge of the
   pill, so the row reads as one piece rather than an input
   plus a separate square remove button.

   Pill input dimensions and border match .drop-cta--ghost so
   the entire recipients block reads as a coherent pill family
   (the row pills + the Add-recipient pill have the same
   border-radius, border weight, and overall height). */
.lt-labels {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lt-labels li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Each recipient row = a pill input wrapper (.lt-row) holding
   the text input + circular × remove button, with a small mono
   filename preview line below (.lt-preview) showing what file
   that recipient ends up with in the zip. */
.lt-row {
  position: relative;
  display: block;
}
.lt-labels input[type="text"] {
  width: 100%;
  padding: 12px 50px 12px 20px; /* right pad reserves room for × */
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.2;
  transition: background 120ms ease, border-color 120ms ease;
}
.lt-labels input[type="text"]::placeholder {
  color: rgba(10, 10, 10, 0.4);
}
.lt-labels input[type="text"]:hover {
  background: rgba(10, 10, 10, 0.04);
}
.lt-labels input[type="text"]:focus {
  outline: none;
  background: rgba(10, 10, 10, 0.06);
}

/* × button — rounded-square ghost with a real SVG icon (rounded
   stroke caps), so it looks like the rest of the design system
   instead of the OS-default ×. Lives inside the pill at the
   right edge of .lt-row, centred vertically; the inner SVG is
   itself flex-centred so the strokes always sit at the visual
   middle of the button regardless of font-metrics quirks. */
.lt-remove {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  color: rgba(10, 10, 10, 0.55);
  border: 1px solid transparent;
  /* Full circle so the hover highlight echoes the rounded-pill
     shape of the parent input — the button reads as a round
     chip nested inside the pill, not a rounded-square pasted on
     top. */
  border-radius: 50%;
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.lt-remove svg {
  width: 16px;
  height: 16px;
  display: block;
}
.lt-remove:hover {
  background: rgba(10, 10, 10, 0.08);
  color: var(--ink);
}
.lt-remove:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* "+ Add recipient" pill — same drop-cta--ghost shell, but the
   leading + is now an SVG icon (rounded caps) sitting next to
   the label. Flex layout vertically centres icon + text. */
.sign-add-recipient {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sign-add-recipient svg {
  width: 14px;
  height: 14px;
  display: block;
  color: currentColor;
  flex: 0 0 auto;
}

/* Filename preview under each recipient row. Mono so it reads
   like a file path; dim ink so it doesn't compete with the live
   input. The whole filename is rendered as one continuous text
   element so it ellipses at the right edge like a real
   filesystem-truncated name — no middle truncation. The arrow is
   purely visual ornamentation. */
.lt-preview {
  margin: 0;
  padding: 0 0 0 22px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(10, 10, 10, 0.55);
  min-width: 0;
}
.lt-preview-arrow {
  flex: 0 0 auto;
  opacity: 0.7;
}
.lt-preview-text {
  /* Single span with all of the filename. min-width: 0 +
     overflow: hidden + ellipsis truncates from the right edge
     when the line is too narrow, mirroring how a Finder /
     Explorer column shortens a long filename. */
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* When the input is empty, dim the placeholder-name in the
   preview so it reads as "still to fill" rather than a real
   filename. The .is-empty class is set by the inline script
   when input.value.trim() is "". */
.lt-preview.is-empty {
  color: rgba(10, 10, 10, 0.32);
}

/* Estimated-time line. Sits between the recipients block and
   the action buttons, mono caps so it reads as a status hint
   and not a primary action. */
.sign-estimate {
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(10, 10, 10, 0.55);
}
.sign-estimate strong {
  color: var(--ink);
  font-weight: 600;
}

.lt-submit-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}

.lt-status {
  color: var(--fg-dim);
  font-size: 0.85rem;
  flex: 1;
}
.lt-status--err { color: var(--danger); }
.lt-status--ok  { color: var(--ink); }
.lt-status--ok a {
  color: var(--ink);
  text-decoration: underline;
  font-weight: 600;
}

/* Incognito toggle.
   Custom checkbox: native input is visually hidden (still
   keyboard + screen reader accessible); the visible affordance
   is a .lt-checkbox-box sibling that paints solid ink on
   :checked, with an ::after pseudo-element that draws a
   chartreuse-on-ink "L" rotated 45° to read as a check.
   Animation is the codepen-style two-stage draw: width 0→full
   first (the short bottom of the L), then height 0→full (the
   tall side of the L), so the tick appears to be drawn from
   the corner up. Anchored to the visual centre of the box so
   the check always lands inside the ink fill regardless of
   border-thickness tricks. */
.lt-checkbox {
  --lt-checkbox-size: 22px;
  display: flex;
  gap: 12px;
  /* Inside a `.sign-block--card` the row IS the card's only
     content, so centring the box against the title+description
     block centres it visually against the card. With the card
     padding providing the surrounding breathing room, the box
     reads as a balanced focal point next to the copy rather
     than parked at the top of the row. */
  align-items: center;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
}
.lt-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.lt-checkbox-box {
  position: relative;
  flex: 0 0 auto;
  width: var(--lt-checkbox-size);
  height: var(--lt-checkbox-size);
  background: transparent;
  border: 2px solid rgba(10, 10, 10, 0.36);
  border-radius: 6px;
  transition:
    background 220ms cubic-bezier(0.4, 0.0, 0.23, 1),
    border-color 220ms cubic-bezier(0.4, 0.0, 0.23, 1);
}
.lt-checkbox:hover .lt-checkbox-box {
  background: rgba(10, 10, 10, 0.04);
}
.lt-checkbox input[type="checkbox"]:checked + .lt-checkbox-box {
  background: var(--ink);
  border-color: var(--ink);
  animation: lt-check-shrink-bounce 220ms cubic-bezier(0.4, 0.0, 0.23, 1);
}
/* The check is an inline SVG inside the box. viewBox is 18×18 so
   the path coords sit naturally inside any box size — the SVG
   fills the box via inset: 0 + width: 100%. fill: none means we
   only draw the stroke; stroke-dasharray + stroke-dashoffset is
   the standard draw-in technique. opacity gates so the path
   doesn't flash before the delay fires. */
.lt-checkbox-box .lt-checkbox-tick {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: var(--bone);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  pointer-events: none;
  transition: opacity 80ms ease;
}
.lt-checkbox-box .lt-checkbox-tick path {
  stroke-dasharray: 18;
  stroke-dashoffset: 18;
  transition: stroke-dashoffset 240ms cubic-bezier(0.4, 0.0, 0.23, 1) 180ms;
}
.lt-checkbox input[type="checkbox"]:checked + .lt-checkbox-box .lt-checkbox-tick {
  opacity: 1;
}
.lt-checkbox input[type="checkbox"]:checked + .lt-checkbox-box .lt-checkbox-tick path {
  stroke-dashoffset: 0;
}
.lt-checkbox input[type="checkbox"]:focus-visible + .lt-checkbox-box {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.lt-checkbox-content {
  /* Vestigial wrapper kept in case some legacy markup still uses
     it — the new sign-page markup writes the title and inline
     info icon directly on .lt-checkbox-title for tighter
     alignment. */
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.lt-checkbox-title {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  letter-spacing: -0.005em;
  /* Tighter line-height keeps the box's vertical centre close
     to the title text's centre when align-items: flex-start
     parks the box at the line-box top. */
  line-height: 1.35;
}
.lt-checkbox-help {
  display: block;
  color: rgba(10, 10, 10, 0.62);
  font-size: 0.85rem;
  line-height: 1.5;
  /* Small lift below the title so the description reads as a
     paragraph that elaborates the title, not as a single
     unbroken block. */
  margin-top: 4px;
}

@keyframes lt-check-shrink-bounce {
  0%   { transform: scale(1);   }
  35%  { transform: scale(.88); }
  100% { transform: scale(1);   }
}
@media (prefers-reduced-motion: reduce) {
  .lt-checkbox-box,
  .lt-checkbox input[type="checkbox"]:checked + .lt-checkbox-box {
    transition: none;
    animation: none !important;
  }
  .lt-checkbox-box .lt-checkbox-tick,
  .lt-checkbox-box .lt-checkbox-tick path {
    transition: none !important;
  }
}

/* ---- Recent reads feed (legacy — may not be wired on /sign) ---- */
.lt-reads {
  margin-top: 48px;
  padding-top: 32px;
}
.lt-reads h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--ink);
}
.lt-reads-sub {
  color: var(--fg-dim);
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0 0 20px;
}
.lt-reads-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lt-read {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.lt-read-head {
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.4;
}
.lt-read-head strong {
  color: var(--ink);
  font-weight: 600;
}
.lt-read-meta {
  margin-top: 4px;
  color: var(--fg-dim);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.lt-reads-empty {
  color: var(--fg-dim);
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
  padding: 16px 0;
}

/* =============== Responsive =============== */
@media (max-width: 640px) {
  .lt-wrap       { padding: 32px 18px 72px; }
  .lt-fieldset   { padding: 16px 18px 18px; }
  .lt-submit-row {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 10px;
  }
  .lt-submit-row .primary-button { width: 100%; min-height: 48px; }
  /* Desktop already uses 36px buttons; keep the same here so
     mobile gets a tap target without further surgery. */
}