@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:wght@500;600&family=Source+Sans+3:wght@400;500;600&family=Source+Code+Pro:wght@400;500&display=swap");

/* Caravel components. All values from tokens.css. Class prefix: cv-
   Shape: square corners everywhere. Containers and buttons carry a double layer:
   a second sheet offset to the bottom and right by --frame-offset, outlined in the
   same rule, like a stacked certificate. Built as two outer shadows:
   1) the sheet's fill, inset by one rule width, 2) the sheet's outline.
   Motion: buttons press into their layer and release a water-drop ripple (bundle.js). */
.cv-layer { box-shadow: var(--frame-offset) var(--frame-offset) 0 calc(var(--frame-rule) * -1) var(--surface), var(--frame-offset) var(--frame-offset) 0 0 var(--line-strong); }
body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 22px; margin: 0; }
.cv-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.cv-unit { color: var(--ink-muted); font-family: var(--font-sans); font-size: 13px; font-weight: 400; margin-left: 4px; }
.cv-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.cv-stack { display: grid; gap: var(--space-3); }

/* Button */
.cv-btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-4); border-radius: 0; border: 1px solid transparent; font: 500 14px/1 var(--font-sans); cursor: pointer; transition: background-color .12s ease-out, border-color .12s ease-out, transform .12s ease-out, box-shadow .12s ease-out; }
.cv-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cv-btn--primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); box-shadow: var(--frame-offset) var(--frame-offset) 0 calc(var(--frame-rule) * -1) var(--bg), var(--frame-offset) var(--frame-offset) 0 0 var(--primary); }
.cv-btn--primary:hover { background: var(--primary-hover); }
.cv-btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--line-control); box-shadow: var(--frame-offset) var(--frame-offset) 0 calc(var(--frame-rule) * -1) var(--surface), var(--frame-offset) var(--frame-offset) 0 0 var(--line-control); }
.cv-btn--secondary:hover { background: var(--surface-sunken); }
.cv-btn--quiet { background: transparent; color: var(--primary); }
.cv-btn--quiet:hover { background: var(--primary-soft); }
.cv-btn--danger { background: var(--surface); color: var(--defaulted); border-color: var(--defaulted); box-shadow: var(--frame-offset) var(--frame-offset) 0 calc(var(--frame-rule) * -1) var(--surface), var(--frame-offset) var(--frame-offset) 0 0 var(--defaulted); }
.cv-btn--danger:hover { background: var(--defaulted-soft); }
.cv-btn--sm { height: 32px; padding: 0 var(--space-3); font-size: 13px; }
.cv-btn[aria-busy="true"] { opacity: .7; cursor: progress; }
/* Press: the button sinks into its second layer */
.cv-btn--primary:active, .cv-btn--secondary:active, .cv-btn--danger:active { transform: translate(var(--frame-offset), var(--frame-offset)); box-shadow: none; }
/* Water-drop ripple, spawned at the pointer by bundle.js */
.cv-ripple { position: absolute; left: var(--rx, 50%); top: var(--ry, 50%); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; pointer-events: none; z-index: -1; }
.cv-ripple--drop { background: currentColor; opacity: .28; animation: cv-drop 560ms cubic-bezier(.2,.7,.3,1) forwards; }
.cv-ripple--ring { border: 1.5px solid currentColor; opacity: .5; animation: cv-ring 720ms cubic-bezier(.2,.7,.3,1) 90ms forwards; transform: scale(0); }
@keyframes cv-drop { from { transform: scale(0); opacity: .32; } to { transform: scale(var(--rs, 30)); opacity: 0; } }
@keyframes cv-ring { from { transform: scale(0); opacity: .55; } to { transform: scale(var(--rs, 30)); opacity: 0; } }

/* Status pill */
.cv-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 0; border: 1px solid currentColor; font: 500 12px/16px var(--font-sans); letter-spacing: .02em; white-space: nowrap; }
.cv-pill::before { content: ""; width: 6px; height: 6px; background: currentColor; }
.cv-pill--open { color: var(--healthy); background: var(--healthy-soft); }
.cv-pill--margin { color: var(--margin); background: var(--margin-soft); }
.cv-pill--repaid { color: var(--repaid); background: var(--repaid-soft); }
.cv-pill--defaulted { color: var(--defaulted); background: var(--defaulted-soft); }
.cv-pill--featured { color: var(--gold-ink); background: var(--gold-soft); }

/* Field */
.cv-field { display: grid; gap: 6px; max-width: 360px; }
.cv-field__label { font: 500 13px/18px var(--font-sans); color: var(--ink); }
.cv-field__control { display: flex; align-items: center; height: 40px; border: 1px solid var(--line-control); border-radius: 0; background: var(--surface); padding: 0 var(--space-3); gap: var(--space-2); }
.cv-field__control:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.cv-field__control input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 500 15px/22px var(--font-mono); font-variant-numeric: tabular-nums; }
.cv-field__control input::placeholder { color: var(--ink-subtle); }
.cv-field__suffix { color: var(--ink-muted); font-size: 13px; }
.cv-field__hint { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.cv-field--error .cv-field__control { border-color: var(--defaulted); }
.cv-field--error .cv-field__hint { color: var(--defaulted); }

/* Card */
.cv-card { background: var(--surface); border: var(--frame-rule) solid var(--line-strong); box-shadow: var(--frame-offset) var(--frame-offset) 0 calc(var(--frame-rule) * -1) var(--surface), var(--frame-offset) var(--frame-offset) 0 0 var(--line-strong); border-radius: 0; padding: var(--space-4); display: grid; gap: var(--space-3); }
.cv-card__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.cv-eyebrow { font: 500 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.cv-title { font: 500 26px/32px var(--font-display); margin: 0; }
.cv-figure-xl { font: 500 32px/36px var(--font-mono); font-variant-numeric: tabular-nums; }
.cv-apr { color: var(--brand); font: 500 15px/22px var(--font-mono); font-variant-numeric: tabular-nums; }
.cv-terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); border-top: 1px solid var(--line); padding-top: var(--space-3); }
.cv-terms dt { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.cv-terms dd { margin: 2px 0 0; font: 500 15px/22px var(--font-mono); font-variant-numeric: tabular-nums; }
.cv-card--featured { border-color: var(--gold); box-shadow: var(--frame-offset) var(--frame-offset) 0 calc(var(--frame-rule) * -1) var(--gold-soft), var(--frame-offset) var(--frame-offset) 0 0 var(--gold); }

/* Health meter */
.cv-health { display: grid; gap: 6px; }
.cv-health__bar { position: relative; height: 8px; border-radius: 0; background: var(--surface-sunken); overflow: hidden; }
.cv-health__fill { position: absolute; inset: 0 auto 0 0; background: var(--gold); border-radius: 0; }
.cv-health__mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); }
.cv-health__legend { display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.cv-health--margin .cv-health__fill { background: var(--margin); }

/* Countdown */
.cv-countdown { display: inline-flex; align-items: baseline; gap: 6px; }
.cv-countdown__time { font: 500 15px/22px var(--font-mono); font-variant-numeric: tabular-nums; }

/* Alert */
.cv-alert { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); border-radius: 0; border: var(--frame-rule) solid; }
.cv-alert__title { font-weight: 600; }
.cv-alert__body { color: var(--ink); font-size: 14px; line-height: 20px; }
.cv-alert__icon { width: 20px; height: 20px; border-radius: 0; display: grid; place-items: center; font: 600 13px/1 var(--font-sans); }
.cv-alert--margin { background: var(--margin-soft); border-color: var(--margin); box-shadow: var(--frame-offset) var(--frame-offset) 0 calc(var(--frame-rule) * -1) var(--margin-soft), var(--frame-offset) var(--frame-offset) 0 0 var(--margin); }
.cv-alert--margin .cv-alert__title, .cv-alert--margin .cv-alert__icon { color: var(--margin); }
.cv-alert--margin .cv-alert__icon { border: 1.5px solid var(--margin); }
.cv-alert--info { background: var(--primary-soft); border-color: var(--primary); box-shadow: var(--frame-offset) var(--frame-offset) 0 calc(var(--frame-rule) * -1) var(--primary-soft), var(--frame-offset) var(--frame-offset) 0 0 var(--primary); }
.cv-alert--info .cv-alert__title, .cv-alert--info .cv-alert__icon { color: var(--primary); }
.cv-alert--info .cv-alert__icon { border: 1.5px solid var(--primary); }
.cv-alert--error { background: var(--defaulted-soft); border-color: var(--defaulted); box-shadow: var(--frame-offset) var(--frame-offset) 0 calc(var(--frame-rule) * -1) var(--defaulted-soft), var(--frame-offset) var(--frame-offset) 0 0 var(--defaulted); }
.cv-alert--error .cv-alert__title, .cv-alert--error .cv-alert__icon { color: var(--defaulted); }
.cv-alert--error .cv-alert__icon { border: 1.5px solid var(--defaulted); }

/* Table */
.cv-table-wrap { overflow-x: auto; background: var(--surface); border: var(--frame-rule) solid var(--line-strong); box-shadow: var(--frame-offset) var(--frame-offset) 0 calc(var(--frame-rule) * -1) var(--surface), var(--frame-offset) var(--frame-offset) 0 0 var(--line-strong); border-radius: 0; }
.cv-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.cv-table th { text-align: left; font: 500 12px/16px var(--font-sans); letter-spacing: .04em; color: var(--ink-muted); background: var(--surface-sunken); padding: 10px var(--space-3); border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.cv-table td { padding: 12px var(--space-3); border-bottom: 1px solid var(--line); white-space: nowrap; }
.cv-table tr:last-child td { border-bottom: 0; }
.cv-table .r { text-align: right; }
.cv-table tbody tr:hover { background: var(--primary-soft); }

/* Tx hash chip */
.cv-hash { display: inline-flex; align-items: center; gap: var(--space-2); padding: 2px 8px; border-radius: 0; background: var(--surface-sunken); font: 400 12px/18px var(--font-mono); color: var(--ink); text-decoration: none; }
.cv-hash:hover { color: var(--primary); }
.cv-hash:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cv-hash__tag { font-family: var(--font-sans); font-size: 11px; font-weight: 500; color: var(--ink-muted); }

/* DvP settlement receipt */
.cv-dvp { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: var(--space-3); align-items: center; padding: var(--space-4); border: var(--frame-rule) solid var(--line-strong); box-shadow: var(--frame-offset) var(--frame-offset) 0 calc(var(--frame-rule) * -1) var(--surface), var(--frame-offset) var(--frame-offset) 0 0 var(--line-strong); border-radius: 0; background: var(--surface); }
.cv-dvp__leg { display: grid; gap: 2px; }
.cv-dvp__arrow { font: 500 18px/1 var(--font-mono); color: var(--ink-muted); }
.cv-dvp__foot { grid-column: 1 / -1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); border-top: 1px solid var(--line); padding-top: var(--space-3); font-size: 13px; color: var(--ink-muted); }

@media (prefers-reduced-motion: reduce) { .cv-btn { transition: none; } .cv-btn:active { transform: none; } .cv-ripple { display: none; } }

/* ===== Motion: status elements =====
   The one exception to "nothing loops": motion that mirrors an ongoing system state
   (a live feed, a pending transaction). It is small, sits next to a word that says the
   same thing, and stops the moment the state resolves. All of it rests with reduced motion. */

/* Live indicator: live / stale / off */
.cv-live { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/16px var(--font-sans); letter-spacing: .04em; color: var(--ink-muted); white-space: nowrap; }
.cv-live__dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--healthy); }
.cv-live__dot::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid var(--healthy); opacity: 0; animation: cv-live-ring 2.4s cubic-bezier(.2,.7,.3,1) infinite; }
.cv-live--on { color: var(--healthy); }
/* Live = a small wave flowing left to right, like water moving past */
.cv-live--on .cv-live__dot { width: 20px; height: 10px; border-radius: 0; background: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%); }
.cv-live--on .cv-live__dot::after { inset: 0; border: 0; border-radius: 0; opacity: 1; transform: none; background: var(--healthy);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M0 5 Q3 1.5 6 5 T12 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 0 50% / 12px 10px repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M0 5 Q3 1.5 6 5 T12 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 0 50% / 12px 10px repeat-x;
  animation: cv-live-wave 1.4s linear infinite; }
@keyframes cv-live-wave { from { -webkit-mask-position: 0 50%; mask-position: 0 50%; } to { -webkit-mask-position: 12px 50%; mask-position: 12px 50%; } }
.cv-live--stale { color: var(--margin); }
.cv-live--stale .cv-live__dot { background: var(--margin); }
.cv-live--stale .cv-live__dot::after { display: none; }
.cv-live--off .cv-live__dot { background: transparent; border: 1.5px solid var(--ink-subtle); }
.cv-live--off .cv-live__dot::after { display: none; }
.cv-live__meta { font-family: var(--font-mono); letter-spacing: 0; color: var(--ink-subtle); }
@keyframes cv-live-ring { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(2.6); opacity: 0; } }

/* Waiting: ellipsis after a verb ("Signing…") */
.cv-wait { display: inline-flex; align-items: baseline; gap: 0; }
.cv-wait__dots { display: inline-flex; gap: 2px; margin-left: 2px; }
.cv-wait__dots i { width: 3px; height: 3px; background: currentColor; opacity: .25; animation: cv-wait-dot 1.2s steps(1, end) infinite; }
.cv-wait__dots i:nth-child(2) { animation-delay: .2s; }
.cv-wait__dots i:nth-child(3) { animation-delay: .4s; }
@keyframes cv-wait-dot { 0%, 100% { opacity: .25; } 30%, 60% { opacity: 1; } }

/* Waiting: tide bar (indeterminate progress, square, on a ruled track) */
.cv-tide { position: relative; height: 4px; margin-top: 14px; overflow: visible; clip-path: inset(-16px 0 0 0); background: var(--surface-sunken); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* A small pennant rides the leading edge of the moving block, streaming back as it sails */
.cv-tide::after { content: ""; position: absolute; left: 0; bottom: 100%; width: 32%; height: 13px; pointer-events: none;
  background:
    linear-gradient(var(--ink), var(--ink)) right 0 bottom 0 / 1.5px 13px no-repeat,
    linear-gradient(to bottom right, transparent 50%, var(--brand) 50%) right 1.5px top 0 / 10px 3.5px no-repeat,
    linear-gradient(to top right, transparent 50%, var(--brand) 50%) right 1.5px top 3.5px / 10px 3.5px no-repeat;
  transform-origin: right bottom;
  animation: cv-tide 1.6s cubic-bezier(.45,0,.25,1) infinite; }
.cv-tide::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 32%; background: var(--primary); animation: cv-tide 1.6s cubic-bezier(.45,0,.25,1) infinite; }
.cv-tide--gold::before { background: var(--gold); }
@keyframes cv-tide { 0% { transform: translateX(-100%); } 100% { transform: translateX(320%); } }
/* A busy button carries the tide along its bottom edge */
.cv-btn[aria-busy="true"]::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 34%; background: currentColor; opacity: .7; animation: cv-tide 1.4s cubic-bezier(.45,0,.25,1) infinite; }

/* Transaction progress: Sign → Submit → Settle */
.cv-txprog { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr)); gap: 0; }
.cv-txprog__step { position: relative; display: grid; gap: 4px; padding-top: 14px; font-size: 13px; line-height: 18px; color: var(--ink-subtle); }
.cv-txprog__step::before { content: ""; position: absolute; top: 4px; left: 0; right: 0; height: 2px; background: var(--line); }
.cv-txprog__step::after { content: ""; position: absolute; top: 0; left: 0; width: 10px; height: 10px; box-sizing: border-box; background: var(--surface); border: 1.5px solid var(--line-control); }
.cv-txprog__label { font-weight: 600; }
.cv-txprog__meta { font: 400 12px/16px var(--font-mono); }
.cv-txprog__step.is-done { color: var(--ink-muted); }
.cv-txprog__step.is-done::before { background: var(--primary); }
.cv-txprog__step.is-done::after { background: var(--primary); border-color: var(--primary); }
.cv-txprog__step.is-active { color: var(--ink); }
.cv-txprog__step.is-active::before { background: var(--line); background-image: linear-gradient(90deg, var(--primary), var(--primary)); background-size: 32% 100%; background-repeat: no-repeat; animation: cv-txprog-run 1.6s cubic-bezier(.45,0,.25,1) infinite; }
.cv-txprog__step.is-active::after { border-color: var(--primary); background: var(--primary-soft); }
.cv-txprog__step.is-failed { color: var(--defaulted); }
.cv-txprog__step.is-failed::before { background: var(--defaulted); }
.cv-txprog__step.is-failed::after { border-color: var(--defaulted); background: var(--defaulted-soft); }
@keyframes cv-txprog-run { 0% { background-position: -50% 0; } 100% { background-position: 150% 0; } }

/* Skeleton: placeholder blocks while figures load, with a slow paper sheen */
.cv-skel { display: block; height: 14px; background: var(--surface-sunken); background-image: linear-gradient(90deg, transparent 0, rgba(255,255,255,.55) 50%, transparent 100%); background-size: 40% 100%; background-repeat: no-repeat; animation: cv-skel 1.8s linear infinite; }
[data-theme="dark"] .cv-skel { background-image: linear-gradient(90deg, transparent 0, rgba(255,255,255,.06) 50%, transparent 100%); }
.cv-skel--figure { height: 28px; width: 60%; }
.cv-skel--line { width: 100%; }
.cv-skel--short { width: 40%; }
@keyframes cv-skel { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }

/* Value flash: a figure that just changed glows gold once, then rests */
.cv-flash { animation: cv-flash 1.2s cubic-bezier(.2,.7,.3,1) 1; }
.cv-flash--up { --flash: var(--healthy-soft); }
.cv-flash--down { --flash: var(--defaulted-soft); }
@keyframes cv-flash { 0% { background-color: var(--flash, var(--gold-soft)); box-shadow: 0 0 0 3px var(--flash, var(--gold-soft)); } 100% { background-color: transparent; box-shadow: 0 0 0 3px transparent; } }

/* Seal stamp: a confirmation pressed once, like a wax seal on a settled ticket */
.cv-stamp { display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; border: 2px solid var(--brand); color: var(--brand); font: 600 11px/1.2 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; text-align: center; box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 5px var(--brand); transform: rotate(-8deg); animation: cv-stamp .5s cubic-bezier(.2,.7,.3,1) 1 both; }
.cv-stamp b { display: block; font: 500 18px/1 var(--font-display); letter-spacing: 0; text-transform: none; }
.cv-stamp--repaid { border-color: var(--repaid); color: var(--repaid); box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 5px var(--repaid); }
@keyframes cv-stamp { 0% { transform: scale(1.6) rotate(-14deg); opacity: 0; } 60% { transform: scale(.94) rotate(-7deg); opacity: 1; } 100% { transform: scale(1) rotate(-8deg); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .cv-live__dot::after, .cv-wait__dots i, .cv-tide::before, .cv-tide::after, .cv-btn[aria-busy="true"]::after, .cv-txprog__step.is-active::before, .cv-skel, .cv-flash, .cv-stamp { animation: none !important; }
  .cv-wait__dots i { opacity: 1; }
  .cv-tide::before { width: 100%; opacity: .35; }
  .cv-tide::after { transform: none; left: auto; right: 0; width: 12px; }
  .cv-txprog__step.is-active::before { background-size: 50% 100%; background-position: 0 0; }
}