/* ==========================================================================
   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: border-color var(--dur-fast) var(--ease-standard);
}

.card--interactive:hover {
  border-color: var(--color-border-strong);
}

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

/* Narrow viewports drive the density token rather than .card's padding
   directly. */
@media (max-width: 560px) {
  :root {
    /* A window's padding and corners on a phone (css/components/desk.css .win;
       the operator 21.10: smaller windows, more on a screen). */
    --card-pad: 14px 16px;
    --radius-xl: 18px;
  }
}

.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-value);
  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: var(--color-accent-soft);
}
.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(--seg-track);
  border: 0;
  box-shadow: none;
}

.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-medium);
  white-space: nowrap;
  color: var(--color-text-secondary);
  transition: color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard);
}

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

/* One segmented look app-wide (form.css --seg-*): the chosen option is the raised thumb. */
.pill-toggle__opt.is-active {
  background: var(--seg-thumb);
  color: var(--seg-ink);
  box-shadow: var(--seg-lift);
}

/* Touch sizing without growing the visual chrome: 30px pills, and a 44px
   tap area around each (audit 2026-09-29, section 5). A scrolling toggle
   clips the area to its own box - still the whole pill. */
@media (max-width: 880px), (pointer: coarse) {
  .pill-toggle__opt {
    position: relative;
    min-width: 34px;
    height: 30px;
  }
  .pill-toggle__opt::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
}

/* A control with many options (the 5-step time range) may need to scroll
   on the narrowest phones rather than force its row wider. */
/* Sideways only. overflow-x alone makes the browser scroll y too (a visible
   y beside an auto x computes to auto), and the options' few px of shadow
   and focus room let a thumb drag the labels up and down inside the
   capsule on a phone (the operator 21.10). */
.pill-toggle--scroll {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  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;
}

/* On a phone the range stays open. Collapsed, a tap unfolded it in place:
   the chosen word slid some 85px sideways and the unit toggle beside it
   dropped to a second row - text moving about under the thumb, one of the
   operator's notes (2026-10-05). Open and a little tighter it fits most
   phones in one row, and where it does not it scrolls inside itself. */
@media (max-width: 880px), (pointer: coarse) {
  .pill-toggle--collapsible {
    flex-shrink: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden; /* sideways only (.pill-toggle--scroll above) */
    scrollbar-width: none;
  }

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

  .pill-toggle--collapsible .pill-toggle__opt,
  .pill-toggle--collapsible .pill-toggle__opt:not(.is-active),
  .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: none;
    min-width: 34px;
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    opacity: 1;
    pointer-events: auto;
    overflow: visible;
    transition: color var(--dur-fast) var(--ease-standard),
      background-color var(--dur-fast) var(--ease-standard);
  }
}

/* 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. */