/* ================================================================= profile */
/* The profile is a portfolio and nothing else: a bar with back on the left and
   settings on the right, one value card, quick actions, and the collection
   grid. No title, no avatar, no hero gradient — each of those was a place a
   number or a name got printed a second time. */

.prof {
  --prof-r: var(--radius);
  --prof-sh: var(--shadow-sm);
  padding-bottom: 28px;
}

/* ---- bar: back on the left, settings on the right, nothing between -------- */

.prof-bar {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 10px;
  padding: 2px 4px 10px;
}
.prof-bar-label {
  min-width: 0;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--label);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prof-bar-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  /* Black, like an iOS nav bar — these are chrome, not calls to action, and
     the accent purple made them read as the primary button of the page. */
  color: #000;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.prof-bar-btn:active { background: var(--fill); opacity: 0.4; }
.prof-bar-btn svg { width: 23px; height: 23px; }

/* ---- body ----------------------------------------------------------------- */

.prof-body {
  padding: 0 16px;
}

.prof-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--prof-sh);
  overflow: hidden;
}

/* ---- section headers and menu lists -------------------------------------- */

.prof-section {
  margin: 4px 0 -4px;
  padding: 0 4px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--label-2);
}

.prof-row {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  text-align: left;
  padding: 13px 14px;
  background: none;
  border: 0;
  cursor: default;
  color: inherit;
  font: inherit;
}
button.prof-row { cursor: pointer; }
button.prof-row:active { background: var(--fill); }
.prof-row + .prof-row { border-top: 0.5px solid var(--separator); }
.prof-row-ico {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  flex: none;
  display: grid;
  place-items: center;
  color: #fff;
}
.prof-row-ico svg { width: 17px; height: 17px; }
.prof-row-texts { flex: 1; min-width: 0; }
.prof-row-ttl { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.prof-row-sub {
  margin-top: 1px;
  font-size: 12.5px;
  color: var(--label-2);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The right-hand cell of a row. A plain span is read-only; as a button it is
   an action, which is why the copy affordance is a small tinted pill rather
   than the whole row — clicking the row would read as "navigate". */
.prof-row-val {
  font-size: 14px;
  color: var(--label-2);
  text-align: right;
  flex: none;
  max-width: 46%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
button.prof-row-val {
  padding: 5px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--fill);
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  max-width: none;
}
button.prof-row-val.copied { background: rgba(52, 199, 89, 0.14); color: #1e7a34; }

/* The tick and the `.prof-row.active` tint below belonged to the role switcher:
   one row per backend keypair, each with an avatar and a tick on the selected
   one. The switcher went — there was never more than one correct key for an
   action, so the choice was a way to get it wrong — and the rules went with it
   rather than staying to look authoritative. A brace-balance check now guards
   this file; a rule that no longer matches anything is a different failure and
   is caught by scripts/check-profile-css.mjs. */

/* `.nameinput` used to live here, for the field that let somebody type a name
   for a wallet. There is no such field: a name now comes from Pi's servers or
   it is not shown, and a text input is the one control that can only ever
   produce the other kind. The styles went with it rather than being left to
   look authoritative to the next person reading this file. */

/* ---- portfolio grid ------------------------------------------------------ */

.prof-empty {
  padding: 34px 20px;
  text-align: center;
  font-size: 14px;
  color: var(--label-2);
}

/* The ranked Collections table on Home, following the ranked-reference panel: a
   title bar carrying a (deliberately inert) 1d/7d/30d window control, then a
   four-column table — rank, Collection, Floor as a pill, and the sales total
   under the reference's "Lucky Buys" label. Same iOS hairline card as `.group`.
   The table scrolls sideways on narrow screens rather than squashing its
   figures, and the Collection column stays pinned on the left while it does. */
.collcard {
  margin: 2px 0 0;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.collbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 8px;
}
.colltitle {
  margin: 0;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -0.02em;
}
.collcontrols {
  display: flex;
  align-items: center;
  gap: 12px;
}
.colltable {
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 100%;
}
.colltable::-webkit-scrollbar { display: none; }
.collhead,
.collrow {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 640px;
  padding: 0 16px;
}
.collhead {
  padding-top: 10px;
  padding-bottom: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--label-2);
}
.collrow {
  width: 100%;
  text-align: left;
  padding: 10px 16px;
  border: 0;
  border-top: 0.5px solid var(--separator);
  background: none;
  cursor: pointer;
  transition: background 0.12s;
}
.collrow:hover,
.collrow:active { background: var(--fill); }
.collhead .cc-rank,
.collrow .cc-rank {
  width: 28px;
  flex: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--label-2);
  font-variant-numeric: tabular-nums;
}
.collhead .cc-name {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.collhead .cc-num,
.collrow .cc-num {
  width: 90px;
  flex: none;
  text-align: right;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* The floor is wider than the generic figure column, on the head and the rows
   alike, so numbers line up over their headers; the top-offer, listed, supply
   and owners columns each get a width that fits their figures. */
.collhead .cc-num.cc-floor,
.collrow .cc-num.cc-floor { width: 116px; }
.collhead .cc-num.cc-top,
.collrow .cc-num.cc-top { width: 96px; }
.collhead .cc-num.cc-listed,
.collrow .cc-num.cc-listed { width: 64px; }
.collhead .cc-num.cc-supply,
.collrow .cc-num.cc-supply { width: 64px; }
.collhead .cc-num.cc-owners,
.collrow .cc-num.cc-owners { width: 72px; }
/* Sort headers are real buttons, so they shed the browser's button chrome and
   keep the column's own figure styling. */
.collhead .cc-num.cc-sort {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
}
.collhead .cc-num.cc-sort:hover { color: var(--label); }
.collhead .cc-num.cc-sort:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
.collhead .cc-sort .cc-arrow {
  font-size: 8.5px;
  line-height: 1;
  color: var(--accent);
}
.collrow .cc-name {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--card);
}
.collrow:hover .cc-name,
.collrow:active .cc-name { background: var(--fill); }
.collrow .cc-thumb {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  flex: none;
}
.collrow .cc-body { min-width: 0; }
.collrow .cc-title {
  display: block;
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.collrow .cc-sub {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  color: var(--label-2);
}
/* The floor is a quiet pill, the way the reference draws it as a button; this
   one is a span because the whole row is the tappable surface. */
.collrow .cc-floorpill {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--fill);
  font-size: 12.5px;
  font-weight: 650;
  white-space: nowrap;
}
.collrow .cc-floorpill b { font-weight: 700; color: var(--label); }
.collrow .cc-floorpill i { font-style: normal; color: var(--label-2); font-size: 11.5px; }

/* A name on a detail row, and how it got there.
   The row itself is unstyled on purpose — it only exists to carry the title, so
   hovering or long-pressing a handle can say whether Pi and the ledger both
   confirmed it or whether somebody just typed it. The one visible mark is the dot
   on a typed name, and it is a dot rather than a badge because this sits inline
   after a handle: anything with a background or colour would read as an alert on
   every seller line and stop meaning anything by the third card. */
.named { cursor: help; }
.named.decl .decl {
  color: var(--label-2);
  margin-left: 3px;
  font-weight: 700;
}