/* bulldial.com — portfolio.
 *
 * Layered on bd.css and markets.css. The modals keep their original
 * class names because portfolio.js toggles them by id and by
 * style.display; only the look moved onto the system, and on a phone
 * they present as bottom sheets like every other dialog on the site.
 */

/* ────────────────────────────────────────────────────────────── gate ── */

.pf-gate {
  max-width: 420px; margin: var(--sp-8) auto; text-align: center;
}
.pf-gate svg { width: 46px; height: 46px; margin: 0 auto var(--sp-4); color: var(--ink-3); }
.pf-gate h1 { font-size: var(--t-h1); font-weight: 700; letter-spacing: -0.03em; }
.pf-gate .lede { margin: var(--sp-3) auto var(--sp-5); }

/* ──────────────────────────────────────────────────────────── header ── */

.pf-header {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.pf-tabs { flex: 1; min-width: 0; }
.pf-header .btn { flex: none; }

.pf-summary {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4);
}
.pf-summary-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pf-name {
  font-size: var(--t-label); font-weight: 600; letter-spacing: var(--track);
  text-transform: uppercase; color: var(--ink-3);
}
.pf-total {
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.6rem); font-weight: 700;
  letter-spacing: -0.04em; line-height: 1;
}
.pf-summary-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
@media (max-width: 620px) {
  .pf-summary-actions { width: 100%; }
  .pf-summary-actions .btn { flex: 1; }
  .pf-summary-actions .btn.danger { flex: none; }
}

/* ────────────────────────────────────────────────────────── holdings ── */

.holdings { font-size: var(--t-sm); }
.holdings tbody td { padding: 12px; }

.h-coin { display: flex; align-items: center; gap: 10px; min-width: 0; }
.h-coin .cn { font-weight: 620; }
.h-coin .ct { color: var(--ink-3); font-size: var(--t-xs); margin-left: 5px; text-transform: uppercase; }
.h-wallet-meta {
  display: block; font-size: var(--t-label); color: var(--ink-3);
  margin-top: 2px; font-variant-numeric: normal;
}
.h-wallet-meta.err { color: var(--down); }

/* Where a balance came from, stated on the row. A synced balance and a
   typed one are not the same claim, and the table should not let them
   look alike. */
.badge-source {
  display: inline-block;
  font-size: var(--t-label); font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-1);
  background: var(--surface-3); color: var(--ink-3);
}
.badge-source.wallet { background: var(--accent-sunk); color: var(--accent); }
.badge-source.exchange { background: var(--warn-sunk); color: var(--warn); }

.h-actions { display: flex; gap: 6px; justify-content: flex-end; }
.h-actions button {
  font-size: var(--t-label); font-weight: 650; letter-spacing: .03em;
  padding: 5px 9px; border-radius: var(--r-1);
  border: 1px solid var(--line-2); color: var(--ink-2); background: var(--surface);
  transition: background var(--d-1) var(--smooth), color var(--d-1) var(--smooth),
              border-color var(--d-1) var(--smooth), transform var(--d-1) var(--spring);
}
.h-actions button:hover { background: var(--surface-2); color: var(--ink); }
.h-actions button:active { transform: scale(.94); }
.h-actions .h-remove:hover { color: var(--down); border-color: var(--down); background: var(--down-sunk); }
.h-actions button[disabled] { opacity: .45; pointer-events: none; }

/* Portfolio switcher: chips, the same control the prices page filters
   with, so switching portfolio and filtering coins feel like one idea. */
.pf-tab {
  padding: 7px 13px; border-radius: var(--r-full);
  background: var(--surface-2); border: 1px solid transparent;
  font-size: var(--t-xs); font-weight: 620; color: var(--ink-2);
  white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: background var(--d-1) var(--smooth), color var(--d-1) var(--smooth),
              transform var(--d-1) var(--spring);
}
.pf-tab:hover { color: var(--ink); }
.pf-tab:active { transform: scale(.95); }
.pf-tab.on { background: var(--ink); color: var(--bg); }

/* 1 asset · 2 source · 3 price · 4 quantity · 5 value · 6 cost · 7 actions */
@media (max-width: 780px) {
  .holdings th:nth-child(6), .holdings td:nth-child(6) { display: none; }
}
@media (max-width: 640px) {
  .holdings th:nth-child(2), .holdings td:nth-child(2),
  .holdings th:nth-child(3), .holdings td:nth-child(3) { display: none; }
  .holdings tbody td { padding: 12px 8px; }
}

/* ──────────────────────────────────────────────────────────── modals ── */

.modal-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
  animation: bd-fade var(--d-2) var(--smooth);
}
.modal {
  width: 100%; max-width: 440px; max-height: min(86svh, 760px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-4); box-shadow: var(--e-3);
  padding: var(--sp-5);
  animation: bd-pop var(--d-3) var(--spring);
}
.modal h2 { font-size: var(--t-h2); font-weight: 650; letter-spacing: -0.02em; margin-bottom: var(--sp-4); }
.modal label {
  display: block; margin: var(--sp-4) 0 6px;
  font-size: var(--t-label); font-weight: 600; letter-spacing: var(--track);
  text-transform: uppercase; color: var(--ink-3);
}
.modal .field { margin-bottom: 0; }
.modal-note { font-size: var(--t-xs); color: var(--ink-2); line-height: 1.6; margin-top: calc(var(--sp-3) * -1); }
.modal-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; margin-top: var(--sp-5); }
.modal-msg { margin-top: var(--sp-3); font-size: var(--t-xs); color: var(--ink-2); min-height: 1.2em; }
.modal-msg.err { color: var(--down); }
.modal-msg.ok { color: var(--up); }

@media (max-width: 620px) {
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal {
    max-width: none; max-height: 90svh;
    border-radius: var(--r-4) var(--r-4) 0 0; border-bottom: 0;
    padding: var(--sp-3) var(--sp-4) calc(var(--sp-5) + var(--safe-b));
    animation: bd-sheet-up var(--d-3) var(--ease);
  }
  .modal .sheet-grip { display: block; margin: 0 auto var(--sp-4); }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .btn { width: 100%; padding: 13px; }
}

/* -- coin picker inside the add-holding modal -------------------------- */

.coin-results { max-height: 190px; overflow-y: auto; margin-top: var(--sp-2); }
.coin-results div {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: var(--r-2); cursor: pointer;
  font-size: var(--t-sm);
  transition: background var(--d-1) var(--smooth);
}
.coin-results div:hover { background: var(--surface-2); }
.coin-results .crn { font-weight: 620; }
.coin-results .crt { color: var(--ink-3); font-size: var(--t-xs); text-transform: uppercase; }

.holding-selected {
  display: flex; align-items: center; gap: 10px;
  margin-top: var(--sp-3); padding: 10px 12px;
  background: var(--accent-sunk); border: 1px solid transparent;
  border-radius: var(--r-2); font-size: var(--t-sm); font-weight: 600;
}