/* Stock — mobile-first, dark. One stylesheet, no framework: the whole app is
   four lists and a form, and a framework would be more bytes than the app. */

:root {
  --bg:        #0f1620;
  --surface:   #182231;
  --surface-2: #1f2b3d;
  --line:      #2a3849;
  --text:      #e8eef6;
  --muted:     #8ea0b8;
  --accent:    #4ad691;
  --accent-dim:#2f8f61;
  --up:        #4ad691;
  --down:      #ff6b6b;
  --warn:      #ffc857;
  --radius:    14px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Stops iOS bouncing the whole page behind the fixed tab bar. */
  overscroll-behavior-y: none;
}

button, input { font: inherit; color: inherit; }
.view { min-height: 100dvh; display: flex; flex-direction: column; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }

/* ── Login ─────────────────────────────────────────────────────────────── */
.login { justify-content: center; align-items: center; padding: 24px; }
.login-box { width: 100%; max-width: 380px; text-align: center; }
.login-logo { width: 76px; height: 76px; border-radius: 18px; }
.login h1 { margin: 14px 0 2px; font-size: 26px; letter-spacing: -0.3px; }
.login p { margin: 0 0 26px; font-size: 14px; }
.login form { text-align: left; }

label {
  display: block; margin: 14px 0 6px;
  font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--muted);
}

/* Every text-like field, by exclusion rather than by list. Naming the types
   individually is exactly how the signup screen's email box ended up rendering
   as an unstyled white rectangle: type=email was simply missing from the list,
   and nothing complains when a selector quietly matches nothing. */
input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]) {
  width: 100%; padding: 13px 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; outline: none;
  /* 16px minimum, or iOS Safari zooms the page when the field is focused. */
  font-size: 16px;
}
input:focus { border-color: var(--accent-dim); }

button { cursor: pointer; border: none; border-radius: 10px; }
.primary {
  width: 100%; margin-top: 20px; padding: 14px;
  background: var(--accent); color: #06281a; font-weight: 650;
}
.primary:active { background: var(--accent-dim); }
.primary:disabled { opacity: 0.55; cursor: default; }
.secondary {
  padding: 12px 16px; background: var(--surface-2);
  color: var(--text); border: 1px solid var(--line);
}
.small { width: auto; margin: 0; padding: 9px 14px; font-size: 14px; }
.linkish {
  margin-top: 22px; background: none; color: var(--muted);
  font-size: 13px; text-decoration: underline;
}
.hint { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.error {
  margin: 14px 0 0; padding: 11px 13px;
  background: rgba(255,107,107,0.12); border: 1px solid rgba(255,107,107,0.35);
  border-radius: 9px; color: #ffb3b3; font-size: 14px;
}

/* ── Chrome ────────────────────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 14px 16px 10px;
  padding-top: calc(14px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--line); background: var(--bg);
  position: sticky; top: 0; z-index: 5;
}
.topbar h2 { margin: 0; font-size: 19px; letter-spacing: -0.2px; }
.meta { margin: 3px 0 0; font-size: 12px; color: var(--muted); }
.topbar-actions { display: flex; gap: 6px; flex: none; }
.icon-btn {
  width: 38px; height: 38px; font-size: 17px;
  background: var(--surface); color: var(--muted); border: 1px solid var(--line);
}
.icon-btn:active { background: var(--surface-2); }
.icon-btn.spin { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

main {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 12px 14px 90px;
}

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; display: flex;
  background: rgba(15,22,32,0.94); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  flex: 1; padding: 9px 4px 8px; background: none; color: var(--muted);
  font-size: 11px; display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.tab span { font-size: 17px; line-height: 1; }
.tab.active { color: var(--accent); }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 13px 14px; margin-bottom: 10px;
}
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.code { font-size: 17px; font-weight: 650; letter-spacing: -0.2px; }
.price { font-size: 16px; font-variant-numeric: tabular-nums; }

.badge {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 650; letter-spacing: 0.3px; white-space: nowrap;
}
.b-strong  { background: rgba(74,214,145,0.18); color: #6ff0b4; }
.b-buy     { background: rgba(74,214,145,0.12); color: #4ad691; }
.b-watch   { background: rgba(255,200,87,0.14); color: var(--warn); }
.b-neutral { background: rgba(142,160,184,0.14); color: var(--muted); }
.b-weak    { background: rgba(255,107,107,0.12); color: #ff9b9b; }
.b-avoid   { background: rgba(255,107,107,0.18); color: var(--down); }

.row {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 9px; font-size: 13px;
}
.row .k { color: var(--muted); }
.row .v { font-variant-numeric: tabular-nums; text-align: right; }
.note {
  margin: 11px 0 0; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted); line-height: 1.5;
}
.up { color: var(--up); } .down { color: var(--down); }

.pane-actions { display: flex; gap: 8px; margin-bottom: 12px; }
.search { display: flex; gap: 8px; margin-bottom: 14px; }
.search input { flex: 1; }
.search .primary { width: auto; margin: 0; padding: 0 18px; }

.state { text-align: center; padding: 44px 20px; color: var(--muted); }
.state .big { font-size: 30px; margin-bottom: 12px; opacity: 0.5; }
.spinner {
  width: 26px; height: 26px; margin: 0 auto 14px;
  border: 3px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}

.card-actions { display: flex; gap: 8px; margin-top: 12px; }
/* margin-top: 0 matters. .primary carries a 20px top margin for the login
   form's submit button, and without resetting it here the Sell button sat
   20px below Edit and Remove and made the whole row that much taller. */
.card-actions button { flex: 1; margin-top: 0; padding: 9px; font-size: 13px; }
.danger { background: rgba(255,107,107,0.14); color: #ff9b9b; border: 1px solid rgba(255,107,107,0.3); }

/* ── Sheet ─────────────────────────────────────────────────────────────── */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(0,0,0,0.55); display: flex; align-items: flex-end;
}
.sheet {
  width: 100%; background: var(--bg);
  border-radius: 20px 20px 0 0; border-top: 1px solid var(--line);
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
  max-height: 92dvh; overflow-y: auto;
  animation: rise 0.22s ease-out;
}
@keyframes rise { from { transform: translateY(100%); } }
.sheet h3 { margin: 0 0 4px; font-size: 18px; }
.sheet-actions { display: flex; gap: 10px; margin-top: 22px; }
.sheet-actions button { flex: 1; margin: 0; }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 30;
  background: var(--surface-2); border: 1px solid var(--line);
  padding: 11px 18px; border-radius: 999px; font-size: 14px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.4);
}

@media (min-width: 640px) {
  main { max-width: 640px; margin: 0 auto; width: 100%; }
  .topbar { max-width: 640px; margin: 0 auto; width: 100%; }
  .sheet { max-width: 520px; margin: 0 auto; border-radius: 20px; }
  .sheet-backdrop { align-items: center; padding: 20px; }
}

/* ── Home tiles ────────────────────────────────────────────────────────── */

.tile-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.7px;
  color: var(--muted); margin-bottom: 8px;
}
.hero {
  font-size: 30px; font-weight: 680; letter-spacing: -0.8px;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.hero-sub { font-size: 13px; margin: 2px 0 12px; }

.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  padding: 6px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
}

/* A chip that goes somewhere. The badge colours already carry the meaning, so
   this only has to say "tappable": a border, and a press state. */
.tapchip {
  border: 1px solid transparent;
  font: inherit; font-size: 12.5px; font-weight: 600;
  /* 32px is below the 44px touch target guideline, so the padding does the
     work rather than the text size - these sit in a row and must stay small. */
  padding: 8px 13px;
}
.tapchip:active { transform: scale(0.96); }
/* The selected filter. Only the border changes: recolouring the chip would
   fight the badge colour that tells you which action it is. */
.tapchip.on { border-color: currentColor; }

.tile-hint { margin: 9px 0 0; font-size: 12px; color: var(--muted); }

/* The filter row above the buy list. Scrolls sideways rather than wrapping, so
   the first card stays visible on a narrow screen. */
.filters {
  display: flex; gap: 7px; margin-bottom: 12px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Bleed to the edges so a scrolled row does not look clipped mid-card. */
  padding: 2px 14px; margin-left: -14px; margin-right: -14px;
}
.filters::-webkit-scrollbar { display: none; }
.filters .chip { flex: none; white-space: nowrap; }

.mover {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 0; border-top: 1px solid var(--line);
}
.mover:first-of-type { border-top: 0; padding-top: 2px; }
.mover-code { flex: 1; font-weight: 600; font-size: 14.5px; }
.mover-price { font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mover-pct {
  min-width: 68px; text-align: right;
  font-size: 14px; font-weight: 620; font-variant-numeric: tabular-nums;
}

/* ── Password reveal ───────────────────────────────────────────────────── */

.field-wrap { position: relative; }
/* Room for the button, or the dots run underneath it on a long password. */
.field-wrap input { padding-right: 68px; }
.reveal {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  padding: 7px 10px; background: var(--surface-2); color: var(--muted);
  border: 1px solid var(--line); border-radius: 8px;
  font-size: 12px; letter-spacing: 0.3px;
}
.reveal:active { color: var(--text); }
.reveal[aria-pressed="true"] { color: var(--accent); border-color: var(--accent-dim); }

/* ── Instrument picker ─────────────────────────────────────────────────── */

.picker-host { position: relative; flex: 1; }

/* Anchored to the field and floating over the sheet, so a long list never
   pushes the Save button off the bottom of the screen. */
.picker {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; overflow-y: auto; max-height: 244px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
  -webkit-overflow-scrolling: touch;
}
.picker-item {
  display: flex; align-items: baseline; gap: 9px;
  padding: 10px 12px; border-top: 1px solid var(--line); cursor: pointer;
}
.picker-item:first-child { border-top: 0; }
/* Highlight follows the keyboard as well as the finger; the two must look the
   same or arrow-key selection appears to do nothing. */
.picker-item.on, .picker-item:hover { background: var(--surface-2); }
.picker-code { font-weight: 620; font-size: 14.5px; }
/* The typed prefix, so it is obvious why a row matched. */
.picker-code b { color: var(--accent); font-weight: 700; }
.picker-group {
  font-size: 10.5px; color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 6px;
}
.picker-close { margin-left: auto; font-size: 13px; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.picker-none { padding: 11px 12px; font-size: 13px; color: var(--muted); }

/* ── Sign up and verify ────────────────────────────────────────────────── */

.signup-cta { width: 100%; margin-top: 12px; padding: 13px; }

/* The code is the one thing on its screen, so it is set large and spaced.
   Reading six digits off a notification and typing them into a normal field is
   where people transpose a pair. */
.code-input {
  text-align: center;
  font-size: 30px !important;
  letter-spacing: 10px;
  font-variant-numeric: tabular-nums;
  /* The letter-spacing adds a gap after the last digit, which makes the text
     look off-centre; half of it back as padding re-centres it. */
  padding-left: 24px !important;
  padding-right: 14px !important;
}

.resend { width: 100%; margin-top: 14px; }
.resend:disabled { opacity: 0.5; cursor: default; }

/* ── Available fund ────────────────────────────────────────────────────── */

/* The recent movements list under the balance. Reuses the mover row, which is
   already a three-column "name / detail / signed number" line - the same shape
   a ledger entry wants. */
.fund-log { margin-top: 11px; padding-top: 4px; border-top: 1px solid var(--line); }

/* Three buttons on a holding card, so none of them may claim a minimum. */
.card-actions button { min-width: 0; }