/* The app, in the site's own clothes.
 *
 * Same palette, same two typefaces, same hairline rules as the marketing pages
 * — the fonts are loaded from /fonts, exactly the files the site itself uses,
 * so nothing here has to be approximated.
 *
 * One colour does all the work. #C6F700 cannot carry text on a light ground —
 * against cream it was 1.1:1 — so the ground went to near-black and the
 * chartreuse took over every job: words, rules, fills. On #0B0F02 it reads at
 * 15.5:1.
 *
 * With a single hue, hierarchy has to come from somewhere other than colour.
 * It comes from opacity and from fill: full-strength for anything you read,
 * --muted for what is secondary, --hair for what is only structure, and a solid
 * chartreuse block with dark text for the one action on a screen worth taking.
 * --ink-deep is the ground colour by another name; it exists so that "text
 * sitting on the chartreuse" reads as its own idea at the call site. */

@font-face {
  font-family: 'PP Neue Montreal'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/PPNeueMontreal-Regular.woff2) format('woff2'),
       url(/fonts/PPNeueMontreal-Regular.woff) format('woff');
}
@font-face {
  font-family: 'PP Neue Montreal'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/fonts/PPNeueMontreal-Medium.woff2) format('woff2'),
       url(/fonts/PPNeueMontreal-Medium.woff) format('woff');
}
@font-face {
  font-family: 'GT America Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/GTAmericaMono-Regular.woff2) format('woff2'),
       url(/fonts/GTAmericaMono-Regular.woff) format('woff');
}

:root {
  --ink: #c6f700;
  --ink-deep: #0b0f02;
  --lime: #c6f700;
  --lime-deep: #aeda00;
  --mercury: #0b0f02;
  /* A panel has to be *lighter* than the ground now, not brighter than cream.
     Kept barely off the ground so a card reads as raised, not as a slab. */
  --white: #141a05;
  /* #c41230 is a dark red; on near-black it barely registers as a colour. */
  --error: #ff8a7a;
  --muted: rgba(198, 247, 0, .58);
  --hair: rgba(198, 247, 0, .22);
  --pp: 'PP Neue Montreal', ui-sans-serif, system-ui, sans-serif;
  --mono: 'GT America Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --gutter: 15px;
}

* { box-sizing: border-box; }
/* .btn sets display, which outranks the UA sheet's [hidden] rule. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--mercury); color: var(--ink);
  font-family: var(--pp); font-weight: 400; font-size: 17px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; }
::selection { background: var(--lime); color: var(--ink-deep); }

.wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }

/* ------------------------------------------------------------------ chrome */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: var(--mercury); border-bottom: 1px solid var(--hair);
}
.hdr-in { display: flex; align-items: center; gap: 26px; height: 60px; }
.mark {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; border: 1px solid var(--ink); padding: 7px 12px; flex-shrink: 0;
  background: var(--lime); color: var(--ink-deep);
}
.hdr nav { display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; }
.hdr nav::-webkit-scrollbar { display: none; }
.hdr nav a {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; opacity: .62; padding: 4px 0;
}
.hdr nav a:hover, .hdr nav a[aria-current] { opacity: 1; }
.hdr .right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.hdr .right .who { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; }

.foot { border-top: 1px solid var(--hair); margin-top: 90px; }
.foot-in {
  display: flex; flex-wrap: wrap; gap: 8px 26px; padding: 26px 0 40px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
}
.foot-in .push { margin-left: auto; }

/* ----------------------------------------------------------------- layout */
section { border-top: 1px solid var(--hair); padding: 54px 0; }
section:first-of-type { border-top: 0; }
.eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  margin: 0 0 18px; display: flex; align-items: baseline; gap: 10px;
}
.eyebrow::before { content: '['; }
.eyebrow::after { content: ']'; }
h1, h2, h3 { font-weight: 400; letter-spacing: -.035em; line-height: 1.02; margin: 0; }
h1 { font-size: clamp(44px, 8vw, 104px); }
h2 { font-size: clamp(26px, 3.6vw, 46px); }
h3 { font-size: clamp(20px, 2vw, 26px); }
.lede { max-width: 62ch; font-size: 18px; line-height: 1.5; margin: 20px 0 0; }
.mono { font-family: var(--mono); font-size: .88em; letter-spacing: .01em; }
/* The text around this is already chartreuse, so a highlight has to invert it
   rather than tint it — without the colour it would be chartreuse on chartreuse. */
.mark-lime { background: var(--lime); color: var(--ink-deep); padding: 0 .22em; }

.cols { display: grid; gap: 42px var(--gutter); grid-template-columns: 1fr; margin-top: 40px; }
@media (min-width: 900px) { .cols.two { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------------ cards */
.bals { display: grid; gap: var(--gutter); grid-template-columns: 1fr 1fr; }
.bal {
  border: 1px solid var(--ink); background: var(--white); padding: 22px 24px 26px;
  border-top: 4px solid var(--lime);
}
.bal .sym { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.bal .amt { font-size: clamp(30px, 5vw, 54px); letter-spacing: -.04em; line-height: 1.05; margin-top: 14px; }
.bal .sub { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--muted); margin-top: 8px; }
.bal.unread { background: transparent; border-style: dashed; border-top-color: var(--hair); }
.bal.unread .amt { font-size: 17px; letter-spacing: 0; color: var(--error); }

.statusline {
  display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); display: inline-block; margin-right: 8px; }
.dot.live { background: var(--lime); }
.dot.bad { background: var(--error); }

/* ------------------------------------------------------------------ forms */
.field { margin-top: 20px; }
label {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: 8px;
}
input, select, textarea {
  width: 100%; font-family: var(--pp); font-size: 17px; color: var(--ink);
  background: var(--mercury); border: 1px solid var(--ink); border-radius: 0;
  padding: 13px 14px; appearance: none;
}
textarea { font-family: var(--mono); font-size: 14px; line-height: 1.55; min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--lime); outline-offset: 0; border-color: var(--ink); }
::placeholder { color: var(--muted); }
.row2 { display: grid; grid-template-columns: 1fr 118px; gap: 10px; }
.hint { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 8px; }
input.mono-in { font-family: var(--mono); font-size: 14px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  padding: 14px 22px; border: 1px solid var(--ink); background: transparent; color: var(--ink);
  text-decoration: none; cursor: pointer; transition: background-color .25s, color .25s;
}
.btn:hover { background: var(--lime); color: var(--ink-deep); }
.btn.solid { background: var(--lime); color: var(--ink-deep); }
.btn.solid:hover { background: var(--lime-deep); }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: .45; cursor: default; }
/* Nothing here is bright: an action you cannot take back should not look like
   the one the page is nudging you towards. */
.btn.quiet { border-color: var(--hair); color: var(--muted); }
.btn.quiet:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn.danger { border-color: var(--error); color: var(--error); }
.btn.danger:hover { background: var(--error); color: var(--mercury); }

.msg { border: 1px solid var(--ink); padding: 14px 16px; margin-top: 18px; font-size: 15px; }
.msg.ok { background: var(--white); border-left: 4px solid var(--lime); }
.msg.info { background: transparent; border-style: dashed; }
.msg.err { border-color: var(--error); color: var(--error); }

.addr {
  font-family: var(--mono); font-size: 13px; word-break: break-all;
  border: 1px solid var(--ink); background: var(--white); padding: 13px 14px; margin-top: 20px;
  border-left: 4px solid var(--lime);
}

/* ------------------------------------------------------------------ table */
.scroller { overflow-x: auto; margin-top: 26px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
th {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 400; color: var(--muted); border-bottom-color: var(--ink);
}
td.num { white-space: nowrap; }
.pill {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--ink); padding: 3px 8px; display: inline-block;
}
.pill.completed { background: var(--lime); color: var(--ink-deep); }
.pill.failed { border-color: var(--error); color: var(--error); }
.dir-in { color: var(--ink); }
.dir-out { color: var(--muted); }
.skel { color: var(--muted); }

/* --------------------------------------------------------------- composer */
.composer { border: 1px solid var(--ink); background: var(--white); border-top: 4px solid var(--lime); }
.composer textarea { border: 0; background: transparent; }
.composer .foot-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  border-top: 1px solid var(--hair); padding: 14px;
}
.composer .foot-row .grow { flex: 1 1 220px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.parse { border-top: 1px solid var(--hair); padding: 14px; font-family: var(--mono); font-size: 12px; }
.parse b { font-weight: 400; color: var(--ink-deep); background: var(--lime); padding: 0 .25em; }
.parse.bad { color: var(--error); }
.parse.bad b { background: none; color: inherit; padding: 0; }

/* ------------------------------------------------------------ the account */
/* Disconnecting cannot be undone from here, so it sits apart from everything
   else, opens a step at a time, and never borrows the page's loud colour. */
.riskbox { border: 1px dashed var(--hair); padding: 24px; margin-top: 30px; max-width: 640px; }
.riskbox h3 { margin-bottom: 10px; }
.riskbox p { color: var(--muted); font-size: 15px; margin: 0 0 18px; }
.riskbox .actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }

@media (max-width: 640px) {
  .bals { grid-template-columns: 1fr; }
  .row2 { grid-template-columns: 1fr; }
  section { padding: 40px 0; }
}