/* The transaction list (Feed) and its details drawer, shared by the Wallet page and the history page (js/txlist.js).
   Everything is scoped to .ycp so it never reaches the older page styles around it. Colours follow the phone dock. */
@font-face { font-family: 'YCP UI'; font-weight: 400; font-display: swap; src: url(/fonts/poppins-latin-400.woff2) format('woff2'); }
@font-face { font-family: 'YCP UI'; font-weight: 500; font-display: swap; src: url(/fonts/poppins-latin-500.woff2) format('woff2'); }
@font-face { font-family: 'YCP UI'; font-weight: 600; font-display: swap; src: url(/fonts/poppins-latin-600.woff2) format('woff2'); }
@font-face { font-family: 'YCP UI'; font-weight: 700; font-display: swap; src: url(/fonts/poppins-latin-700.woff2) format('woff2'); }
@font-face { font-family: 'YCP Mono'; font-weight: 400 600; font-display: swap; src: url(/fonts/jetbrains-mono-latin-400-500-600.woff2) format('woff2'); }

.ycp {
  --bg: #11141A; --surface: #151922; --surface-2: #1B2030; --surface-3: #222839;
  --line: #222838; --line-2: #2C3345; --text: #ECEEF4; --text-2: #C4C9D6; --muted: #8A92A5; --muted-2: #6B7386;
  --in: #3DD68C; --out: #ECEEF4; --link: #A9B8FF; --grad: linear-gradient(135deg, #9B7BFF 0%, #5E7BFF 55%, #3A8DF0 100%);
  --processing: #6EA8FF; --hold: #F5B94A; --cancel: #8A92A5;
  color: var(--text); -webkit-font-smoothing: antialiased;
}
.ycp, .ycp * { box-sizing: border-box; font-family: 'YCP UI', Arial, sans-serif; }
.ycp .mono, .ycp .mono * { font-family: 'YCP Mono', ui-monospace, monospace; }
.ycp .i { display: inline-block; vertical-align: middle; flex: none; }
.ycp button { font-family: inherit; color: inherit; cursor: pointer; }
.ycp a { color: inherit; text-decoration: none; }
.ycp :focus-visible { outline: 2px solid #7E7BFF; outline-offset: 2px; }
/* main.css gives p, ul, ol and li width: fit-content */
.ycp p, .ycp ul, .ycp ol, .ycp li { width: auto; max-width: none; }
.ycp [hidden] { display: none !important; }

.ycp .amt { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ycp .amt.in { color: var(--in); }
.ycp .amt.out { color: var(--out); }
.ycp .amt .cur { font-weight: 500; opacity: .8; }
.ycp .is-cancelled .amt { color: var(--muted-2); text-decoration: line-through; }

.ycp .pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px 0 7px; border-radius: 999px; font-size: 11.5px; font-weight: 500; white-space: nowrap; line-height: 1; }
.ycp .st-completed { color: var(--in); background: rgba(61, 214, 140, .1); }
.ycp .st-processing { color: var(--processing); background: rgba(110, 168, 255, .12); }
.ycp .st-on_hold { color: var(--hold); background: rgba(245, 185, 74, .12); }
.ycp .st-cancelled { color: var(--cancel); background: rgba(138, 146, 165, .14); }

.ycp .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.ycp .btn:hover { border-color: #3A4257; }
.ycp .btn.primary { border: 0; background: var(--grad); color: #fff; box-shadow: 0 8px 22px rgba(94, 123, 255, .3); }
.ycp .btn.ghost { background: transparent; }
.ycp .btn.sm { height: 32px; padding: 0 11px; font-size: 12.5px; border-radius: 9px; }
.ycp .btn[disabled] { opacity: .55; cursor: default; }

.ycp .tint { --t: #fff; color: var(--t); background: color-mix(in srgb, var(--t) 17%, transparent); }
.ycp .coin { border-radius: 50%; display: block; }
.ycp .muted { color: var(--muted); }

/* List: the Feed */
.feed { display: flex; flex-direction: column; gap: 22px; }
.f-day h4 { margin: 0 0 10px 4px; font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.f-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.f-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 18px; border: 0; background: none; text-align: left; color: var(--text); }
.f-row + .f-row { border-top: 1px solid var(--line); }
.f-row:hover { background: var(--surface-2); }
.f-row:focus-visible { outline-offset: -2px; }
.f-ic { position: relative; flex: none; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.f-badge { position: absolute; right: -3px; bottom: -3px; box-shadow: 0 0 0 2.5px var(--surface); }
.f-row:hover .f-badge { box-shadow: 0 0 0 2.5px var(--surface-2); }
.f-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.f-title { font-size: 14.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-sub { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-dot { margin: 0 6px; color: var(--muted-2); }
.f-right { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.f-right > .amt { font-size: 15px; }
.f-second .amt { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.f-empty { padding: 34px 20px; border-radius: 18px; border: 1px dashed var(--line-2); text-align: center; color: var(--muted); font-size: 14px; }
.f-empty b { display: block; margin-bottom: 4px; color: var(--text-2); font-weight: 500; }
.f-empty .btn { margin-top: 14px; }
@media (max-width: 750px) {
  .feed { gap: 18px; }
  .f-card { border-radius: 16px; }
  .f-row { padding: 12px 14px; gap: 12px; }
  .f-ic { width: 38px; height: 38px; }
  .f-title { font-size: 14px; }
  .f-sub { font-size: 12px; }
  .f-right > .amt { font-size: 14px; }
}

/* Details: a drawer from the right, a sheet from the bottom on phones */
.dt-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dt-kicker { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ycp .dt-x { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text-2); }
.dt-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 14px 6px 20px; border-bottom: 1px solid var(--line); }
.dt-ic { position: relative; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.dt-badge { position: absolute; right: -3px; bottom: -3px; box-shadow: 0 0 0 3px var(--surface); }
.dt-title { margin: 0; font-size: 15px; font-weight: 500; color: var(--text-2); max-width: 340px; line-height: 1.4; overflow-wrap: anywhere; }
.dt-amts { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 8px 0 12px; }
.dt .amt.big { font-size: 30px; font-weight: 600; letter-spacing: -.01em; }
.dt .amt.big .cur { font-size: 18px; }
.dt .amt.second { font-size: 15px; color: var(--muted); }
.dt-meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; justify-content: center; }
.dt-rows { margin: 0; padding: 8px 0; }
.dt-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: 13.5px; }
.dt-row dt { color: var(--muted); white-space: nowrap; }
.dt-row dd { margin: 0; text-align: right; color: var(--text); font-weight: 500; overflow-wrap: anywhere; display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.dt-row dd.mono { font-size: 12.5px; font-weight: 400; }
.dt-link { color: var(--link) !important; display: inline-flex; gap: 5px; align-items: center; }
.ycp .dt-copy { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-right: -5px; border: 0; border-radius: 7px; background: none; color: var(--muted); }
.ycp .dt-copy:hover { background: var(--surface-2); color: var(--text); }
.ycp .dt-copy.done { color: var(--in); }
.dt-note { margin: 4px 0 8px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); color: var(--text-2); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.dt-sec { margin: 6px 0 10px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dt-steps { list-style: none; margin: 0 0 18px; padding: 0; }
.dt-steps li { position: relative; display: flex; gap: 12px; padding-bottom: 14px; }
.dt-steps li:not(:last-child)::before { content: ''; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; background: var(--line-2); }
.dt-steps li.done:not(:last-child)::before { background: rgba(61, 214, 140, .45); }
.dt-steps i { flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--in); color: #0B0E12; }
.dt-steps li.todo i { background: transparent; border: 2px dashed var(--line-2); }
.dt-steps li.stop i { background: var(--cancel); }
.dt-steps b { display: block; font-size: 13.5px; font-weight: 500; }
.dt-steps span { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.dt-steps li.todo b { color: var(--muted); }
.dt-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.dt-actions .btn { flex: 1; }

.drawer-scrim { position: fixed; inset: 0; background: rgba(5, 6, 10, .55); z-index: 1500; }
.drawer { position: fixed; z-index: 1501; top: 0; right: 0; bottom: 0; width: 440px; max-width: 100vw; background: var(--surface); border-left: 1px solid var(--line-2);
  padding: 22px 24px; overflow-y: auto; box-shadow: -24px 0 60px rgba(0, 0, 0, .45); overscroll-behavior: contain; }
body.drawer-open { overflow: hidden; }
@media (max-width: 750px) {
  .drawer { top: auto; left: 0; width: auto; max-height: 88vh; border-left: 0; border-top: 1px solid var(--line-2); border-radius: 22px 22px 0 0; padding: 10px 18px 28px; }
  .drawer::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--line-2); margin: 0 auto 12px; }
}

/* The Wallet page's recent transactions */
.recent { padding: 8px 15px 60px; max-width: 1100px; }
.recent-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 38px 0 18px; }
.recent-head h2 { margin: 0; font-family: "titles", sans-serif !important; font-weight: 400; font-size: 24px; color: #E4E8EF; }
.recent-head p { margin: 6px 0 0; font-size: 14px; color: #A5ACB9; }
@media (max-width: 750px) {
  .recent { padding: 0 14px 110px; }
  .recent-head { margin: 30px 0 14px; align-items: center; }
  .recent-head h2 { font-size: 20px; }
  .recent-head p { display: none; }
}