/* Analytics (new look, stage 3). The shared parts (.vdesk, .vlead, .vfigs,
   .vbelow, .vwin) are in css/components/desk.css, the graphics (.dv-*, the
   segmented control, the windows' look) in css/components/dataviz.css. */

/* =====================================================================
   Edge's tables: stable columns.

   Root cause of columns shifting position between tags: plain
   <table class="data-table"> uses the browser's default `table-layout:
   auto`, which sizes every column from whichever cell in it currently holds
   the widest content. Fixed percentage widths pin the columns regardless of
   which tag is showing; the label column truncates with an ellipsis.

   Scoped to >700px on purpose. Below that breakpoint `.data-table` stops
   being a table at all - components.css turns every <tr> into a stacked
   card and every <td> into a `display: flex` label/value row - so a
   percentage `width` no longer sizes a column. Fixed columns are a
   desktop-table concern and stay inside the desktop-table media range.
   ===================================================================== */
@media (min-width: 701px) {
  .metric-table {
    table-layout: fixed;
  }

  .metric-table th:nth-child(1),
  .metric-table td:nth-child(1) {
    width: 32%;
  }

  .metric-table th:nth-child(2),
  .metric-table td:nth-child(2) {
    width: 18%;
  }

  .metric-table th:nth-child(3),
  .metric-table td:nth-child(3) {
    width: 26%;
  }

  .metric-table th:nth-child(4),
  .metric-table td:nth-child(4) {
    width: 24%;
  }

  .metric-table td:nth-child(1) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* =====================================================================
   Edge panel - tag correlation, in R / win rate / counts only.
   ================================================================== */
.edge-block + .edge-block {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.edge-block__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.edge-block__head h3 {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  margin: 0;
}

.edge-block__head p {
  margin: var(--space-1) 0 var(--space-4);
  font-size: var(--fs-footnote);
}

.edge-dim + .edge-dim {
  margin-top: var(--space-5);
}

.edge-dim__none {
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--color-text-secondary);
}

.edge-thin {
  margin-top: var(--space-3);
}

.edge-thin summary {
  cursor: pointer;
  font-size: var(--fs-caption);
  color: var(--color-text-secondary);
}

.edge-thin summary:hover {
  color: var(--color-text-secondary);
}

.edge-thin[open] summary {
  margin-bottom: var(--space-3);
}

/* A value that is no longer on its dictionary. Marked, never hidden. */
.off-list-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-text-tertiary);
  vertical-align: middle;
  cursor: help;
}

/* =====================================================================
   Insights
   ================================================================== */
/* The rule is said once; the rows lie flat in the window with a hairline between them. */
.an-ins__rule,
.an-ins__wait,
.an-edge__base {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-caption);
  color: var(--color-text-secondary);
}

.an-ins__wait {
  margin: var(--space-3) 0 0;
}

.insight-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.insight {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 12px 0;
}

.insight + .insight {
  border-top: 1px solid var(--line);
}

.insight__content {
  min-width: 0;
  flex: 1 1 auto;
}

.insight__title {
  font-size: var(--fs-footnote);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

.insight__body {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-caption);
  color: var(--color-text-secondary);
}

.insight__meta {
  margin-top: var(--space-2);
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
}

/* R Efficiency without a single Take Profit is one sentence: its window is a slim
   strip across the row (and so is Mistakes above it, so no column is left with a
   hole beside a tall neighbour). */
.an-wins:has(.an-reff__empty) .an-win--mistakes,
.an-win:has(.an-reff__empty) {
  grid-column: 1 / -1;
}

/* R Efficiency: how much of the planned R was taken. */
.reff-bar {
  height: 4px;
  margin-top: var(--space-5);
  border-radius: 4px;
  background: var(--color-border);
  overflow: hidden;
}

.reff-bar__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-text-primary);
}


/* =====================================================================
   The desk: about the chosen dimension. The segmented control and the chips
   on top; its name, key figure, best and weakest value on the left; the
   chart on the right. Height from content.
   ===================================================================== */

.vdesk.an-desk {
  min-height: 0;
}

.an-desk__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
}

.an-dims {
  flex: 0 1 auto;
}

.an-desk__main {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 24px 56px;
  margin-top: 28px;
  align-items: start;
}

.an-desk__lead {
  min-width: 0;
}

.an-desk__title {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.an-desk__sub {
  margin: 6px 0 0;
  max-width: 36ch;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
}

.an-lead {
  margin-top: 24px;
}

.an-lead .vlead__label {
  font-size: 13px;
  color: var(--text-2);
}

.an-lead .vlead__figure {
  --fig-max: var(--fs-figure);
  margin-top: 6px;
}

.an-lead .vlead__figure .dv-arrow {
  margin-right: 0.18em;
  font-size: 0.4em;
  vertical-align: 0.5em;
}

.an-lead .vlead__sub {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-2);
}

.an-picks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.an-picks:empty {
  display: none;
}

/* Too few trades for a best and a weakest value: one quiet line. */
.an-picks__none {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
}

/* The line that says a value is picked: "Breakout only - Show all". */
.an-filter {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--text-2);
}

.an-filter:empty {
  display: none;
}

.an-filter .dv-fl {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: 13px;
}

.an-pick {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--tile);
}

.an-pick__k {
  font-size: 13px;
  color: var(--text-2);
}

.an-pick b {
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.an-pick__v {
  font-size: 13px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.an-desk__chart {
  position: relative;
  min-width: 0;
}

.an-desk__chart > .dv-empty,
.an-empty {
  padding: 28px 0;
}

/* ---- Windows under the desk: mockup v13's structure ----
   Recessed, radius 22, padding 18 / 20; the head is a title and quiet meta on
   one baseline; the foot link sits right under the content. */
.an-view .vwin {
  padding: 18px 20px;
  border-radius: 22px;
  background: var(--recess, var(--window));
  box-shadow: var(--window-edge);
}

.an-view .vwin .win__head {
  align-items: baseline;
  margin-bottom: 14px;
}

.an-view .vwin .win__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
}

@media (max-width: 560px) {
  .an-view .vwin {
    padding: 14px 16px;
    border-radius: var(--r-window);
  }

  .an-view .vwin .win__title {
    font-size: 14px;
  }
}

.an-view .vwin .win__note {
  font-size: 13px;
  color: var(--text-2);
}

/* The rows of a shared list (dv-row) in this view: v13's sizes. */
.an-view .dv-row__main b,
.an-view .dv-row__value {
  font-size: 14px;
  font-weight: 600;
}

.an-view .dv-row__sub {
  font-size: 13px;
  color: var(--text-2);
}

.an-view .dv-row__state {
  font-size: 13px;
}

/* ---- Windows: an even grid, rows as tall as their taller window ---- */
.vbelow .an-wins {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch; /* a row: every window as tall as the tallest */
}

/* The By hour figure's host: the SVG is drawn into it at its measured size. */
.an-hours {
  position: relative;
  width: 100%;
}

.an-win--wide {
  grid-column: 1 / -1;
}

.an-win__head {
  align-items: baseline;
}

.an-win__head .win__note {
  flex: 1 1 auto;
  text-align: right;
}

.an-win__head .win__note:empty {
  display: none;
}

.an-win__aside {
  min-width: 0;
  max-width: 100%;
}

.an-unit .dv-seg__b {
  min-height: 26px;
  padding: 0 12px;
}

.an-rcurve.chart-card__canvas-wrap {
  height: 230px;
}

/* ---- The list: a value picks itself (v13 rows: name and line, bar, value) ---- */
.an-list__rows {
  display: flex;
  flex-direction: column;
}

.an-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(48px, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: calc(100% + 24px);
  margin: 0 -12px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.an-row + .an-row::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 0;
  height: 1px;
  background: var(--line);
}

.an-row.is-picked {
  background: var(--tile);
}

/* Hover only where there is a pointer to hover with (a touch screen would keep it stuck). */
@media (hover: hover) {
  .an-row:hover {
    background: var(--tile);
  }

  .an-row:hover::before,
  .an-row:hover + .an-row::before {
    opacity: 0;
  }
}

.an-row.is-picked {
  box-shadow: inset 0 0 0 1.5px var(--lead);
}

.an-row.is-picked::before,
.an-row.is-picked + .an-row::before {
  opacity: 0;
}

.an-row:focus-visible {
  outline: 2px solid var(--lead);
  outline-offset: 0;
}

/* Too few trades to lean on: quieter, but still read. The words step down a
   text tone (opacity took them to 3.2:1 in light); only the bar is faded. */
.an-row.is-faint .an-row__bar {
  opacity: 0.6;
}

.an-row.is-faint .an-row__name b {
  color: var(--text-2);
}

.an-row.is-faint .an-row__sub {
  color: var(--text-3);
}

.an-row__name {
  min-width: 0;
}

.an-row__name b {
  display: block;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.an-row__sub {
  display: block;
  font-size: 13px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.an-row__bar {
  height: 8px;
  border-radius: 4px;
  background: var(--track);
  overflow: hidden;
}

.an-row__bar i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--text-2);
}

.an-row__val {
  min-width: 64px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.an-row__val.is-gain { color: var(--gain); }
.an-row__val.is-loss { color: var(--loss); }

.an-foot {
  margin-top: 0;
}

.an-foot:empty {
  display: none;
}

.an-foot__note {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--text-2);
}

/* ---- Figures: lists with a hairline, two columns of six rows ---- */
.an-figs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
  align-items: start;
}

.an-fgroup + .an-fgroup {
  margin-top: 14px;
}

.an-fgroup__t {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
}

.an-win--figs .vfig--row {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}

.an-win--figs .vfig--row + .vfig--row {
  border-top: 1px solid var(--line);
}

.an-win--figs .vfig__label {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-2);
}

.an-win--figs .vfig__value {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-align: right;
  white-space: nowrap;
}

/* Insights: a small dot in the meaning colour instead of an icon in a
   circle; the rows lie flat in the window. */
.insight__dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--track);
}

.insight--unmet .insight__dot { background: var(--text-3); opacity: 0.6; }

/* A rule that pays or costs: an arrow in the meaning colour, so the
   direction does not rest on colour alone. */
.insight__sign {
  flex: none;
  display: inline-flex;
  margin-top: 3px;
  margin-inline: -3px;
}

.insight--good .insight__sign { color: var(--gain); }
.insight--bad .insight__sign { color: var(--loss); }

.insight__sign svg { stroke-width: 2.25; }

.an-win .edge-block + .edge-block {
  border-top-color: var(--line);
}

.an-win .insight__title,
.an-win .edge-block__head h3 {
  font-size: 14px;
  font-weight: 600;
}

.an-win .insight__body,
.an-win .edge-block__head p {
  font-size: 13px;
  color: var(--text-2);
}

.an-win .insight__meta,
.an-win .edge-thin summary {
  font-size: 13px;
  color: var(--text-2);
}

@container vwins (max-width: 760px) {
  .vbelow .an-wins {
    grid-template-columns: minmax(0, 1fr);
  }

  .an-figs {
    grid-template-columns: minmax(0, 1fr);
  }

  .an-fcol + .an-fcol {
    margin-top: 14px;
  }
}

/* Medium widths: the chart gets the row under the lead. */
@container vdesk (max-width: 900px) {
  .an-desk__main {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .an-desk__sub {
    max-width: none;
  }

  .dv-bars {
    grid-template-columns: 112px minmax(0, 1fr) 80px;
  }
}

/* Phone: one column, the dimension row scrolls (and fades where it goes on),
   the list's bar drops under its name, the chart keeps its labels. */
@container vdesk (max-width: 640px) {
  .an-desk__status {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  /* A size down on a phone (the operator 21.10): the title 20px, the figure
     36px, a bar row 34px (the label still wraps inside it). */
  .an-desk__title {
    font-size: 20px;
  }

  .an-desk__sub {
    margin-top: 2px;
    font-size: 12px;
  }

  .an-desk__main {
    margin-top: 10px;
    gap: 12px;
  }

  .an-lead {
    margin-top: 8px;
  }

  .an-lead .vlead__figure {
    --fig-max: 36px;
  }

  .dv-bars {
    grid-template-rows: auto repeat(var(--rows), 34px) auto;
  }

  /* The name wraps inside its column rather than being cut ("Liquidity swe..."). */
  .dv-bars {
    grid-template-columns: 112px minmax(0, 1fr);
    column-gap: 10px;
  }

  .dv-bars__lab b {
    overflow: visible;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* The value after the longest bar ("+7.5 R", "+10.5 R") ends 4px from the
     card's edge when the bars use the whole column. The bars, their zero
     line and the axis keep 48px of the column free on the right for it. */
  .dv-bars__plot,
  .dv-bars__cell,
  .dv-bars__axis {
    margin-right: 48px;
  }

  .dv-bars__head,
  .dv-bars__wr,
  .dv-bars__lab small,
  .an-desk__ring-note {
    display: none;
  }
}

/* Phone: the list's bar drops under the name and the figure. */
@container vwins (max-width: 640px) {
  .an-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .an-row__bar {
    grid-column: 1 / -1;
    order: 3;
  }
}