/* StockLens dashboard.
   On a phone this is built as an iOS app: large title, grouped list rows,
   a bottom tab bar over the home indicator, sheets rather than pages.
   On a desktop it is a two-column app: a fixed rail and a wide content
   column, not a stretched phone.

   Everything on screen is real. The markets come from the live token list,
   the scans come from this device, and the wallet tab is an honest empty
   state because buying is not built. */

:root {
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #86868b;
  --hair: rgba(0,0,0,.09);
  --grey: #f2f2f6;          /* iOS grouped-list ground */
  --card: #ffffff;
  --blue: #0544dd;
  --blue-soft: rgba(5,68,221,.1);
  --green: #1d7a45;
  --r-chip: 10px; --r-btn: 12px; --r-card: 16px; --r-lg: 18px;
  --rail: 264px;
  --tabbar: 58px;
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body {
  background: var(--grey); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.45; letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input { font: inherit; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.fine { font-size: 12px; line-height: 1.45; color: var(--ink-3); }

/* ---------- icons ---------- */
.ico { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; }
.ico svg { width: 100%; height: 100%; }

/* ---------- desktop rail ---------- */
.rail { display: none; }

/* ---------- app column ---------- */
.app { padding: calc(var(--safe-t) + 8px) 0 calc(var(--tabbar) + var(--safe-b) + 18px); }
.tab { padding-inline: 16px; }
.tab[hidden] { display: none; }

.big-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 10px 2px 14px; }
.big-title h1 { margin: 0; font-size: 34px; line-height: 1.08; letter-spacing: -0.03em; font-weight: 700; }
.eyebrow-sm { margin: 0 0 2px; font-size: 12.5px; color: var(--ink-3); }
.round-cta {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blue); color: #fff; box-shadow: 0 10px 24px -14px rgba(5,68,221,.9);
  transition: transform .18s cubic-bezier(.2,.7,.2,1);
}
.round-cta:active { transform: scale(.94); }

/* ---------- grouped list, iOS style ---------- */
.list { background: var(--card); border-radius: var(--r-card); overflow: hidden; }
.list:empty { display: none; }
.row {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px; align-items: center; width: 100%; text-align: left;
  padding: 11px 14px; min-height: 60px; position: relative;
  transition: background .16s ease;
}
.row + .row::before { content: ""; position: absolute; left: 68px; right: 0; top: 0; height: 1px; background: var(--hair); }
.row:active { background: #ececf1; }
.row-badge {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: var(--blue-soft); color: var(--blue);
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: -0.02em;
}
.row-badge.is-none { background: #ececf1; color: var(--ink-3); }
/* a real logo fills the badge; a company with no market keeps it, stepped back */
.row-badge.has-logo { overflow: hidden; background: #ececf1; }
.row-badge.has-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.row-badge.has-logo.is-none img { filter: grayscale(1); opacity: 0.45; }
.row-main { min-width: 0; }
.row-title { font-size: 16px; font-weight: 500; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-sub { font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-right { display: grid; justify-items: end; gap: 2px; }
.row-px { font-family: var(--mono); font-size: 15px; font-variant-numeric: tabular-nums; }
.row-tag { font-size: 11px; color: var(--ink-3); }
.row-tag.is-live { color: var(--green); }
.row-tag.is-halt { color: #b3261e; }
.chev { color: #c7c7cc; }

/* ---------- search and segmented control ---------- */
.search-row { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.search {
  flex: 1; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px;
  border-radius: var(--r-btn); background: rgba(118,118,128,.12); color: var(--ink-3);
}
.search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 16px; color: var(--ink); }
.seg { display: flex; padding: 2px; border-radius: var(--r-btn); background: rgba(118,118,128,.12); }
.seg button { padding: 6px 12px; border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.seg button.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.14); }

/* ---------- empty states ---------- */
.empty { background: var(--card); border-radius: var(--r-card); padding: 26px 20px; display: grid; gap: 12px; justify-items: start; }
.empty-mark { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); }
.empty h2 { margin: 0; font-size: 20px; letter-spacing: -0.02em; }
.empty p { margin: 0; color: var(--ink-2); font-size: 15px; }
.fine-list { margin: 2px 0 0; padding-left: 18px; color: var(--ink-3); font-size: 13px; display: grid; gap: 5px; }
.btn-pill { margin-top: 6px; display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 980px; background: var(--blue); color: #fff; font-size: 15px; font-weight: 500; }

/* ---------- tab bar ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  height: calc(var(--tabbar) + var(--safe-b)); padding-bottom: var(--safe-b);
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: center;
  background: rgba(249,249,251,.86); backdrop-filter: saturate(180%) blur(22px);
  border-top: 1px solid var(--hair);
}
.tabbar button, .tabbar a {
  display: grid; justify-items: center; gap: 2px; font-size: 10.5px; color: var(--ink-3);
  transition: color .16s ease;
}
.tabbar button.is-on { color: var(--blue); }
.tabbar .ico { width: 24px; height: 24px; }
.tabbar-cta {
  width: 46px; height: 46px; border-radius: 50%; background: var(--blue); color: #fff;
  place-self: center; place-items: center; box-shadow: 0 10px 22px -12px rgba(5,68,221,.95);
}
.tabbar-cta .ico { width: 24px; height: 24px; }

/* ---------- sheet ---------- */
.sheet-scrim { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .3s ease; }
.sheet-scrim.is-on { opacity: 1; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  max-height: 88svh; overflow: auto; padding: 8px 16px calc(22px + var(--safe-b));
  background: #fff; border-radius: 16px 16px 0 0;
  box-shadow: 0 -20px 60px -30px rgba(0,0,0,.6);
  transform: translateY(101%); transition: transform .38s cubic-bezier(.22,.68,.24,1);
}
.sheet.is-on { transform: none; }
.sheet-grab { width: 38px; height: 5px; border-radius: 3px; background: #d7d7dc; margin: 4px auto 14px; }
.sheet h2 { margin: 0; font-size: 26px; letter-spacing: -0.025em; }
.sheet-sub { margin: 2px 0 16px; color: var(--ink-3); font-size: 14px; }
.kv { display: grid; }
.kv div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--hair); font-size: 15px; }
.kv dt { color: var(--ink-3); font-size: 13px; }
.kv dd { margin: 0; font-weight: 500; text-align: right; overflow-wrap: anywhere; }

/* =========================================================================
   Desktop: a real two-column app, not a stretched phone
   ========================================================================= */
@media (min-width: 900px) {
  body { background: #fff; }
  .tabbar { display: none; }
  .rail {
    display: flex; flex-direction: column; gap: 10px;
    position: fixed; inset: 0 auto 0 0; width: var(--rail); padding: 22px 16px;
    background: var(--grey); border-right: 1px solid var(--hair);
  }
  .rail-brand { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 16px; letter-spacing: -0.02em; padding: 4px 8px 14px; }
  .rail-brand img { width: 22px; height: 22px; border-radius: 6px; }
  .rail-nav { display: grid; gap: 2px; }
  .rail-nav a {
    display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--r-btn);
    color: var(--ink-2); font-size: 14.5px; font-weight: 500; transition: background .16s ease, color .16s ease;
  }
  .rail-nav a:hover { background: rgba(118,118,128,.1); color: var(--ink); }
  .rail-nav a.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
  .rail-cta {
    margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 9px;
    height: 42px; border-radius: var(--r-btn); background: var(--blue); color: #fff; font-size: 14.5px; font-weight: 500;
    transition: transform .18s cubic-bezier(.2,.7,.2,1), filter .18s ease;
  }
  .rail-cta:hover { transform: translateY(-1px); filter: brightness(1.06); }
  .rail-foot { margin-top: auto; display: grid; gap: 10px; }
  .rail-foot .ca {
    display: inline-flex; align-items: center; gap: 7px; justify-content: flex-start;
    font-family: var(--mono); font-size: 11.5px; padding: 8px 10px; border-radius: var(--r-chip);
    background: #fff; border: 1px solid var(--hair); color: var(--ink-2);
  }
  .rail-foot .ca b { color: var(--ink-3); font-weight: 500; }

  .app { margin-left: var(--rail); padding: 26px 0 60px; }
  .tab { padding-inline: clamp(24px, 3.4vw, 54px); max-width: 1180px; }
  .big-title { padding: 6px 0 22px; }
  .big-title h1 { font-size: clamp(32px, 3vw, 44px); }

  /* the list becomes a table that uses the width */
  .list { border: 1px solid var(--hair); border-radius: var(--r-lg); }
  .row { grid-template-columns: 48px minmax(0, 2fr) minmax(0, 1.6fr) minmax(0, 1fr) auto; padding: 12px 18px; min-height: 64px; }
  .row + .row::before { left: 18px; }
  .row:hover { background: #fafafc; }
  .row-badge { width: 48px; height: 48px; font-size: 12px; }
  .row-mid { min-width: 0; font-size: 13.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .row-px { font-size: 16px; }
  .search-row { max-width: 620px; }
  .empty { max-width: 640px; padding: 34px 30px; }
  .sheet {
    left: 50%; right: auto; bottom: auto; top: 50%; width: min(560px, 92vw);
    translate: -50% -50%; border-radius: var(--r-lg); max-height: 86vh; padding: 22px 26px 26px;
    transform: scale(.97); opacity: 0; transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .25s ease;
  }
  .sheet.is-on { transform: scale(1); opacity: 1; }
  .sheet-grab { display: none; }
}

@media (max-width: 899px) {
  .row-mid { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- row internals: the spans must stack, and the chevron needs a column ---------- */
.row-main, .row-right { display: grid; }
.row-title, .row-sub, .row-px, .row-tag { display: block; }
.row { grid-template-columns: 42px minmax(0, 1fr) auto 10px; }
.chev { width: 10px; height: 18px; color: #c7c7cc; }
.chev svg { width: 10px; height: 18px; }
.list .row:not(:has(.chev)) { grid-template-columns: 42px minmax(0, 1fr) auto; }

/* search and filter must not collide on a narrow screen */
.search-row { flex-wrap: wrap; }
.search { min-width: 190px; }

@media (min-width: 900px) {
  .row { grid-template-columns: 48px minmax(0, 1.7fr) minmax(0, 1.5fr) minmax(0, .9fr) 12px; }
  .list .row:not(:has(.chev)) { grid-template-columns: 48px minmax(0, 1.7fr) minmax(0, 1.5fr) minmax(0, .9fr); }
  .search-row { flex-wrap: nowrap; }
}

/* ---------- log: sticky day headers, tier glyphs, prose about the absent wallet ---------- */
.day + .day { margin-top: 18px; }
.day-head {
  position: sticky; top: 0; z-index: 5; margin: 0 0 8px;
  padding: 6px 2px; font-size: 13px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3);
  background: rgba(242,242,246,.94); backdrop-filter: blur(10px);
}
.tier { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.tier-high { background: var(--blue); }
.tier-confirmed { background: var(--ink); }
.tier-medium { box-shadow: inset 0 0 0 1.5px var(--blue); }
.tier-low { box-shadow: inset 0 0 0 1.5px #c7c7cc; }
.holdings-note { margin: 16px 2px 0; max-width: 62ch; }
.seg-wide { margin-bottom: 14px; }
.seg-wide button { flex: 1; text-align: center; }
.title-actions { display: flex; align-items: center; gap: 8px; }
.round-ghost {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(118,118,128,.12); color: var(--ink-2);
  transition: background .16s ease, transform .18s cubic-bezier(.2,.7,.2,1);
}
.round-ghost:hover { background: rgba(118,118,128,.2); color: var(--ink); }
.round-ghost:active { transform: scale(.94); }
.sheet-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.btn-ghost { background: rgba(118,118,128,.12); color: var(--ink); }
.btn-danger { background: rgba(179,38,30,.1); color: #b3261e; }
.serif { font-style: normal; font-weight: 500; }
/* price movement is never carried by colour alone on this product: there is no position to be up or down */
.row-tag.is-live { color: var(--ink-3); }

@media (min-width: 900px) {
  .day-head { background: rgba(255,255,255,.94); top: -2px; }
  .seg-wide { max-width: 320px; }
}

/* the raised action must stay white: the generic tab colour was winning on specificity */
.tabbar .tabbar-cta { color: #fff; }
.tabbar .tabbar-cta .ico { color: #fff; }


/* headings match the site: Geist Sans 700, tight */
:root { --display: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.big-title h1, .empty h2, .sheet h2, .step h3, .tile-obj, .verdict-v, .t-2 {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.04em; line-height: .98;
}