/* ==========================================================================
   Cards & surfaces
   ========================================================================== */

/* The card carries THREE layers, not one: the drop shadow beneath it, a lit
   hairline along its top edge and a carved one along its bottom. In the dark
   theme the drop shadow has almost nothing to darken (the page is #000), so
   the inset pair is what actually separates the surface from the page - and
   the pair is what stops a flat fill reading as a rectangle of slightly
   different grey. Both inset tokens are transparent in the light theme,
   where the layered drop shadow does the job instead. */
.card {
  /* background-color + background-image kept SEPARATE on purpose: variants
     like .card--glass set the `background` shorthand, which must be able to
     wipe the gradient. Writing it as a shorthand here would make that
     override silently half-apply. */
  background-color: var(--color-surface);
  background-image: var(--surface-gradient);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--surface-highlight),
    inset 0 -1px 0 var(--surface-lowlight);
  padding: var(--card-pad);
  transition: box-shadow var(--dur-base) var(--ease-standard),
    transform var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard);
}

.card--interactive:hover {
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--surface-highlight),
    inset 0 -1px 0 var(--surface-lowlight);
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
}

.card--flat {
  box-shadow: inset 0 1px 0 var(--surface-highlight);
}

/* Narrow viewports drive the density token rather than .card's padding
   directly, so the Compact preference and the mobile breakpoint can't fight
   each other. */
@media (max-width: 560px) {
  :root {
    --card-pad: var(--space-5);
  }

  :root[data-density="compact"] {
    --card-pad: var(--space-4);
  }
}

.card--glass {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.card__label {
  font-size: var(--fs-footnote);
  color: var(--color-text-secondary);
  font-weight: var(--fw-medium);
}

/* ---- KPI figure (the trade form's preview) ---- */

.kpi__value {
  font-family: var(--font-family-display);
  font-size: var(--fs-title1);
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.kpi__delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  width: fit-content;
}

.kpi__delta--up {
  color: var(--color-profit);
  background: var(--color-profit-soft);
}

.kpi__delta--down {
  color: var(--color-loss);
  background: var(--color-loss-soft);
}

/* ---- Icon tile (Analytics' Edge and Insights blocks) ---- */

/* The tone classes below set `background` as a shorthand, which would wipe
   any background-image declared here - so the sheen and the ring are cast as
   inset shadows instead. Same lit-top/carved-bottom logic as .card, one
   level down in scale. */
.kpi-card__icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kpi-card__icon--profit { color: var(--color-profit); background: var(--color-profit-soft); }
.kpi-card__icon--loss { color: var(--color-loss); background: var(--color-loss-soft); }
.kpi-card__icon--accent {
  color: var(--color-accent);
  background: linear-gradient(140deg, var(--color-accent-soft), rgba(var(--color-accent-2-rgb), 0.14));
}
.kpi-card__icon--neutral { color: var(--color-text-secondary); background: var(--color-surface-hover); }

/* ---- Pill toggle ----
   The single segmented-control family: unit ($/R), time range, chart mode
   and breakdown dimension all render through TJ.Components.UI.pillToggle()
   and therefore share shape, height, radius, spacing and active state.
   Deliberately quieter than the older .segmented (which stays for the
   Journal tab bar and the in-form Buy/Sell style switches) - these steer
   content, they are not navigation. */

/* The track reads as a recess the thumb sits IN: a dark inset along its top
   edge is what a groove does under a light source that comes from above -
   the exact inverse of the lit top edge on .card, which sits proud of the
   page. Same trick, opposite sign. */
.pill-toggle {
  display: inline-flex;
  flex-shrink: 0;
  max-width: 100%;
  padding: 2px;
  gap: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-strong);
  box-shadow: inset 0 1px 2px var(--surface-lowlight);
}

.pill-toggle__opt {
  flex-shrink: 0;
  min-width: 28px;
  height: 24px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: none;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  color: var(--color-text-tertiary);
  transition: color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard);
}

.pill-toggle__opt:hover {
  color: var(--color-text-secondary);
}

.pill-toggle__opt.is-active {
  background: var(--color-surface-hover);
  color: var(--color-accent);
}

/* Touch sizing without growing the visual chrome. */
@media (max-width: 880px), (pointer: coarse) {
  .pill-toggle__opt {
    min-width: 34px;
    height: 30px;
  }
}

/* A control with many options (the 5-step time range) may need to scroll
   on the narrowest phones rather than force its row wider. */
.pill-toggle--scroll {
  overflow-x: auto;
  scrollbar-width: none;
}

.pill-toggle--scroll::-webkit-scrollbar {
  display: none;
}

/* ---- Collapsible variant ----
   Rests as a single pill showing only the current selection, and fans out
   to the full option row on hover, keyboard focus, or tap. Same visual
   family as every other pill toggle - only the resting footprint changes.

   The inactive options are collapsed with max-width/padding/opacity rather
   than `display: none` so the expansion can animate and so they stay in the
   accessibility tree. `.is-open` is set by JS for touch, where there is no
   hover to rely on. */
.pill-toggle--collapsible .pill-toggle__opt:not(.is-active) {
  max-width: 0;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: max-width var(--dur-base) var(--ease-standard),
    padding var(--dur-base) var(--ease-standard),
    opacity var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}

.pill-toggle--collapsible:hover .pill-toggle__opt:not(.is-active),
.pill-toggle--collapsible:focus-within .pill-toggle__opt:not(.is-active),
.pill-toggle--collapsible.is-open .pill-toggle__opt:not(.is-active) {
  max-width: 8rem;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
  opacity: 1;
  pointer-events: auto;
}

/* No affordance glyph: the pill's own shape and the accent-coloured active
   option are enough, and a chevron read as a separate control sitting next
   to the value. */