/* ============================================================
   fax.css — CxFax, "The fax pile, finally readable."
   Two-pane fax-inbox set piece: AI summary panel (left) + faux
   fax page with a CSS-only scanning sweep (right). Everything
   is namespaced under .cx-fx; tokens inherited from styles.css,
   comms accent teal layered under the house indigo. One shared
   10s cycle (--fx-cycle) keeps scan → fields → chip in sync.
   ============================================================ */

.cx-fx {
  --fx-teal: #5a82c2;
  --fx-teal-deep: #3d63a4;
  --fx-teal-lite: #8aa6dd;
  --fx-cycle: 5s;
  position: relative;
  background: linear-gradient(180deg, var(--paper), #fff 34%);
}

.cx-fx .cx-fx-head .eyebrow {
  color: var(--fx-teal-deep);
}
.cx-fx .cx-fx-head .h2 {
  margin: 14px 0 12px;
}
.cx-fx .cx-fx-head .lead {
  max-width: 58ch;
}

/* ============================================================
   STAGE — one soft-elevated surface split into two calm panes
   ============================================================ */
.cx-fx .cx-fx-stage {
  margin-top: clamp(34px, 5vw, 58px);
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  background: linear-gradient(180deg, #fff, var(--paper));
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

/* ── LEFT: AI summary panel ─────────────────────────────── */
.cx-fx .cx-fx-summary {
  padding: clamp(26px, 3.4vw, 46px) clamp(24px, 3.2vw, 48px)
    clamp(26px, 3vw, 40px);
  min-width: 0;
}

.cx-fx .cx-fx-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--fx-teal) 26%, #fff);
  background: color-mix(in srgb, var(--fx-teal) 8%, #fff);
  color: var(--fx-teal-deep);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.cx-fx .cx-fx-badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fx-teal);
  animation: cx-fx-pulse 1.4118s ease-out infinite;
}

.cx-fx .cx-fx-field {
  padding: 15px 0 14px;
  border-bottom: 1px solid var(--line);
}
.cx-fx .cx-fx-f1 {
  margin-top: 18px;
}

.cx-fx .cx-fx-label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-40);
}

.cx-fx .cx-fx-value {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.cx-fx .cx-fx-value--gist {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink-70);
}

.cx-fx .cx-fx-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.cx-fx .cx-fx-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-70);
}
.cx-fx .cx-fx-list--findings li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--indigo);
  opacity: 0.55;
  transform: translateY(-2px);
}
.cx-fx .cx-fx-list--actions li::before {
  content: "✓";
  flex: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--fx-teal-deep);
}

/* match chip — snaps in last */
.cx-fx .cx-fx-chip {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 15px 8px 8px;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--fx-teal) 30%, #fff);
  background: color-mix(in srgb, var(--fx-teal) 9%, #fff);
  box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--fx-teal) 35%, transparent);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  white-space: nowrap;
}
.cx-fx .cx-fx-ava {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--indigo), var(--fx-teal-deep));
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
  letter-spacing: 0.03em;
}
.cx-fx .cx-fx-conf {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fx-teal-deep);
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--fx-teal) 24%, #fff);
  border-radius: var(--r-pill);
  padding: 3px 9px;
}

/* ── RIGHT: the fax page being read ─────────────────────── */
.cx-fx .cx-fx-doc {
  border-left: 1px solid var(--line);
  background:
    radial-gradient(95% 75% at 72% 18%, var(--periwinkle) 0%, transparent 62%),
    linear-gradient(180deg, #f4f6fe, var(--paper));
  display: grid;
  place-items: center;
  padding: clamp(26px, 3.2vw, 46px);
  min-width: 0;
}

.cx-fx .cx-fx-page {
  position: relative;
  width: min(330px, 100%);
  aspect-ratio: 17 / 21;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow:
    var(--shadow-2),
    0 34px 60px -34px color-mix(in srgb, var(--indigo) 30%, transparent);
  transform: rotate(0.5deg);
  overflow: hidden;
}

.cx-fx .cx-fx-page-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid color-mix(in srgb, var(--ink) 72%, #fff);
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.11em;
  color: var(--ink-60);
}

.cx-fx .cx-fx-re {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.045em;
  color: var(--ink-70);
}

.cx-fx .cx-fx-para {
  margin-top: 16px;
}
.cx-fx .cx-fx-line {
  display: block;
  height: 7px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 9%, #fff);
  margin-top: 9px;
}
.cx-fx .cx-fx-line.w42 { width: 42%; }
.cx-fx .cx-fx-line.w58 { width: 58%; }
.cx-fx .cx-fx-line.w64 { width: 64%; }
.cx-fx .cx-fx-line.w76 { width: 76%; }
.cx-fx .cx-fx-line.w86 { width: 86%; }
.cx-fx .cx-fx-line.w88 { width: 88%; }
.cx-fx .cx-fx-line.w90 { width: 90%; }
.cx-fx .cx-fx-line.w92 { width: 92%; }
.cx-fx .cx-fx-line.w94 { width: 94%; }
.cx-fx .cx-fx-line.w96 { width: 96%; }
.cx-fx .cx-fx-line.w97 { width: 97%; }
.cx-fx .cx-fx-line.w100 { width: 100%; }

/* the two lines the AI keys its findings on — tint after the sweep */
.cx-fx .cx-fx-line.is-hit {
  animation: cx-fx-hit var(--fx-cycle) ease infinite;
}

.cx-fx .cx-fx-sig {
  position: absolute;
  right: 24px;
  bottom: 16px;
  display: grid;
  justify-items: end;
  gap: 2px;
  color: var(--ink-60);
}
.cx-fx .cx-fx-sig span {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  color: var(--ink-40);
  border-top: 1px solid var(--line);
  padding-top: 4px;
}

/* scanning sweep — the bar's body doubles as the "already read"
   tint above the bright line, so the wash grows as it descends */
.cx-fx .cx-fx-scanwrap {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.cx-fx .cx-fx-scanbar {
  position: absolute;
  inset: 0;
  transform: translateY(-101%);
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--fx-teal) 4%, transparent) 66%,
    color-mix(in srgb, var(--fx-teal) 11%, transparent) 96%,
    transparent 100%
  );
  animation: cx-fx-scan var(--fx-cycle) cubic-bezier(0.4, 0.05, 0.45, 0.95)
    infinite;
  will-change: transform;
}
.cx-fx .cx-fx-scanbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2.5px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--fx-teal) 16%,
    var(--fx-teal-lite) 50%,
    var(--fx-teal) 84%,
    transparent
  );
  box-shadow: 0 0 16px 3px color-mix(in srgb, var(--fx-teal) 45%, transparent);
}

/* ── stage foot: outbound status + unmatched queue, kept quiet ── */
.cx-fx .cx-fx-stagefoot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(22px, 3vw, 44px);
  padding: 13px clamp(24px, 3.2vw, 48px);
  border-top: 1px solid var(--line);
  background: #fff;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-60);
}
.cx-fx .cx-fx-foot-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cx-fx .cx-fx-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.cx-fx .cx-fx-dot--ok {
  background: var(--fx-teal);
}
.cx-fx .cx-fx-dot--q {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--indigo);
}

/* ============================================================
   POINTS — de-boxed editorial row, rule-topped
   ============================================================ */
.cx-fx .cx-fx-points {
  list-style: none;
  margin: clamp(42px, 5vw, 66px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(22px, 3vw, 40px);
}
.cx-fx .cx-fx-points li {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  min-width: 0;
}
.cx-fx .cx-fx-idx {
  display: block;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--fx-teal-deep);
}
.cx-fx .cx-fx-pt-k {
  display: block;
  margin-bottom: 7px;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.cx-fx .cx-fx-points p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.58;
  color: var(--ink-60);
}

.cx-fx .cx-fx-note {
  margin: clamp(26px, 3.4vw, 40px) 0 0;
  font-size: 13px;
  color: var(--ink-40);
}

/* ============================================================
   THE CYCLE — one 10s loop: sweep (0–24%) → fields (25–42%)
   → chip snap (44%) → hold → fade (92–97%) → restart
   ============================================================ */
@keyframes cx-fx-scan {
  0%   { transform: translateY(-101%); opacity: 1; }
  24%  { transform: translateY(0);     opacity: 1; }
  28%  { transform: translateY(0);     opacity: 0; }
  100% { transform: translateY(0);     opacity: 0; }
}

.cx-fx .cx-fx-f1 { animation: cx-fx-r1 var(--fx-cycle) ease infinite; }
.cx-fx .cx-fx-f2 { animation: cx-fx-r2 var(--fx-cycle) ease infinite; }
.cx-fx .cx-fx-f3 { animation: cx-fx-r3 var(--fx-cycle) ease infinite; }
.cx-fx .cx-fx-f4 { animation: cx-fx-r4 var(--fx-cycle) ease infinite; }
.cx-fx .cx-fx-chip {
  animation: cx-fx-snap var(--fx-cycle) cubic-bezier(0.3, 1.4, 0.5, 1) infinite;
}

@keyframes cx-fx-r1 {
  0%, 24%    { opacity: 0; transform: translateY(9px); }
  28.5%, 92% { opacity: 1; transform: translateY(0); }
  97%, 100%  { opacity: 0; transform: translateY(9px); }
}
@keyframes cx-fx-r2 {
  0%, 27.5%  { opacity: 0; transform: translateY(9px); }
  32%, 92%   { opacity: 1; transform: translateY(0); }
  97%, 100%  { opacity: 0; transform: translateY(9px); }
}
@keyframes cx-fx-r3 {
  0%, 31%    { opacity: 0; transform: translateY(9px); }
  35.5%, 92% { opacity: 1; transform: translateY(0); }
  97%, 100%  { opacity: 0; transform: translateY(9px); }
}
@keyframes cx-fx-r4 {
  0%, 34.5%  { opacity: 0; transform: translateY(9px); }
  39%, 92%   { opacity: 1; transform: translateY(0); }
  97%, 100%  { opacity: 0; transform: translateY(9px); }
}
@keyframes cx-fx-snap {
  0%, 43%   { opacity: 0; transform: scale(0.82) translateY(6px); }
  46.5%     { opacity: 1; transform: scale(1.05) translateY(0); }
  48.5%, 92%{ opacity: 1; transform: scale(1) translateY(0); }
  97%, 100% { opacity: 0; transform: scale(0.9) translateY(4px); }
}
@keyframes cx-fx-hit {
  0%, 30% {
    background: color-mix(in srgb, var(--ink) 9%, #fff);
    box-shadow: none;
  }
  34%, 92% {
    background: color-mix(in srgb, var(--fx-teal) 30%, #fff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-teal) 10%, transparent);
  }
  96%, 100% {
    background: color-mix(in srgb, var(--ink) 9%, #fff);
    box-shadow: none;
  }
}
@keyframes cx-fx-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fx-teal) 40%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px transparent; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .cx-fx .cx-fx-stage {
    grid-template-columns: 1fr;
  }
  .cx-fx .cx-fx-doc {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .cx-fx .cx-fx-points {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px) {
  .cx-fx .cx-fx-points {
    grid-template-columns: 1fr;
  }
  .cx-fx .cx-fx-page {
    width: min(300px, 100%);
  }
  .cx-fx .cx-fx-chip {
    white-space: normal;
  }
  .cx-fx .cx-fx-summary {
    padding: 22px 18px;
  }
  .cx-fx .cx-fx-doc {
    padding: 22px 18px;
  }
  .cx-fx .cx-fx-stagefoot {
    padding: 13px 18px;
  }
}
@media (max-width: 460px) {
  .cx-fx .cx-fx-value {
    font-size: 15px;
  }
  .cx-fx .cx-fx-page {
    width: min(260px, 100%);
    padding: 16px 18px;
  }
}

/* ============================================================
   REDUCED MOTION — everything visible, no sweep, no loop
   ============================================================ */
@media (prefers-reduced-motion: reduce), (max-width: 700px) {
  .cx-fx .cx-fx-scanbar,
  .cx-fx .cx-fx-badge i,
  .cx-fx .cx-fx-f1,
  .cx-fx .cx-fx-f2,
  .cx-fx .cx-fx-f3,
  .cx-fx .cx-fx-f4,
  .cx-fx .cx-fx-chip,
  .cx-fx .cx-fx-line.is-hit {
    animation: none;
  }
  .cx-fx .cx-fx-scanwrap {
    display: none;
  }
  .cx-fx .cx-fx-line.is-hit {
    background: color-mix(in srgb, var(--fx-teal) 30%, #fff);
  }
}