/* ==========================================================================
   THE TRADORS — the vault
   Imported from the Claude Design source (TradorVault.dc.html). The document
   keeps its own inline styling, so this file only carries what an inline style
   attribute cannot express: hover states, focus rings and the phone layout.
   ========================================================================== */

.wp { font-family: Archivo, system-ui, sans-serif; }
/* The paper tint underneath means a plate that has not landed yet reads as a
   captioned blank rather than a broken-image icon. */
.wp img { image-rendering: pixelated; max-width: 100%; background: #F4F1E8; }
.wp a { color: #0E7C3A; }
.wp a:hover { color: #0A5C2C; }

/* hover states lifted out of the design's style-hover attributes */
.wph1:hover { color: #12141C; background: #F4F1E8; }
.wph2:hover { color: #12141C; }
.wph4:hover { background: #F4F1E8; color: #12141C; }
.wph6:hover { opacity: .88; }
.wph7:hover { background: #B7E0C4; }

/* A disabled control must not pretend it is live. */
.wp button[disabled], .wp button[aria-disabled="true"] { opacity: 1; }
.wp button[disabled]:hover { opacity: 1; }

.wp-skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: #12141C; color: #fff;
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; padding: 12px 18px; text-decoration: none; }
.wp-skip:focus { left: 0; }
.wp :where(a, button):focus-visible { outline: 2px solid #0E7C3A; outline-offset: 3px; }

/* ------------------------------------------------------------- the tiles */
/* Portrait tiles are the one interactive element the design repeats, so the
   selected state has to be legible without relying on colour alone — the
   border weight carries it. */
.v-tile { border: 1px solid #D9D2BE; background: #fff; cursor: pointer; padding: 5px; text-align: left;
  font: inherit; display: block; width: 100%; }
.v-tile:hover { box-shadow: 4px 4px 0 #EAF4EC; }
.v-tile[aria-pressed="true"] { border: 2px solid #12141C; padding: 4px; }
.v-tile-art { width: 100%; aspect-ratio: 1; image-rendering: pixelated;
  background-size: 100% 100%; background-repeat: no-repeat; border: 1px solid #D9D2BE; }
.v-tile-row { display: flex; justify-content: space-between; align-items: center; margin-top: 5px;
  font-family: 'IBM Plex Mono', monospace; font-size: 8.5px; color: #6E6857; }
.v-dot { width: 6px; height: 6px; flex: none; }

/* The buy column sits on the green ground, so its tile hover picks up the
   warmer shadow rather than the deposit column's. */
#v-inv .v-tile:hover { box-shadow: 4px 4px 0 #DCF2E2; }

/* Skeleton tiles while the first RPC round-trip is in flight. Without these the
   grid collapses to zero height and the page jumps when the data lands. */
.v-skel { border: 1px solid #E7E2D6; background: #FBFAF5; padding: 5px; }
.v-skel > div { width: 100%; aspect-ratio: 1; background: #F4F1E8; }

/* ---------------------------------------------------------------- status */
.v-status { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: .06em; }

/* The masthead wraps its nav onto a second row on phones. Four items now, so
   this bites sooner than on the other pages. */
@media (max-width: 860px) {
  .wp-mast { flex-wrap: wrap !important; gap: 10px; }
  .wp-mast > nav { order: 3; flex-basis: 100%; overflow-x: auto; }
}

/* ------------------------------------------------------------------ phones */
/* The document is authored at 48px gutters on a wide canvas. The hero is a
   two-up that has to stack, and the deposit/buy columns are a two-up that must
   not — a 380px minmax already handles them, but the border between the two
   flips from vertical to horizontal once they stack. */
@media (max-width: 900px) {
  .v-hero { grid-template-columns: 1fr !important; }
  .v-hero > div:first-child { border-right: 0 !important; border-bottom: 1px solid #12141C; }
  .v-cols > div:first-child { border-right: 0 !important; border-bottom: 1px solid #12141C; }
}

@media (max-width: 760px) {
  .wp [style*="48px"] { padding-left: 20px !important; padding-right: 20px !important; }
  .wp [style*="34px 36px"] { padding-left: 20px !important; padding-right: 20px !important; }
  .wp-foot { justify-content: flex-start !important; }
  /* The identity line is the page's anchor — let it wrap rather than shrink
     below a readable size. */
  .v-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .wp * { transition: none !important; }
}

/* ------------------------------------------------------------------ phones */
/* Same treatment the other imported pages get: this document is drawn on a wide
   cursor canvas, so its gutters, its fixed grid minimums and its cursor-sized
   nav all have to give way on a phone. */
@media (max-width: 900px) {
  .wp [style*="px 48px"],
  .wp [style*="px 36px"] { padding-left: 20px !important; padding-right: 20px !important; }
  .wp [style*="grid-template-columns:minmax"] { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 620px) {
  /* Tracks become minmax(0,1fr) so a long address or hash can never push the
     page wider than the phone. */
  .wp [style*="grid-template-columns:repeat(auto-fit"] { grid-template-columns: minmax(0, 1fr) !important; }
  .wp [style*="min-width:280px"] { min-width: 0 !important; }
  .wp [style*="white-space:nowrap"] { white-space: normal !important; }
}

/* Touch targets: the design's nav sits at 28px and its colophon links at 12px. */
@media (max-width: 760px) {
  .wp-mast { flex-wrap: wrap !important; gap: 10px; }
  .wp-mast > nav { order: 3; flex-basis: 100%; overflow-x: auto; }
  .wp-mast nav a { padding-top: 11px !important; padding-bottom: 11px !important; }
  .wp-foot a { display: inline-block; padding: 7px 0; }
  .wp button:not([style*="height:"]) { min-height: 40px; }
}