/* Mobile BWA income statement (Bwa::MobileStatementComponent): result card
   (.outcome), then the .flow of area steps (+/−) and total cards (.stage,
   dark when .final). Rows render every view and both metrics; the frame
   shows one of each in the same slot, so switching never moves a row.
   Radius, dividers and outer spacing come from the surrounding .mobile-list. */

[data-metric="delta"] .bwa-mobile-statement .for-share,
[data-metric="share"] .bwa-mobile-statement .for-delta {
  display: none;
}

/* Pill look: .bwa-mobile-sticky-controls. Both labels share one cell, so the
   width stays; the hidden one keeps its space. */
.metric-switch .labels {
  display: grid;

  > span {
    grid-area: 1 / 1;
  }

  [data-metric="delta"] & > .for-share,
  [data-metric="share"] & > .for-delta {
    visibility: hidden;
  }
}

.bwa-mobile-statement {
  /* Inset of the flow line's markers; the only local variable. */
  --s-marker: 1.375rem;

  display: flex;
  flex-direction: column;
  gap: var(--m-gap);
  padding-bottom: var(--m-gap);
  font-variant-numeric: tabular-nums;

  .success {
    color: var(--app-ok-fg);
  }

  .loss {
    color: var(--app-danger);
  }

  .name {
    min-width: 0;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .amount,
  .metric {
    justify-self: end;
    white-space: nowrap;
  }

  /* One per view (url-choice); its parts sit in the row's grid. */
  .values {
    display: contents;
  }

  /* ---------- Result card ---------- */

  .outcome {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "label label"
      "metric amount"
      "margin margin";
    align-items: baseline;
    gap: 0.125rem var(--m-gap);
    padding: var(--m-pad);
    border-radius: var(--m-radius);

    .label {
      grid-area: label;
      font-size: var(--app-text-xs);
      font-weight: var(--app-text-medium);
    }

    .amount {
      grid-area: amount;
      font-size: var(--app-text-xl);
      font-weight: var(--app-text-bold);
    }

    .metric {
      grid-area: metric;
    }

    .margin {
      grid-area: margin;
      font-size: var(--app-text-sm);

      strong {
        color: var(--app-card-header-fg);
        font-weight: var(--app-text-semibold);
      }
    }
  }

  /* ---------- Flow ---------- */

  .flow {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding-left: var(--s-marker);
    font-size: var(--app-text-sm);

    /* The line the steps add up along. */
    &::before {
      content: "";
      position: absolute;
      inset-block: 1.375rem;
      left: 0.4375rem;
      width: 2px;
      border-radius: 2px;
      background-color: var(--hc-ink-300);
    }

    > * {
      position: relative;
    }
  }

  /* Row button: name and amount, then bar (or caption) and metric. */
  .line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name amount"
      "bar metric";
    align-items: center;
    gap: 0.25rem 0.75rem;
    width: 100%;
    border: 0;
    color: inherit;
    background: none;
    text-align: start;
    -webkit-tap-highlight-color: transparent;

    .name {
      grid-area: name;
      align-self: baseline;
      display: flex;
      gap: 0.375rem;
    }

    /* After the name; points right when folded, down when unfolded. */
    .caret {
      flex: none;
      align-self: center;
      font-size: 0.75em;
      color: var(--app-fg-subtle);
      transition: transform 0.2s ease;
    }

    &[aria-expanded="true"] .caret {
      transform: rotate(90deg);
    }

    .amount {
      grid-area: amount;
      align-self: baseline;
      font-weight: var(--app-text-semibold);
    }

    .metric {
      grid-area: metric;
      line-height: 1.125rem;
    }

    /* Sits right next to the metric, which is in the right-hand column. */
    .caption {
      grid-area: bar;
      justify-self: end;
      font-size: var(--app-text-xs);
      line-height: 1.125rem;
      color: var(--app-fg-muted);
    }
  }

  .metric.for-share {
    color: var(--app-fg-subtle);
  }

  /* White surfaces: total cards and an unfolded area. */
  .stage,
  .step > .panel {
    border: 1px solid var(--m-divider);
    border-radius: var(--m-radius);
    background-color: var(--app-surface);
  }

  /* ---------- Area steps ---------- */

  .step {
    > .line {
      /* Fixed metric column: every bar gets the same track, so the
         middle marks align. */
      grid-template-columns: minmax(0, 1fr) 5.75rem;
      padding: 0.375rem 0.25rem 0.375rem 0.375rem;

      .name {
        font-weight: var(--app-text-medium);
      }
    }

    > .panel {
      margin: 0.125rem 0 0.375rem 0.375rem;
      overflow: hidden;
    }
  }

  /* A button too: tapping the marker unfolds the row like the line does. */
  .operator {
    position: absolute;
    padding: 0;
    top: 0.5rem;
    left: calc(-1 * var(--s-marker));
    display: grid;
    place-items: center;
    width: 1rem;
    height: 1rem;
    border: 1.5px solid var(--app-fg-faint);
    border-radius: 50%;
    background-color: var(--app-bg);
    color: var(--app-fg-muted);
    font-size: var(--app-text-2xs);
    line-height: 1;
    -webkit-tap-highlight-color: transparent;

    /* Larger tap target than the marker itself. */
    &::after {
      content: "";
      position: absolute;
      inset: -0.5rem;
    }
  }

  /* 4px in both metrics. Change grows from the middle mark (right for more,
     left for less); share fills from the left. */
  .bar {
    grid-area: bar;
    position: relative;
    height: 4px;
    border-radius: 2px;
    background-color: var(--app-bg-wash);

    .fill {
      position: absolute;
      inset-block: 0;
      left: var(--start);
      width: var(--size);
      border-radius: inherit;
      background-color: var(--app-fg-faint);
    }

    &.change {
      background-color: var(--app-bg-sheet);

      &::after {
        content: "";
        position: absolute;
        inset-block: -3px;
        left: calc(50% - 1px);
        width: 2px;
        border-radius: 1px;
        background-color: var(--app-fg-faint);
      }

      .fill.success {
        background-color: color-mix(in srgb, var(--app-ok-fg) 65%, var(--app-bg-sheet));
      }

      .fill.loss {
        background-color: color-mix(in srgb, var(--app-danger) 60%, var(--app-bg-sheet));
      }
    }
  }

  /* ---------- Totals ---------- */

  .stage {
    margin-block: 0.125rem;

    /* The total's dot on the flow line. */
    &::before {
      content: "";
      position: absolute;
      top: 1rem;
      left: calc(1px - var(--s-marker));
      width: 0.75rem;
      height: 0.75rem;
      border-radius: 50%;
      background-color: var(--app-fg-subtle);
      box-shadow: 0 0 0 3px var(--app-bg);
    }

    &.final::before {
      background-color: var(--app-fg);
    }

    > .line {
      padding: var(--m-pad);

      .name {
        font-size: var(--app-text-base);
        font-weight: var(--app-text-semibold);
      }

      .amount {
        font-size: var(--app-text-lg);
        font-weight: var(--app-text-bold);
      }
    }

    > .panel {
      padding: 0 var(--m-pad) var(--m-pad);
      color: var(--app-fg-muted);
    }

    /* Explanation, quieter than the prior-year figures above it. */
    .composition {
      font-size: var(--app-text-xs);
      color: var(--app-fg-subtle);
    }
  }

  /* Metric chips of the result card and the totals; tinted on light cards. */
  .outcome .metric,
  .stage .metric {
    padding: 0 0.5rem;
    border-radius: var(--bs-border-radius-pill);
    background-color: var(--app-bg-sheet);
    font-size: var(--app-text-xs);
    font-weight: var(--app-text-semibold);

    &.success {
      background-color: var(--app-ok-bg);
    }

    &.loss {
      background-color: var(--app-danger-bg);
    }
  }

  /* Dark surfaces: the result card and the final totals, with the dark
     versions of the colors above. */
  .outcome,
  .stage.final {
    border-color: transparent;
    background-color: var(--app-card-header-bg);
    color: var(--app-card-header-fg);

    .label,
    .margin,
    .caption,
    .caret,
    > .panel {
      color: var(--app-fg-muted-inverse);
    }

    .success {
      color: var(--app-ok-fg-inverse);
    }

    .loss {
      color: var(--app-danger-inverse);
    }

    .metric,
    .metric.success,
    .metric.loss {
      background-color: var(--app-chip-bg-inverse);
    }

    .metric.for-share,
    .composition {
      color: inherit;
    }
  }

  /* ---------- Unfolded area ---------- */

  .step .prior,
  .entry,
  .more {
    padding: var(--app-table-cell-padding-y) var(--app-table-cell-padding-x);
  }

  .step .prior {
    color: var(--app-fg-muted);
  }

  /* Columns shared by all entries (subgrid): name, metric, amount right-most.
     The amount column is as wide as the widest amount, so metrics line up
     right next to it. */
  .entries {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: var(--m-gap);

    > * {
      grid-column: 1 / -1;
      border-top: 1px solid var(--m-divider);
    }
  }

  .entry {
    display: grid;
    grid-template-columns: subgrid;
    align-items: baseline;
    color: inherit;

    /* Markup order is amount, metric; both stay on the name's line. */
    .metric {
      grid-area: 1 / 2;
      font-size: var(--app-text-2xs);
    }

    .amount {
      grid-area: 1 / 3;
    }

    &:active {
      background-color: var(--app-bg-muted);
    }

    /* The whole row is the link; no underline on hover. */
    @media (hover: hover) and (pointer: fine) {
      &:hover {
        background-color: var(--app-bg-muted);
        text-decoration: none;
      }
    }
  }

  .more {
    text-align: end;
    font-weight: var(--app-text-semibold);
    color: var(--app-fg);
  }
}