/* Peeky styles, Factory design system (see docs/design-system.md). */

/* ---------- Design tokens ---------- */
:root {
  /* Colors */
  --color-canvas: #101010;        /* page background */
  --color-panel: #0d0d0d;         /* dashboard preview frame, a hair darker than canvas */
  --color-carbon: #1d1a18;        /* raised dark surfaces, inputs, hairlines */
  --color-ash: #3d3a39;           /* stronger hairlines, ghost borders */
  --color-graphite: #4d4947;
  --color-muted: #8a8380;         /* muted body text */
  --color-label: #b8b3b0;         /* mono labels, eyebrows */
  --color-bone: #eeeeee;          /* main text and light cards */
  --color-chalk: #fafafa;         /* light button fill */
  --color-orange: #ee6018;        /* status / data only, never a fill */
  --color-green: #a0ca92;         /* status / data only, never a fill */

  /* Fonts */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Layout */
  --page-max: 1200px;
  --gutter: 24px;
  --section-gap: 96px;

  /* Radius */
  --radius-sm: 3px;    /* buttons, inputs */
  --radius-card: 10px;
  --radius-panel: 20px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --fast: 0.15s;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Phones enlarge text in wide areas that scroll sideways (iOS text
     autosizing, Android font boosting), which made the date rows of the
     760px transactions table huge. Keep every size as set here. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-bone);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* The hidden attribute must always win, even over display: flex in a class */
[hidden] {
  display: none !important;
}

h1, h2, h3, p {
  margin: 0;
  font-weight: 400;
}

a {
  color: var(--color-bone);
  text-decoration: none;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease),
              background-color var(--fast) var(--ease);
}

a:hover {
  color: var(--color-chalk);
}

input:focus,
button:focus-visible,
a:focus-visible {
  outline: 1px solid var(--color-bone);
  outline-offset: 2px;
}

/* ---------- Type helpers ---------- */
.display {
  font-size: 72px;
  line-height: 1;
  letter-spacing: -2.88px;
  text-wrap: balance;
}

.heading-lg {
  font-size: 44px;
  line-height: 1.12;
  letter-spacing: -1.1px;
  text-wrap: balance;
}

.heading {
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -1.12px;
}

/* Geist Mono 12px uppercase: the "instrument" voice for labels and tags */
.label,
.eyebrow,
.status {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  letter-spacing: -0.24px;
  text-transform: uppercase;
  color: var(--color-label);
}

.mono {
  font-family: var(--font-mono);
}

.eyebrow,
.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.status {
  gap: 6px;
}

/* 6px status pulse */
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-orange);
  flex: none;
}

/* Logo mark (img/logo-mark-light.svg) + "Peeky" as plain text, so it uses the site font */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-bone);
}

/* ---------- Buttons ---------- */
.btn {
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}

.btn-lg {
  height: 48px;
  padding: 0 18px;
}

.btn-light {
  background: var(--color-chalk);
  color: var(--color-canvas);
}

.btn-light:hover {
  background: var(--color-bone);
  color: var(--color-canvas);
}

/* Dark button. On the light CTA card it uses the canvas black, as in the design. */
.btn-dark {
  background: var(--color-canvas);
  color: var(--color-bone);
}

.btn-dark:hover {
  background: var(--color-carbon);
  color: var(--color-chalk);
}

/* Text link with an underline hairline */
.link-ghost {
  align-self: flex-start;
  padding-block: 8px;
  font-size: 14px;
  border-bottom: 1px solid var(--color-ash);
}

.link-ghost:hover {
  border-bottom-color: var(--color-chalk);
}

/* ---------- Page frame ---------- */
.page {
  padding: 0 var(--gutter) var(--section-gap);
}

.site-header,
.landing,
.app,
.site-footer {
  max-width: var(--page-max);
  margin-inline: auto;
}

.site-header {
  min-height: 64px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  font-size: 14px;
  text-transform: uppercase;
}

.landing {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  padding-top: 80px;
}

.site-footer {
  margin-top: var(--section-gap);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
  font-size: 14px;
  color: var(--color-muted);
}

/* ---------- Hero ---------- */
/* Two flex children that wrap: copy on the left, preview on the right.
   The huge flex-grow on the preview makes it take the wider share, and
   when there is no room for both they stack. */
.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px;
}

.hero-copy {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.lede {
  max-width: 30em;
  color: var(--color-muted);
}

/* Address form */
.lookup {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lookup-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.input {
  flex: 1 1 260px;
  min-width: 0;
  height: 48px;
  padding-inline: 14px;
  background: var(--color-carbon);
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-sm);
  color: var(--color-bone);
  font-family: var(--font-mono);
  font-size: 14px;
  transition: border-color var(--fast) var(--ease);
}

.input::placeholder {
  color: var(--color-muted);
}

.input[aria-invalid='true'] {
  border-color: var(--color-orange);
}

.form-hint {
  font-size: 14px;
  color: var(--color-muted);
}

/* Error is a status message, so orange is allowed here */
.form-error {
  font-size: 14px;
  color: var(--color-orange);
}

.form-error:empty {
  display: none;
}

/* ---------- Dashboard preview ---------- */
.preview {
  flex: 999 1 560px;
  min-width: 0;
  background: var(--color-panel);
  border: 1px solid var(--color-carbon);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.preview-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-carbon);
}

.traffic {
  display: flex;
  gap: 6px;
}

.traffic span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-ash);
}

.preview-title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: -0.24px;
  text-transform: uppercase;
  color: var(--color-muted);
}

.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tile {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-bottom: 1px solid var(--color-carbon);
  border-right: 1px solid var(--color-carbon);
}

/* Right column already touches the frame border */
.tile:nth-child(2n) {
  border-right: 0;
}

.tile-value {
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -1.12px;
  font-variant-numeric: tabular-nums;
}

.tile-note {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-muted);
}

.tile-note.up {
  color: var(--color-green);
}

.share-rows {
  display: flex;
  flex-direction: column;
  padding: 8px 20px 16px;
}

.share-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 72px;
  align-items: center;
  gap: 16px;
  padding-block: 10px;
  border-bottom: 1px solid var(--color-carbon);
  font-size: 14px;
}

.bar {
  height: 4px;
  background: var(--color-carbon);
  border-radius: 2px;
}

.bar span {
  display: block;
  height: 4px;
  width: var(--share);
  background: var(--color-label);
  border-radius: 2px;
}

.share-value {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-label);
}

/* ---------- How it works ---------- */
.how {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section-head .heading-lg {
  max-width: 16em;
}

/* auto-fit: as many 280px+ columns as fit, so 3 on desktop and 1 on a phone */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 24px;
}

/* Dark card: the border is the card, no fill */
.feature-card {
  border: 1px solid var(--color-carbon);
  border-radius: var(--radius-card);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feature-title {
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.6px;
}

.feature-body {
  flex: 1;
  color: var(--color-muted);
}

/* ---------- CTA card ---------- */
.cta-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  background: var(--color-bone);
  color: var(--color-canvas);
  border-radius: var(--radius-card);
  padding: 40px;
}

.cta-copy {
  flex: 999 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cta-card .eyebrow {
  color: var(--color-canvas);
}

/* ---------- Small helpers ---------- */
/* Data colors. Green and orange are only for up/down and status. */
.text-up    { color: var(--color-green); }
.text-down  { color: var(--color-orange); }
.text-muted { color: var(--color-muted); }
.text-label { color: var(--color-label); }

.dot-green   { background: var(--color-green); }
.dot-neutral { background: var(--color-label); }
.dot-muted   { background: var(--color-graphite); }

.label-muted {
  color: var(--color-muted);
}

.small-note {
  font-size: 12px;
  color: var(--color-muted);
}

/* Hidden on screen, still read by screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Extra button sizes and the ghost style used in the dashboard */
.btn-md {
  height: 44px;
  padding: 0 16px;
  justify-content: center;
}

.btn-ghost {
  background: transparent;
  color: var(--color-bone);
  border: 1px solid var(--color-ash);
}

.btn-ghost:hover {
  border-color: var(--color-bone);
}

/* Live SOL price in the header: logo, price, 24h change, 24h line */
.sol-ticker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: -0.24px;
}

.sol-price {
  color: var(--color-bone);
}

/* Fixed width, so the hover readout (09:41) doesn't make things jump */
.sol-change {
  min-width: 6ch;
}

.sparkline {
  display: block;
  overflow: visible;
  touch-action: none; /* a finger drag on the line reads it, instead of scrolling */
  cursor: crosshair;
}

/* Green when SOL is up over 24h, orange when down: data colors only */
.sparkline path {
  stroke: var(--color-green);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.sparkline circle {
  fill: var(--color-green);
  stroke: var(--color-canvas); /* a ring, so the dot stands off the line */
  stroke-width: 2;
}

.sol-ticker.is-down .sparkline path { stroke: var(--color-orange); }
.sol-ticker.is-down .sparkline circle { fill: var(--color-orange); }

/* Small mono text button, used for Refresh in the header */
.btn-text {
  padding: 8px 0;
  background: transparent;
  border: 0;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: -0.24px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--fast) var(--ease);
}

.btn-text:hover {
  color: var(--color-bone);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---------- App shell (app/index.html, js/shell.js) ----------
   Design: Wire-Desktop and Wire-Mobile. A sidebar from 1024px, an icon rail
   from 768px, below that a top bar, a tab bar and bottom sheets. */
.app-body {
  --side-w: 260px;
  --track: #2a2624; /* meter track: a step above carbon */
}

.side {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  width: var(--side-w);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 12px;
  border-right: 1px solid var(--color-carbon);
  background: var(--color-canvas);
  overflow-y: auto;
}

.side .label {
  font-size: 11px;
  color: var(--color-muted);
}

.side-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.side-label {
  padding: 18px 8px 6px;
}

.side-logo + .side-label {
  padding-top: 0;
}

.rail-only {
  display: none !important;
}

/* The wallet switcher: which wallet every view shows */
.switcher {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: var(--color-carbon);
  border: 1px solid var(--color-ash);
  border-radius: 6px;
  color: var(--color-bone);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--fast) var(--ease);
}

.switcher:hover,
.switcher[aria-expanded='true'] {
  border-color: var(--color-label);
}

.switcher-id {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.switcher-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side .switcher-meta {
  font-size: 10px;
}

.switcher-arrows {
  color: var(--color-muted);
}

/* Views and Connect */
.side-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 8px;
  border-radius: 6px;
  color: var(--color-label);
  font-size: 14px;
}

.nav-item svg {
  flex: none;
  color: var(--color-muted);
  transition: color var(--fast) var(--ease);
}

a.nav-item:hover {
  color: var(--color-bone);
  background: rgba(29, 26, 24, 0.6);
}

.nav-item[aria-current='page'] {
  background: var(--color-carbon);
  color: var(--color-bone);
}

.nav-item[aria-current='page'] svg,
a.nav-item:hover svg {
  color: var(--color-bone);
}

.side .nav-tag {
  margin-left: auto;
  font-size: 10px;
}

.nav-item.is-soon {
  cursor: default;
}

/* You: usage and the account button (or the logged-out card) */
.side-account {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.usage-mini {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 8px;
}

.usage-mini-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.side .usage-mini-count {
  color: var(--color-label);
}

.meter {
  display: block;
  height: 4px;
  background: var(--track);
  border-radius: 2px;
  overflow: hidden;
}

.meter-fill {
  display: block;
  height: 100%;
  background: var(--color-bone);
  border-radius: 2px;
}

/* Status colour: near this month's limit */
.meter-fill.is-limit {
  background: var(--color-orange);
}

.account-button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  background: transparent;
  border: 1px solid var(--color-carbon);
  border-radius: 6px;
  color: var(--color-bone);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}

.account-button:hover,
.account-button.is-current,
.account-button[aria-expanded='true'] {
  background: var(--color-carbon);
  border-color: var(--color-label);
}

.avatar {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-bone);
  color: var(--color-canvas);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
}

.account-id {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.account-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side .account-id .label {
  font-size: 10px;
}

.account-more {
  color: var(--color-muted);
}

.side-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--color-carbon);
  border: 1px solid var(--color-ash);
  border-radius: 6px;
  font-size: 14px;
}

.side-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.btn-sm {
  height: 34px;
  padding: 0 12px;
  justify-content: center;
  font-size: 14px;
}

/* Tooltips for the tablet rail (its items are icons only) */
@media (min-width: 768px) and (max-width: 1023px) {
  [data-tip]:hover::after,
  [data-tip]:focus-visible::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    padding: 6px 8px;
    background: var(--color-carbon);
    border: 1px solid var(--color-ash);
    border-radius: var(--radius-sm);
    color: var(--color-bone);
    font: 400 12px var(--font-sans);
    white-space: nowrap;
    pointer-events: none;
  }
}

/* The content: page bar, then the page, at most 1080px */
.content {
  margin-left: var(--side-w);
  min-width: 0;
  min-height: 100vh;
}

.page-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 32px;
  border-bottom: 1px solid var(--color-carbon);
  background: var(--color-canvas);
}

.page-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.page-heading-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.page-scope {
  font-size: 11px;
  color: var(--color-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-scope.is-address {
  text-transform: none;
}

.page-title {
  font-size: 18px;
  line-height: 1.2;
}

/* Only on a phone: Claude and Account get a way back */
.page-back {
  display: none !important;
}

.page-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.content-inner {
  max-width: 1080px;
  margin-inline: auto;
  padding: 32px;
}

.app-foot {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--color-carbon);
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 72ch;
}

.app-foot .small-note {
  margin: 0;
  line-height: 1.5;
}

.app-foot-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 16px;
}

/* The phone's bars: hidden on bigger screens */
.topbar,
.tabbar {
  display: none;
}

/* ---------- Menus: a popover next to its button, a bottom sheet on a phone ---------- */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: transparent;
}

.menu {
  position: fixed;
  z-index: 40;
  width: 300px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: var(--color-canvas);
  border: 1px solid var(--color-ash);
  border-radius: 6px;
  font-size: 14px;
  animation: menu-in var(--fast) var(--ease);
}

@keyframes menu-in {
  from { opacity: 0; }
}

/* Only in a sheet */
.sheet-handle,
.menu-title {
  display: none;
}

.wallet-search {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}

.wallet-search .input-sm {
  height: 36px;
  border-radius: 4px;
}

.add-new {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wallet-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wallet-empty {
  padding: 10px;
}

/* One wallet: the select button plus a small remove button over its right edge */
.wallet-row {
  position: relative;
  display: flex;
  align-items: center;
}

.wallet {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--color-bone);
  font-family: var(--font-sans);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--fast) var(--ease);
}

.wallet:hover {
  background: rgba(29, 26, 24, 0.6);
}

/* aria-pressed="true" marks the wallet on screen (also for screen readers) */
.wallet[aria-pressed='true'] {
  background: var(--color-carbon);
}

.wallet-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Long nicknames end in "…" instead of pushing the SOL amount out */
.wallet-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mono, never uppercase: addresses are case-sensitive */
.wallet-addr {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-muted);
}

.switcher-meta .addr {
  text-transform: none;
}

.wallet-sol {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-label);
}

/* The × sits where the SOL amount is and shows on hover; on a touch
   screen it's always there, next to the amount (no hover-only actions) */
.wallet-remove {
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  cursor: pointer;
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease), opacity var(--fast) var(--ease);
}

.wallet-remove:hover {
  color: var(--color-bone);
  background: var(--color-carbon);
}

@media (hover: hover) {
  .wallet-remove {
    position: absolute;
    right: 6px;
    opacity: 0;
    background: var(--color-carbon);
  }

  .wallet-row:hover .wallet-remove,
  .wallet-remove:focus-visible {
    opacity: 1;
  }

  .wallet-row:hover .wallet-sol {
    visibility: hidden;
  }
}

.menu-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  padding: 10px;
  border-top: 1px solid var(--color-carbon);
  color: var(--color-label);
}

.menu-add {
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--color-label);
  font: inherit;
  cursor: pointer;
}

.menu-add:hover {
  color: var(--color-bone);
}

.menu-add .label {
  font-size: 10px;
  color: var(--color-muted);
}

.wallet-more {
  padding: 0 10px 6px;
}

.menu-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  border-radius: 4px;
}

.menu-item:hover {
  background: var(--color-carbon);
}

.menu-item-title .label {
  font-size: 10px;
  color: var(--color-muted);
}

.menu-sub {
  font-size: 12px;
  color: var(--color-muted);
}

.menu-foot-id {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.menu-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-foot-id .label {
  font-size: 10px;
  color: var(--color-muted);
}

.menu-foot-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* ---------- Tablet: an icon rail ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .app-body {
    --side-w: 64px;
  }

  .side {
    align-items: center;
    padding: 16px 8px;
    gap: 6px;
    overflow: visible;
  }

  .side-only,
  .side-label,
  .usage-mini {
    display: none !important;
  }

  .rail-only {
    display: inline-flex !important;
  }

  .side-logo {
    padding: 4px 0 14px;
  }

  .switcher,
  .nav-item,
  .account-button {
    position: relative;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
  }

  .switcher-icon svg {
    display: block;
  }

  .side-nav {
    padding-top: 12px;
  }

  .side-nav + .side-nav {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-carbon);
  }

  .side-card {
    display: none;
  }

  .account-button {
    border-color: transparent;
  }

  .account-id,
  .account-more {
    display: none;
  }

  .page-bar {
    padding: 0 24px;
  }

  .content-inner {
    padding: 24px;
  }
}

/* ---------- Phone: top bar, tab bar, sheets ---------- */
@media (max-width: 767px) {
  .app-body {
    --tabbar-h: 64px;
  }

  .side {
    display: none;
  }

  .content {
    margin-left: 0;
    padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: calc(56px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 14px 0;
    border-bottom: 1px solid var(--color-carbon);
    background: var(--color-canvas);
  }

  .topbar-logo {
    display: inline-flex;
    flex: none;
  }

  .switcher-top {
    width: auto;
    max-width: 60vw;
    height: 36px;
    padding: 0 10px;
    gap: 8px;
  }

  .top-account {
    margin-left: auto;
    display: flex;
  }

  .avatar-button {
    width: 32px;
    height: 32px;
    border: 0;
    font: 500 14px var(--font-sans);
    cursor: pointer;
  }

  .page-bar {
    position: static;
    min-height: 0;
    padding: 16px 16px 8px;
    border-bottom: 0;
  }

  .page-title {
    font-size: 26px;
    letter-spacing: -0.6px;
  }

  .page-back:not([hidden]) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: -12px;
    font-size: 20px;
  }

  .page-tools {
    display: none;
  }

  .content-inner {
    padding: 8px 16px 32px;
  }

  .tabbar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    /* A little air above and below the icons and labels */
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--color-carbon);
    background: var(--color-canvas);
  }

  .tabbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    color: var(--color-muted);
  }

  .tabbar-item[aria-current='page'] {
    color: var(--color-bone);
  }

  .tabbar-item.is-soon {
    opacity: 0.5;
  }

  .scrim {
    background: rgba(16, 16, 16, 0.72);
  }

  html.sheet-open,
  html.sheet-open body {
    overflow: hidden;
  }

  .menu {
    inset: auto 0 0 0;
    width: auto;
    max-height: 85vh;
    padding: 10px 16px calc(24px + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid var(--color-ash);
    border-radius: 20px 20px 0 0;
    gap: 4px;
    animation: sheet-in 0.2s var(--ease);
  }

  .sheet-handle {
    display: block;
    align-self: center;
    flex: none;
    width: 40px;
    height: 4px;
    margin-bottom: 10px;
    border-radius: 2px;
    background: var(--color-ash);
  }

  .menu-title {
    display: block;
    padding: 0 4px 8px;
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .wallet-search .input-sm {
    height: 44px;
  }

  .wallet,
  .menu-item {
    min-height: 56px;
    padding: 6px 12px;
    justify-content: center;
  }

  .wallet {
    justify-content: space-between;
  }

  .menu-foot {
    padding: 14px 12px 0;
  }

  .menu-add {
    min-height: 44px;
  }
}

@keyframes sheet-in {
  from { transform: translateY(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .menu {
    animation: none;
  }
}

/* Bigger fields in a smaller font size */
.input-sm {
  flex: none;
  height: 44px;
  padding-inline: 12px;
  font-size: 13px;
}

/* Nicknames are normal words, so they use the sans font */
.input-text {
  font-family: var(--font-sans);
  font-size: 14px;
}

.view,
.view-body {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Loading, empty and error message box */
.state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 40px 24px;
  border: 1px solid var(--color-carbon);
  border-radius: var(--radius-card);
}

.state-title {
  font-size: 24px;
  letter-spacing: -0.6px;
}

.state-body {
  color: var(--color-muted);
}

.state .btn {
  margin-top: 8px;
}

/* Holdings: total value */
.total {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.total-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 16px;
}

.total-value {
  font-variant-numeric: tabular-nums;
}

.total-change {
  font-family: var(--font-mono);
  font-size: 14px;
}

/* Holdings: row of metric tiles. Each tile draws its right and bottom
   hairline; overflow: hidden plus margin-right: -1px clips the line at the
   far right edge, so it also looks right when the tiles wrap. */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border-top: 1px solid var(--color-carbon);
  overflow: hidden;
}

.stat {
  margin-right: -1px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-right: 1px solid var(--color-carbon);
  border-bottom: 1px solid var(--color-carbon);
}

.stat-value {
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -1.12px;
  font-variant-numeric: tabular-nums;
}

/* A titled block, like the token table */
.block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.block-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.block-title {
  font-size: 24px;
  letter-spacing: -0.6px;
}

/* Tables */
.table-wrap {
  overflow-x: auto;
  /* Keeps absolutely positioned bits (the hidden "Explorer" header label)
     inside this scroll box; otherwise they stick out and widen the page */
  position: relative;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.holdings-table { min-width: 720px; }
.tx-table       { min-width: 760px; }
.insights-table { min-width: 860px; }

.data-table th {
  padding: 12px;
  border-bottom: 1px solid var(--color-ash);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.24px;
  text-align: left;
  text-transform: uppercase;
  color: var(--color-label);
}

.data-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--color-carbon);
}

/* First and last columns line up with the edges, no outer padding */
.data-table th:first-child,
.data-table td:first-child {
  padding-left: 0;
}

.data-table th:last-child,
.data-table td:last-child {
  padding-right: 0;
}

.data-table .num {
  text-align: right;
  /* "−$298.91" stays on one line: a lone minus sign above the amount reads wrong */
  white-space: nowrap;
}

/* Token cell: round mark + symbol + name */
.token {
  display: flex;
  align-items: center;
  gap: 12px;
}

.token-mark {
  position: relative;
  overflow: hidden;
  width: 32px;
  height: 32px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-ash);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-label);
}

/* The Jupiter logo covers the ticker letters; if it fails, the letters show */
.token-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--color-canvas);
}

.token-id {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.token-name {
  font-size: 12px;
  color: var(--color-muted);
}

.held {
  font-size: 13px;
  color: var(--color-muted);
}

/* "What counts as spam?": a small fold-out under the spam toggle */
.spam-info {
  max-width: 44em;
  font-size: 14px;
  color: var(--color-muted);
}

.spam-info summary {
  width: fit-content;
  cursor: pointer;
  color: var(--color-label);
  transition: color var(--fast) var(--ease);
}

.spam-info summary:hover {
  color: var(--color-bone);
}

.spam-info p,
.spam-info ul {
  margin: 8px 0 0;
}

.spam-info ul {
  padding-left: 20px;
}

/* Spam rows, once shown, stay visibly in the background */
.is-spam {
  opacity: 0.5;
}

.share-col {
  width: 16%;
}

.share-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.share-cell .bar {
  flex: 1;
}

.share-pct {
  width: 32px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-label);
}

/* Looks like a quiet text link, but it's a button because it toggles something */
.link-quiet {
  align-self: flex-start;
  min-height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--color-muted);
  font-family: var(--font-sans);
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
  transition: color var(--fast) var(--ease);
}

.link-quiet:hover {
  color: var(--color-bone);
}

/* Transactions: heading and filter chips */
.view-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* the view gap is 40px; the design keeps the chips a bit closer */
  margin-top: -8px;
}

.chip {
  height: 36px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-sm);
  color: var(--color-bone);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: -0.24px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}

.chip:hover {
  border-color: var(--color-bone);
}

.chip[aria-pressed='true'] {
  background: var(--color-bone);
  border-color: var(--color-bone);
  color: var(--color-canvas);
}

/* Transactions table */
.day-row td {
  padding: 20px 0 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: -0.24px;
  text-transform: uppercase;
  color: var(--color-muted);
}

.tx-type {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: -0.24px;
  text-transform: uppercase;
}

.tx-what {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

/* Small round token logos inside "1.50 SOL → 342 JUP" */
.tx-logo {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: -3px;
  margin-right: 4px;
}

.tx-note {
  font-size: 12px;
  color: var(--color-muted);
}

.explorer {
  text-align: right;
}

.icon-link {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
}

.table-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.table-foot .small-note {
  max-width: 36em;
}

/* ---------- Insights ---------- */

/* What the numbers are based on: the transactions loaded so far */
.coverage {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--color-carbon);
  border-radius: var(--radius-card);
  font-size: 14px;
  color: var(--color-label);
  /* the view gap is 40px; this line belongs to the heading above */
  margin-top: -16px;
}

.coverage svg {
  flex: none;
  margin-top: 3px;
}

.coverage p {
  margin: 0;
}

/* "History incomplete" under a coin: orange, it's bad news for the numbers */
.token-name.is-warning {
  color: var(--color-orange);
}

/* How the numbers are counted, below the table */
.notes {
  margin: 0;
  padding: 0 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 72ch;
  font-size: 13px;
  color: var(--color-muted);
}

/* A coin in the Insights table opens its page */
.coin-link {
  text-decoration: none;
}

.coin-link:hover .coin-link-name {
  text-decoration: underline;
}

/* ---------- One coin's page (#coin/<mint>) ---------- */
.back-link {
  align-self: flex-start;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  color: var(--color-muted);
  text-decoration: none;
  /* sits close to the page title, not a full view gap away */
  margin-bottom: -24px;
}

.back-link:hover {
  color: var(--color-bone);
}

.coin-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.coin-id {
  gap: 20px;
}

.coin-id .token-id {
  gap: 8px;
}

.coin-mark {
  width: 64px;
  height: 64px;
  font-size: 14px;
}

.coin-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

/* Six tiles on a coin's page: two rows of three (what you have and paid,
   then today and the results), two across on a phone */
#coin-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 600px) {
  #coin-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Small grey line under a tile's number: "Worth $155.00 now" */
.stat-note {
  font-size: 13px;
  color: var(--color-muted);
}

/* The chart on a coin's page (js/app.js, renderPriceChart): an SVG for the
   grid and the average line, HTML dots on top for the tooltips. Positions
   are set inline in px. */
.chart-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.price-chart {
  position: relative;
  height: 260px; /* CHART_H */
  /* tooltips stay inside, so they never widen the page */
  overflow: hidden;
}

.pc-svg {
  position: absolute;
  inset: 0;
}

.pc-grid {
  stroke: var(--color-carbon);
  stroke-width: 1;
}

.pc-sep {
  stroke: var(--color-ash);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.pc-axis {
  fill: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

/* Your average cost: a reference line, so quiet next to the dots */
.pc-avg {
  fill: none;
  stroke: var(--color-muted);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  stroke-linejoin: round;
}

/* "Your average / $0.217" and "Now / $0.31" at the right end */
.pc-end {
  position: absolute;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-mono);
  white-space: nowrap;
  pointer-events: none;
}

.pc-end-what {
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-muted);
}

.pc-end-price {
  font-size: 13px;
  line-height: 1.2;
  color: var(--color-bone);
}

/* The legend above the chart */
.pc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 13px;
  color: var(--color-label);
}

.pc-key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pc-key-mark {
  position: static;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-label);
}

.pc-key-mark.pc-key-line {
  width: 18px;
  height: 0;
  border-radius: 0;
  background: none;
  border-top: 1.5px dashed var(--color-muted);
}

/* One dot per transaction (also used in the legend) */
.pl-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--color-label);
  /* a ring in the page color, so dots close together stay apart */
  box-shadow: 0 0 0 2px var(--color-canvas);
  cursor: default;
}

/* A bigger invisible hit area than the dot itself */
.pl-dot::before {
  content: '';
  position: absolute;
  inset: -10px;
}

.pl-dot:focus-visible {
  outline: 1px solid var(--color-bone);
  outline-offset: 3px;
}

/* Many transactions: smaller dots, so they don't cover each other */
.price-chart.is-dense .pl-dot {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
}

.pl-received { background: var(--color-canvas); border: 2px solid var(--color-label); }
.pl-sell.pl-text-up   { background: var(--color-green); }
.pl-sell.pl-text-down { background: var(--color-orange); }
.pl-sell.pl-text-muted { background: var(--color-muted); }
/* Sends and moves sit on the average line: a small ring, not a trade */
.pl-sent,
.pl-moveIn,
.pl-moveOut,
.pl-deposit,
.pl-withdraw {
  background: var(--color-canvas);
  border: 2px solid var(--color-muted);
}
.pl-dot.pl-sent,
.pl-dot.pl-moveIn,
.pl-dot.pl-moveOut,
.pl-dot.pl-deposit,
.pl-dot.pl-withdraw {
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
}
.pl-now { background: var(--color-bone); }
.pl-now.pl-text-up    { background: var(--color-green); }
.pl-now.pl-text-down  { background: var(--color-orange); }
.pl-now.pl-text-muted { background: var(--color-muted); }

/* Tooltip on hover or keyboard focus. Near an edge it opens inwards; near
   the top it opens below the dot. */
.pl-dot:hover::after,
.pl-dot:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: max-content;
  max-width: 260px;
  padding: 6px 10px;
  background: var(--color-carbon);
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-sm);
  color: var(--color-bone);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
}

.pl-tip-below:hover::after,
.pl-tip-below:focus-visible::after {
  bottom: auto;
  top: calc(100% + 10px);
}

.pl-tip-left:hover::after,
.pl-tip-left:focus-visible::after {
  left: -6px;
  transform: none;
}

.pl-tip-right:hover::after,
.pl-tip-right:focus-visible::after {
  left: auto;
  right: -6px;
  transform: none;
}

.coin-table { min-width: 840px; }
.coin-table td:first-child { white-space: nowrap; } /* "1 Oct" on one line */

/* Second line inside a number cell: the time, or "+50%" under a result */
.cell-note {
  display: block;
  font-size: 12px;
  color: var(--color-muted);
}

/* "No profit or loss" on receives and sends: words, not a number */
.cell-note-only {
  font-size: 12px;
  color: var(--color-muted);
}

/* Where the loaded history stops adding up */
.tx-note.is-warning {
  color: var(--color-orange);
}

/* The last row, "Still holding …", is today rather than a transaction */
.now-row td {
  border-bottom-color: var(--color-ash);
}

/* "How we count it": the one light card on the page */
.how-card {
  align-items: flex-start;
  padding: 32px;
}

.how-title {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.how-steps {
  flex: 2 1 420px;
  min-width: 0;
  margin: 0;
  padding: 0 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
}

.how-steps b {
  font-weight: 500;
}

/* "That's every transaction…" in place of the Show more button */
.tx-end {
  font-size: 14px;
  color: var(--color-label);
}

/* ---------- Loading steps ---------- */
/* What we're doing right now, below "Show 20 more" and in the first loading
   box (js/app.js, renderProgress). Mono, like the other instrument labels. */
.progress {
  flex-basis: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: -0.24px;
  text-transform: uppercase;
}

.state .progress {
  align-self: stretch;
  margin-top: 8px;
}

.progress-step {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 8px;
}

.progress-label {
  color: var(--color-graphite);
  transition: color var(--fast) var(--ease);
}

.progress-detail {
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.progress-step[data-state="active"] .progress-label { color: var(--color-bone); }
.progress-step[data-state="active"] .progress-detail { color: var(--color-label); }
.progress-step[data-state="done"] .progress-label { color: var(--color-label); }

/* The mark in front: ring = waiting, pulsing orange dot = working,
   green check = done, dash = not needed */
.progress-mark {
  position: relative;
  width: 12px;
  height: 12px;
  display: grid;
  place-items: center;
}

.progress-mark::before {
  content: '';
  box-sizing: border-box;
  width: 6px;
  height: 6px;
  border: 1px solid var(--color-graphite);
  border-radius: 50%;
}

.progress-step[data-state="active"] .progress-mark::before {
  background: var(--color-orange);
  border-color: var(--color-orange);
}

/* The "live" pulse: a ring that grows and fades from the dot */
.progress-step[data-state="active"] .progress-mark::after {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid var(--color-orange);
  border-radius: 50%;
  animation: progress-pulse 1.4s var(--ease) infinite;
}

.progress-step[data-state="done"] .progress-mark::before {
  width: 8px;
  height: 4px;
  border: solid var(--color-green);
  border-width: 0 0 1.5px 1.5px;
  border-radius: 0;
  transform: translateY(-1px) rotate(-45deg);
}

.progress-step[data-state="skipped"] .progress-mark::before {
  width: 6px;
  height: 0;
  border-width: 1px 0 0;
  border-radius: 0;
}

/* A 1px line under a working step: how far along, or a sliding segment
   when we can't say how far (Birdeye, about one lookup a second) */
.progress-bar {
  grid-column: 2 / -1;
  position: relative;
  height: 1px;
  overflow: hidden;
  background: var(--color-carbon);
}

.progress-bar > span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--color-orange);
  transition: width 0.2s var(--ease);
}

.progress-bar.is-busy > span {
  width: 30%;
  animation: progress-busy 1.2s var(--ease) infinite;
}

@keyframes progress-pulse {
  from { transform: scale(1); opacity: 0.8; }
  to   { transform: scale(2.6); opacity: 0; }
}

@keyframes progress-busy {
  from { transform: translateX(-100%); }
  to   { transform: translateX(340%); }
}

@media (prefers-reduced-motion: reduce) {
  .progress-step[data-state="active"] .progress-mark::after { animation: none; opacity: 0; }
  .progress-bar.is-busy > span { animation: none; width: 100%; opacity: 0.5; }
}

/* ---------- Phone width ---------- */
@media (max-width: 600px) {
  :root {
    --gutter: 16px;
    --section-gap: 72px;
  }

  /* Loading steps: the numbers go under the step name */
  .progress-step {
    grid-template-columns: 12px minmax(0, 1fr);
  }

  .progress-detail {
    grid-column: 2;
    text-align: left;
  }

  .landing {
    padding-top: 48px;
  }

  /* Keep the same tight ratio (-0.04em), just smaller */
  .display {
    font-size: 48px;
    letter-spacing: -1.92px;
  }

  .heading-lg {
    font-size: 34px;
    letter-spacing: -0.85px;
  }

  .heading {
    font-size: 28px;
    letter-spacing: -0.87px;
  }

  /* The nav wraps under the wordmark here, so give the header some air */
  .site-header {
    padding-block: 16px;
  }

  .site-nav {
    gap: 16px;
  }

  /* Full-width button under the input */
  .lookup-row .btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  .tile {
    padding: 16px;
  }

  .tile-value {
    font-size: 28px;
    letter-spacing: -0.87px;
  }

  .share-rows {
    padding-inline: 16px;
  }

  .share-row {
    grid-template-columns: 48px minmax(0, 1fr) 64px;
    gap: 12px;
  }

  .cta-card {
    padding: 24px;
  }

  /* Dashboard: sidebar becomes full width above the main column */
  .app {
    gap: 40px;
    padding-top: 24px;
  }

  .sidebar {
    max-width: none;
  }

  .stat {
    padding: 16px;
  }

  .stat-value {
    font-size: 28px;
    letter-spacing: -0.87px;
  }
}

/* ---------- Claude tab (logged out) ---------- */
/* Intro: copy on the left, an example conversation on the right; they stack
   when there's no room for both */
.claude-intro {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
}

.claude-copy {
  flex: 1 1 340px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.claude-title {
  font-size: 56px;
  line-height: 1.02;
  letter-spacing: -2.2px;
  text-wrap: balance;
}

.claude-lede {
  max-width: 46ch;
  font-size: 17px;
  color: var(--color-label);
}

.claude-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 4px;
}

/* A button for something that isn't there yet: same look, dimmed, no pointer */
.is-soon {
  opacity: 0.55;
  pointer-events: none;
}

.chat-example {
  flex: 1 1 360px;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.chat-bar {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-carbon);
}

.chat-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  font-size: 15px;
}

.chat-question {
  align-self: flex-end;
  max-width: 80%;
  padding: 10px 14px;
  background: var(--color-carbon);
  border-radius: var(--radius-card);
}

.chat-tool {
  color: var(--color-muted);
}

.chat-answer {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-answer .small-note {
  font-size: 13px;
}

/* How it works: three numbered steps between two hairlines */
.claude-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border-block: 1px solid var(--color-carbon);
}

.claude-steps li {
  padding: 20px 20px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}

.claude-steps .mono {
  font-size: 12px;
}

.claude-step-title {
  font-size: 18px;
  letter-spacing: -0.3px;
}

/* Plans: one card each; the picked one has a lighter border and a fill */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 16px;
}

.plan {
  padding: 24px;
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.plan-picked {
  border-color: var(--color-label);
  background: var(--color-carbon);
}

.plan-name {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.plan-tag {
  padding: 3px 8px;
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-sm);
  font-size: 11px;
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -1.6px;
  font-variant-numeric: tabular-nums;
}

.plan-per {
  font-size: 14px;
  letter-spacing: 0;
  color: var(--color-muted);
}

.plan-for {
  min-height: 42px;
  font-size: 14px;
  color: var(--color-label);
}

.plan-rows {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.plan-rows div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-block: 10px;
  border-top: 1px solid var(--color-carbon);
  font-size: 14px;
}

.plan-picked .plan-rows div {
  border-top-color: var(--color-ash);
}

.plan-rows dt {
  color: var(--color-muted);
}

.plan-rows dd {
  margin: 0;
  font-family: var(--font-mono);
  text-align: right;
}

.plan-rows {
  margin-bottom: 6px;
}

/* Buttons line up at the bottom, even when one card's text is longer */
.plan .btn {
  margin-top: auto;
}

/* Two closing notes: one light card (the one bright object), one dark */
.claude-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 16px;
}

.claude-note {
  padding: 24px;
  border: 1px solid var(--color-carbon);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}

.claude-note-light {
  background: var(--color-bone);
  border-color: var(--color-bone);
  color: var(--color-ash);
}

.claude-note-light .label {
  color: var(--color-ash);
}

.claude-note-title {
  font-size: 20px;
  letter-spacing: -0.4px;
}

.claude-note-light .claude-note-title {
  color: var(--color-canvas);
}

@media (max-width: 600px) {
  /* Four tabs fit at 375px with a smaller gap */
  .tabs {
    gap: 20px;
  }

  .claude-title {
    font-size: 40px;
    letter-spacing: -1.4px;
  }

  .plan-price {
    font-size: 36px;
  }
}

/* Info tooltip next to a plan row: shows on hover and keyboard focus, and
   toggles on tap (js/app.js), since phones have no hover */
.has-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tip-btn {
  width: 16px;
  height: 16px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-ash);
  border-radius: 50%;
  color: var(--color-label);
  font: 400 10px/1 var(--font-mono);
  cursor: pointer;
}

.tip-btn:hover,
.tip-btn[aria-expanded='true'] {
  border-color: var(--color-bone);
  color: var(--color-bone);
}

.tip {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 10;
  width: min(280px, 75vw);
  padding: 12px 14px;
  background: var(--color-carbon);
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-sm);
  color: var(--color-bone);
  font-size: 13px;
  line-height: 1.45;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--fast) var(--ease), visibility var(--fast) var(--ease);
}

.has-tip:hover .tip,
.tip-btn:focus-visible + .tip,
.tip-btn[aria-expanded='true'] + .tip {
  opacity: 1;
  visibility: visible;
}

/* ---------- Claude tab, logged in (preview) and the login page ---------- */
/* Preview switcher: a dashed line marks it as not part of the real page */
.preview-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--color-ash);
}

.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  padding: 3px;
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-sm);
}

.segmented button,
.segmented a {
  min-height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 2px;
  color: var(--color-label);
  font: 400 12px var(--font-mono);
  text-transform: uppercase;
  cursor: pointer;
}

.segmented [aria-pressed='true'],
.segmented [aria-current='page'] {
  background: var(--color-bone);
  color: var(--color-canvas);
}

.account-plan {
  padding: 2px 6px;
  background: var(--color-carbon);
  border-radius: 2px;
  font: 400 11px var(--font-mono);
  text-transform: uppercase;
  color: var(--color-label);
}

.claude-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.claude-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--color-label);
}

/* Orange border only: orange is a status color here, never a fill */
.limit-banner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--color-orange);
  border-radius: var(--radius-card);
}

.limit-copy {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.limit-copy .text-label {
  font-size: 14px;
}

.connect-card {
  padding: 28px;
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.connect-link {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.connect-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.connect-url {
  flex: 1 1 320px;
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: var(--color-carbon);
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-sm);
  font: 400 14px var(--font-mono);
  overflow-wrap: anywhere;
}

/* Inside the card the steps don't need the hairlines of the logged-out tab */
.connect-steps {
  border-block: 0;
}

.connect-steps li {
  border-top: 1px solid var(--color-carbon);
}

.prompt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.prompt-chip {
  min-height: 40px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-sm);
  color: var(--color-bone);
  font: 400 14px var(--font-sans);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--fast) var(--ease);
}

.prompt-chip:hover {
  border-color: var(--color-bone);
}

/* Usage meters; past 90% the number and bar turn orange (a status) */
.meters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 16px;
}

.meter-card {
  padding: 24px;
  border: 1px solid var(--color-carbon);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.meter-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.meter-used {
  font-size: 40px;
  line-height: 1;
  letter-spacing: -1.4px;
  font-variant-numeric: tabular-nums;
}

.meter {
  height: 6px;
  background: var(--color-carbon);
  border-radius: 3px;
  overflow: hidden;
}

.meter span {
  display: block;
  height: 100%;
  background: var(--color-bone);
}

.is-hot .meter-used { color: var(--color-orange); }
.is-hot .meter span { background: var(--color-orange); }

.btn-sm {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
}

.btn-ghost.btn-sm {
  color: var(--color-label);
}

.stored-name {
  display: block;
}

.stored-table .mono {
  white-space: nowrap;
}

.activity {
  display: flex;
  flex-direction: column;
}

.activity-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid var(--color-carbon);
  font-size: 14px;
}

.activity-cost {
  font-size: 13px;
  text-align: right;
}

.account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 16px;
}

.account-plan-card .plan-price {
  font-size: 32px;
  letter-spacing: -1px;
}

.account-plan-card .plan-per {
  margin-left: 4px;
}

.account-rows {
  margin: 0;
  padding: 0 24px;
  border: 1px solid var(--color-carbon);
  border-radius: var(--radius-card);
}

.account-rows div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  border-bottom: 1px solid var(--color-carbon);
  font-size: 14px;
}

.account-rows div:last-child {
  border-bottom: 0;
}

.account-rows dt {
  color: var(--color-muted);
}

.account-rows dd {
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

/* Login page: one narrow column */
.login-back {
  align-self: center;
  margin-bottom: 0;
}

.login-preview {
  margin-top: 16px;
}

.login {
  display: flex;
  justify-content: center;
  padding-block: 80px 96px;
}

.login-step {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.login-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.login-title {
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -1.4px;
  text-wrap: balance;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.login-field .input {
  flex: none;
  font-size: 16px;
}

.login-submit {
  justify-content: center;
}

.code-input {
  height: 60px;
  font: 400 28px var(--font-mono);
  letter-spacing: 0.5em;
  text-align: center;
}

.login-links {
  display: flex;
  justify-content: space-between;
}

.allow-marks {
  display: flex;
  align-items: center;
  gap: 14px;
}

.allow-mark {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-card);
  background: var(--color-carbon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.allow-mark-claude {
  background: transparent;
  border: 1px solid var(--color-ash);
  font-size: 12px;
  color: var(--color-label);
}

.allow-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-carbon);
}

.allow-list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  padding-block: 12px;
  border-bottom: 1px solid var(--color-carbon);
  font-size: 15px;
}

.allow-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.allow-buttons .btn {
  justify-content: center;
}

@media (max-width: 600px) {
  .login {
    padding-block: 48px 72px;
  }

  .login-title {
    font-size: 32px;
    letter-spacing: -1px;
  }

  .connect-card {
    padding: 20px;
  }

  /* When, tool and wallet on one line; the cost under them */
  .activity-row {
    grid-template-columns: 80px minmax(0, 1fr);
    padding-block: 10px;
  }

  .activity-cost {
    grid-column: 2;
    text-align: left;
  }

  .account-rows {
    padding: 0 16px;
  }
}

/* Forget asks first: Cancel and Forget side by side, the reason under the row */
.forget-confirm {
  display: inline-flex;
  gap: 6px;
}

.forget-note td {
  padding-top: 0;
}



/* Wallets on Peeky (Claude tab): a small second line under a number */
.stored-sub {
  display: block;
}

.stored-refresh {
  display: block;
  margin-top: 4px;
}



/* Delete account: the "are you sure" panel (orange border: a warning) */
.delete-panel {
  margin-top: 16px;
  padding: 24px;
  border: 1px solid var(--color-orange);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Switching plans: what it costs, to confirm (Claude tab, plan card) */
.switch-panel {
  margin-top: 4px;
  padding: 16px;
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.delete-list {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.delete-yes {
  border-color: var(--color-orange);
  color: var(--color-orange);
}

/* Text pages (privacy.html): one readable column */
.prose {
  max-width: 720px;
  margin: 0 auto;
  padding-block: 64px 96px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.prose h2 {
  margin-top: 24px;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.6px;
}

.prose p,
.prose li {
  color: var(--color-label);
}

.prose ul {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.prose b {
  font-weight: 500;
  color: var(--color-bone);
}

.prose a {
  text-decoration: underline;
}

.refresh-holdings {
  align-self: flex-start;
}

.refresh-holdings:disabled {
  color: var(--color-muted);
  cursor: default;
}

/* ---------- Transactions: the history box (logged in, design A3) ---------- */
.history-box {
  border: 1px solid var(--color-carbon);
  border-radius: var(--radius-card);
}

.history-box.is-limit {
  border-color: var(--color-ash);
}

.hhead {
  min-height: 44px;
  padding: 6px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
}

.hhead-left {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

/* grey: more to load · white: loading · green: full history · orange: plan limit */
.hdot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--color-muted);
}

.hdot.is-busy { background: var(--color-bone); }
.hdot.is-full { background: var(--color-green); }
.hdot.is-limit { background: var(--color-orange); }

/* While loading: a small bar next to "Loading… 120 of 250" */
.hload {
  width: 64px;
  height: 4px;
  flex: none;
  border-radius: 2px;
  background: var(--color-ash);
  overflow: hidden;
}

.hload span {
  display: block;
  height: 100%;
  background: var(--color-orange);
  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hbtn {
  height: 32px;
  min-width: 52px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-sm);
  color: var(--color-bone);
  font: 400 12px var(--font-mono);
  text-transform: uppercase;
  cursor: pointer;
}

.hbtn:hover:not(:disabled) {
  border-color: var(--color-bone);
}

.hbtn:disabled {
  border-color: var(--color-carbon);
  color: var(--color-ash);
  cursor: default;
}

.htoggle {
  height: 32px;
  padding: 0 4px;
  background: transparent;
  border: 0;
  color: var(--color-label);
  font: 400 12px var(--font-mono);
  text-transform: uppercase;
  cursor: pointer;
}

/* Details: a bar per wallet */
.hsingle {
  padding: 0 16px 16px;
}

.hrow {
  display: grid;
  grid-template-columns: minmax(120px, 0.6fr) minmax(0, 3fr);
  align-items: center;
  gap: 8px 20px;
  min-height: 56px;
  padding: 14px 16px;
  border-top: 1px solid var(--color-carbon);
  font-size: 14px;
}

.hrow-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.hbar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.hbar-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--color-label);
}

.hbar-track {
  display: block;
  height: 8px;
  background: var(--color-carbon);
  border-radius: 4px;
  overflow: hidden;
}

.hbar-track span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--color-muted);
}

.hbar-under {
  font-size: 12px;
  color: var(--color-muted);
}

.hbar-loading .hbar-track span { background: var(--color-bone); }
.hbar-full .hbar-track span { background: var(--color-green); }
.hbar-full .hbar-right { color: var(--color-green); }
.hbar-limit .hbar-track span { background: var(--color-orange); }
.hbar-limit .hbar-right { color: var(--color-orange); }

@media (max-width: 600px) {
  .hrow {
    grid-template-columns: 1fr;
  }
}