/* ---------- Share card (js/share-card.js) ---------- */

.share-card-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  overflow-y: auto;
  z-index: 1000;
}

.share-card-picker {
  width: 100%;
  max-width: 340px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-6) var(--space-5);
  text-align: center;
}

.share-card-picker h2 {
  font-size: 1.1rem;
  margin-bottom: var(--space-2);
}

.share-card-picker p {
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: var(--space-5);
}

.share-card-picker__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.share-card-picker .btn {
  width: 100%;
}

.share-card-picker__cancel {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}

/* Preview: the exportable .share-card plus the action row around it. */

.share-card-preview {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.share-card-preview__actions {
  display: flex;
  gap: var(--space-3);
  width: 100%;
  max-width: 600px;
}

.share-card-preview__actions .btn {
  flex: 1;
}

.share-card-preview #share-card-status {
  min-height: 1.2em;
}

/* The exportable node itself — this is exactly what html2canvas captures,
   so every visual rule here matters for the exported PNG, not just the
   on-screen preview. Fixed-ish width (with a viewport fallback so it still
   fits a phone preview) keeps the chart and stat grid from having to be
   responsive in two different ways. */
.share-card {
  width: min(600px, 92vw);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-6);
  box-sizing: border-box;
}

.share-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

/* assets/logo.png has large built-in transparent padding, so this crops it
   down to the mark at a legible size without touching the source file.
   A CSS background-image, not an <img>+object-fit — html2canvas 1.4.1 does
   not honor object-fit/object-position on <img> elements at all (verified:
   switching object-fit between cover and contain produced byte-identical
   exports), so it was stretching the raw 512x768 source into this box's
   120x40 shape and squashing the mark. background-size/-position are
   properly respected. */
.share-card__logo-wrap {
  display: block;
  width: 120px;
  height: 40px;
  overflow: hidden;
  flex-shrink: 0;
  background-image: url("../assets/logo.png");
  background-size: cover;
  background-position: 50% 48%;
  background-repeat: no-repeat;
}

.share-card__period {
  font-weight: 600;
}

.share-card__daterange {
  color: var(--muted);
  font-size: 0.85rem;
}

.share-card__headline {
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.1;
}

.share-card__return {
  margin-top: var(--space-2);
  margin-bottom: var(--space-5);
}

.share-card__chart-wrap {
  margin: var(--space-5) 0;
}

/* Today's trade list, replacing the chart. Flat grid cells (not a div per
   row) so every column shares one width across all rows — time/symbol/
   direction stay left-aligned, the flexible direction column absorbs the
   slack so the R-multiple and net P&L columns hug the right edge, right-
   aligned and monospace. No fixed height anywhere here, so a one-trade day
   doesn't leave a gap where the chart used to be — the card just shrinks
   to its content. */
.share-card__trades-section {
  position: relative;
  margin: var(--space-5) 0;
}

/* Absolutely positioned, so it's removed from flow entirely — it can never
   change the section's height or push the stats row down, regardless of
   how tall the SVG's own viewBox math thinks it should be. z-index keeps
   it under the actual row text; top/left/right/bottom (not the `inset`
   shorthand) for older-renderer compatibility, since html2canvas has
   already shown gaps in modern CSS support on this card (see
   .share-card__logo-wrap above). */
.share-card__trades-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  opacity: 0.14;
  pointer-events: none;
}

.share-card__trades-bg svg {
  display: block;
  width: 100%;
  height: 100%;
}

.share-card__trades {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  column-gap: var(--space-3);
  row-gap: var(--space-2);
  font-size: 0.85rem;
}

.share-card__trade-cell {
  white-space: nowrap;
}

.share-card__trade-cell--num {
  font-family: var(--font-mono);
  text-align: right;
}

.share-card__trade-pnl--zero {
  color: var(--muted);
}

.share-card__trade-more {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.8rem;
  margin-top: var(--space-1);
}

.share-card__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  border-top: 1px solid var(--border);
  padding-top: var(--space-4);
}

.share-card__stat {
  text-align: center;
}

.share-card__stat-value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1rem;
}

.share-card__stat-label {
  color: var(--muted);
  font-size: 0.7rem;
  margin-top: 2px;
}

@media (max-width: 480px) {
  .share-card {
    padding: var(--space-5);
  }

  .share-card__headline {
    font-size: 1.9rem;
  }

  .share-card__stats {
    gap: var(--space-2);
  }

  .share-card__stat-value {
    font-size: 0.85rem;
  }

  /* Three buttons (Choose another period / Download image / Share) no
     longer fit in one row at phone width — stack them instead of squeezing. */
  .share-card-preview__actions {
    flex-wrap: wrap;
  }

  .share-card-preview__actions .btn {
    flex: 1 1 100%;
  }
}