/* ══════════════════════════════════════════════════════════════════
   boundary.css — move the amount, watch three states move separately.

   The Trust page argues that routing, authority and execution are three
   facts rather than one. It used to assert that with static chips. This
   lets a reader cross the line themselves and watch the three disagree.

   Ported from the retired ACE page's runtime demo. The mechanism came
   across; the ACE name, the Watchtower vocabulary and the regulated-
   finance framing did not. The numbers are the ones already used
   elsewhere on this site: AR runs alone to £1,000, a controller holds
   £5,000 on the account.
   ══════════════════════════════════════════════════════════════════ */

.bnd {
  margin-top: clamp(34px, 4vw, 52px);
  border: 1px solid var(--border);
  background: var(--vault);
}

.bnd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 13px clamp(18px, 2.4vw, 28px);
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.bnd-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1px;
  background: var(--border);
}

.bnd-in,
.bnd-out { background: var(--vault); padding: clamp(20px, 2.6vw, 32px); }

/* ── the controls ──────────────────────────────────────────────── */

.bnd-k {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

.bnd-amount {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1;
  color: var(--parchment);
  font-variant-numeric: tabular-nums;
}

.bnd-amount .cur { color: var(--silver); font-size: .62em; margin-right: .1em; }

.bnd-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  margin: 22px 0 10px;
  background: var(--border);
  cursor: pointer;
}

.bnd-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--vault);
  box-shadow: 0 0 0 1px var(--gold);
  cursor: grab;
}

.bnd-range::-moz-range-thumb {
  width: 17px;
  height: 17px;
  border: 3px solid var(--vault);
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
  cursor: grab;
}

.bnd-range:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 6px; }

/* where the two limits fall on the track */
.bnd-marks {
  position: relative;
  height: 30px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
}

.bnd-mark { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.bnd-mark::before {
  content: '';
  position: absolute;
  top: -14px; left: 50%;
  width: 1px; height: 8px;
  background: var(--rail);
}

/* the toggle: authority has to move on its own, or the point is lost */
.bnd-toggle {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--silver);
  line-height: 1.5;
}

.bnd-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }

.bnd-box {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  border: 1px solid var(--rail);
  position: relative;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}

.bnd-toggle input:checked + .bnd-box { border-color: var(--gold); background: rgba(184,137,42,.12); }

.bnd-toggle input:checked + .bnd-box::after {
  content: '';
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid var(--gold);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(42deg);
}

.bnd-toggle input:focus-visible + .bnd-box { outline: 2px solid var(--gold-lt); outline-offset: 3px; }
.bnd-toggle b { color: var(--cream); font-weight: 500; }

/* ── the three results ─────────────────────────────────────────── */

.bnd-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 15px 0;
  border-bottom: 1px solid var(--border);
}

.bnd-row:first-child { padding-top: 0; }
.bnd-row:last-of-type { border-bottom: 0; }

.bnd-row dt {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 4px;
}

.bnd-row dd { margin: 0; }

.bnd-why {
  display: block;
  margin-top: 7px;
  font-family: var(--body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--silver);
}

/* the verdict line under the three */
.bnd-verdict {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--cream);
}

.bnd-verdict b { color: var(--parchment); font-weight: 600; }

.bnd-foot {
  padding: 13px clamp(18px, 2.4vw, 28px);
  border-top: 1px solid var(--border);
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* ── responsive ────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .bnd-body { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .bnd-row { grid-template-columns: 1fr; gap: 6px; }
  .bnd-row dt { padding-top: 0; }
}