/* ===========================================================================================
 * DJYTL P2P — jurisdiction discovery, payment rails, and the release dialog.
 *
 * Built ONLY from djytl-ui.css tokens. It is a separate sheet rather than an addition to
 * djytl-ui.css because that file is loaded by all 46 pages and is being edited by other work in
 * flight; a new sheet cannot collide, and every rule here is prefixed `jx-` so it cannot reach
 * anything it was not written for.
 *
 * The design language it extends, honestly: green-black vault surfaces on a 4-step ramp, GOLD as
 * the single accent, depth expressed with 1px borders rather than shadow (there is no shadow
 * token in this system and this sheet does not invent one, except for the modal, which has to
 * detach from the page to be a modal at all), two radii only, Inter for prose and IBM Plex Mono
 * for anything numeric. MUZA runs the same engine under a silver, editorial skin.
 * ======================================================================================== */

/* ---------------------------------------------------------------- the three filters */
.jx-filters {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
}
.jx-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 190px; }
.jx-f > span {
  font: 500 11.5px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--tx-3);
}
.jx-f > select {
  width: 100%; min-height: 40px; padding: 0 10px;
  background: var(--bg); color: var(--tx);
  border: 1px solid var(--line-2); border-radius: var(--r);
  font: 400 14px/1 var(--sans);
}
.jx-f > select:focus { outline: none; border-color: var(--gold); }
.jx-clear { flex: 0 0 auto; }

/* The filter read back as a sentence. A board that narrows silently cannot be debugged by the
 * person using it, so this line is not decoration. */
.jx-said {
  margin: 10px 0 0; font: 400 13px/1.5 var(--sans); color: var(--tx-2);
  padding-left: 10px; border-left: 2px solid var(--line-gold);
}

/* ---------------------------------------------------------------- the empty state
 * Deliberately NOT the thin grey `.empty` used elsewhere: an empty jurisdiction is a RESULT and
 * is given the weight of one, with the alternatives as real buttons. */
.jx-empty { padding: 26px 20px; background: var(--bg-1); border-top: 1px solid var(--line-soft); }
.jx-empty-h { font: 500 15px/1.4 var(--sans); color: var(--tx); margin-bottom: 6px; }
.jx-empty-p { margin: 0 0 14px; font: 400 13px/1.6 var(--sans); color: var(--tx-3); max-width: 62ch; }
.jx-sug-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.jx-sug-l {
  flex: 0 0 100%; font: 500 11px/1 var(--sans); letter-spacing: .05em;
  text-transform: uppercase; color: var(--tx-3); margin-bottom: 2px;
}
.jx-sug {
  padding: 7px 12px; border-radius: 99px; cursor: pointer;
  background: var(--gold-tint); border: 1px solid var(--line-gold); color: var(--gold-hi);
  font: 500 12.5px/1 var(--sans);
  transition: background var(--duration-fast, 160ms) ease, border-color 160ms ease;
}
.jx-sug:hover { background: rgba(214, 178, 74, .18); border-color: var(--gold); }

/* The not-tied-to-a-jurisdiction group. Shown, never hidden; labelled, never passed off as local. */
.jx-untied {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 18px; background: var(--bg-2);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-soft);
}
.jx-untied > b { font: 600 12.5px/1.3 var(--sans); color: var(--tx-2); }
.jx-untied > span { font: 400 12px/1.5 var(--sans); color: var(--tx-3); max-width: 70ch; }

/* ---------------------------------------------------------------- payment rails */
.jx-rails { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 4px 0 18px; }
.jx-rail {
  display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer;
  padding: 13px 14px; background: var(--bg); color: var(--tx);
  border: 1px solid var(--line-2); border-radius: var(--r);
  transition: border-color 160ms ease, background 160ms ease;
}
.jx-rail:hover { border-color: var(--line-gold); }
.jx-rail.on { border-color: var(--gold); background: var(--gold-tint); }
.jx-rail > b { font: 600 14px/1.2 var(--sans); }
.jx-rail.on > b { color: var(--gold-hi); }
.jx-rail-k {
  align-self: flex-start; padding: 1px 7px; border-radius: 99px;
  font: 500 10.5px/1.6 var(--sans); letter-spacing: .04em; text-transform: uppercase;
  background: var(--bg-3); color: var(--tx-3); border: 1px solid var(--line);
}
.jx-rail-b { font: 400 12px/1.5 var(--sans); color: var(--tx-3); }
.jx-rail-s { font: 400 11.5px/1.4 var(--mono); color: var(--tx-3); }

.jx-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.jx-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 0; }
.jx-field > span:first-child { font: 500 12px/1.3 var(--sans); color: var(--tx-2); }
.jx-opt { font: 400 11px/1 var(--sans); color: var(--tx-3); }
/* "encrypted" is a statement of fact about this field, so it is marked on the field itself
 * rather than claimed once in a paragraph nobody reads. */
.jx-lock {
  padding: 0 5px; border-radius: 3px; font: 500 10px/1.6 var(--sans);
  letter-spacing: .04em; text-transform: uppercase;
  background: var(--green-tint); color: var(--brand-green); border: 1px solid rgba(47, 158, 74, .3);
}
.jx-err { font: 400 12px/1.45 var(--sans); color: var(--down); }
.jx-err.lock { color: var(--warn); }
.jx-caution { margin: 0 0 14px; border-left-color: var(--warn) !important; }
.jx-save { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 16px; }
.jx-save-note { flex: 1 1 280px; font: 400 12px/1.5 var(--sans); color: var(--tx-3); }
.jx-pm > div:first-child > b { font: 600 13.5px/1.3 var(--sans); }

/* ---------------------------------------------------------------- the release dialog
 * The only element in this sheet with a shadow, because a modal that does not detach from the
 * page is not a modal. It is otherwise built from the same tokens as everything else. */
.jx-modal {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(5, 7, 6, .72); backdrop-filter: blur(3px);
  animation: jxFade 160ms ease both;
}
@keyframes jxFade { from { opacity: 0 } to { opacity: 1 } }
.jx-modal-card {
  width: 100%; max-width: 440px; padding: 24px;
  background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  animation: jxRise 220ms var(--ease, cubic-bezier(.22, 1, .36, 1)) both;
}
@keyframes jxRise { from { transform: translateY(10px); opacity: 0 } to { transform: none; opacity: 1 } }
.jx-modal-card h2 { margin: 0 0 8px; font: 600 18px/1.3 var(--sans); color: var(--tx); }
.jx-modal-p { margin: 0 0 14px; font: 400 13.5px/1.6 var(--sans); color: var(--tx-2); }
.jx-modal-warn { margin: 0 0 18px; border-left-color: var(--warn) !important; }
.jx-otp {
  font: 500 22px/1 var(--mono) !important; letter-spacing: .34em; text-align: center;
  min-height: 52px !important;
}
.jx-modal-act { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* The short, confident bit — and it only ever runs after the SERVER said yes. */
.jx-done { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0 4px; }
.jx-done > b { font: 600 16px/1.3 var(--sans); color: var(--up); }
.jx-done > span { font: 400 12.5px/1.5 var(--sans); color: var(--tx-3); text-align: center; max-width: 42ch; }
.jx-tick { width: 56px; height: 56px; }
.jx-tick-c { stroke: var(--up); stroke-width: 2; stroke-dasharray: 151; stroke-dashoffset: 151; animation: jxDraw 420ms ease-out .05s forwards; }
.jx-tick-p { stroke: var(--up); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: jxDraw 300ms ease-out .38s forwards; }
@keyframes jxDraw { to { stroke-dashoffset: 0 } }

/* The system already disables motion globally under this preference; the tick is re-stated here
 * because an undrawn stroke-dashoffset would otherwise leave an INVISIBLE tick rather than a
 * still one, and "funds released" has to be legible above all else. */
@media (prefers-reduced-motion: reduce) {
  .jx-modal, .jx-modal-card { animation: none }
  .jx-tick-c, .jx-tick-p { animation: none; stroke-dashoffset: 0 }
}

@media (max-width: 820px) {
  .jx-filters { gap: 10px }
  .jx-f { flex: 1 1 100% }
  .jx-rails { grid-template-columns: 1fr }
  .jx-fields { grid-template-columns: 1fr }
  .jx-pm { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
  .jx-modal { padding: 12px; align-items: flex-end }
  .jx-modal-card { max-width: none }
  .jx-modal-act { flex-direction: column-reverse }
  .jx-modal-act > .btn { width: 100% }
}