/*
 * What a company's price implies, and a model of the reader's own
 * (companies/valuations, frames/valuations; tasks/growth/milestones/25).
 *
 * The headline is the page's lead: the sentence in the serif at the lead
 * size, the record under it, and a bar per rate — the implied one in ink,
 * the reported ones in the muted ink, the industry's as an outline, so the
 * eye reads the implied rate against the others. A bar's length comes from
 * the markup (`--share`, its rate over the longest).
 *
 * The history is a server-drawn SVG: the implied line in ink, what was
 * reported after each year as dots in the accent, a hairline at zero.
 *
 * The Overview's card (companies/keystats/_valuation) reuses the bars in the
 * sidebar's narrower column.
 */
@layer pages {
  .valuation-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
    padding-block: var(--space-md) var(--space-xl);
  }

  .valuation-page__section {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .valuation-page__note {
    max-inline-size: var(--measure);
  }

  .valuation-headline {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .valuation-headline__sentence {
    max-inline-size: var(--measure);
    font-family: var(--font-prose);
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
  }

  /* Where a REIT's FFO a share came from: the computed or the reported
     figure, and the release (M26). */
  .valuation-headline__source {
    max-inline-size: var(--measure);
    color: var(--color-ink-soft);
    font-size: var(--text-ui);
  }

  .valuation-headline__record {
    max-inline-size: var(--measure);
    color: var(--color-ink-soft);
    font-family: var(--font-prose);
    font-size: var(--text-lead);
    line-height: var(--leading-lead);
  }

  .valuation-bars {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) 4.5rem;
    gap: var(--space-xs) var(--space-md);
    align-items: center;
    max-inline-size: 44rem;
    padding-block-start: var(--space-xs);
  }

  .valuation-bars__row {
    display: contents;
  }

  .valuation-bars__bar {
    block-size: 0.875rem;
    inline-size: calc(var(--share, 0) * 100%);
    background: var(--color-ink-subtle);
  }

  .valuation-bars__row--implied .valuation-bars__bar {
    background: var(--color-ink);
  }

  .valuation-bars__row--peers .valuation-bars__bar {
    box-sizing: border-box;
    border: var(--rule-width-strong) solid var(--color-ink);
    background: transparent;
  }

  .valuation-bars__figure {
    text-align: end;
  }

  .valuation-bars__row--implied .valuation-bars__figure {
    font-weight: var(--weight-semibold);
  }

  .valuation-history__chart {
    display: block;
    inline-size: 100%;
    block-size: auto;
    overflow: visible;
  }

  .valuation-history__zero {
    stroke: var(--color-rule);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
  }

  .valuation-history__implied {
    fill: none;
    stroke: var(--color-ink);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
  }

  .valuation-history__reported {
    fill: var(--color-accent);
  }

  .valuation-history__label {
    fill: var(--color-ink-muted);
    font-family: var(--font-data);
    font-size: var(--text-meta-xs);
  }

  .valuation-history__key {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-sm);
    align-items: center;
    color: var(--color-ink-muted);
    font-size: var(--text-meta);
  }

  .valuation-history__swatch {
    display: inline-block;
    inline-size: 1.25rem;
    block-size: 0.5rem;
  }

  .valuation-history__swatch--implied {
    block-size: 2px;
    background: var(--color-ink);
  }

  .valuation-history__swatch--reported {
    inline-size: 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
  }

  .valuation-multiples__range-head {
    text-align: start;
  }

  .valuation-multiples__range-cell {
    min-inline-size: 10rem;
  }

  /* The ten years' range as a hairline track, today as a heavy tick on it. */
  .valuation-range {
    position: relative;
    display: block;
    inline-size: 100%;
    max-inline-size: 12rem;
    block-size: 0.5rem;
    background: var(--color-surface-sunken);

    &::after {
      position: absolute;
      inset-block: -0.25rem;
      inset-inline-start: var(--position);
      inline-size: 3px;
      background: var(--color-ink);
      content: "";
    }
  }

  .keystats__valuation {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);

    & .valuation-bars {
      grid-template-columns: minmax(0, 8rem) minmax(0, 1fr) 3.5rem;
    }
  }

  .keystats__valuation-sentence {
    font-family: var(--font-prose);
    font-size: var(--text-prose-sm);
    line-height: var(--leading-prose-sm);
  }
/* The model (companies/valuations/_model): the switches, the inputs in a
   grid of two to four columns as the width allows, the advanced ones in a
   <details>, then the results, the working and the sensitivity. */
.valuation-model {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.valuation-model__switches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
}

.valuation-model__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
}

.valuation-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--space-md);
  inline-size: 100%;
}

.valuation-inputs__wide {
  grid-column: 1 / -1;
}

.valuation-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.valuation-field__label {
  color: var(--color-ink-soft);
  font-size: var(--text-ui-sm);
  font-weight: var(--weight-medium);
}

.valuation-field__note {
  color: var(--color-ink-muted);
  font-size: var(--text-meta-xs);
}

.valuation-advanced {
  inline-size: 100%;
  padding-block-start: var(--space-xs);
  border-block-start: var(--rule-hairline);

  &[open] > .valuation-inputs {
    padding-block-start: var(--space-sm);
  }
}

.valuation-advanced__summary {
  display: flex;
  align-items: center;
  min-block-size: var(--target-min);
  cursor: pointer;
  font-weight: var(--weight-semibold);
}

.valuation-cost {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  color: var(--color-ink-soft);
  font-size: var(--text-ui-sm);
}

.valuation-results {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-2xl);
  align-items: flex-end;
  padding-block-end: var(--space-md);
  border-block-end: var(--rule-hairline);
}

.valuation-results__figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.valuation-results__number {
  font-family: var(--font-prose);
  font-size: var(--text-stat);
  line-height: var(--leading-stat);
}

.valuation-results__figure--lead .valuation-results__number {
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-display);
}

.valuation-results__note {
  color: var(--color-ink-soft);
  font-size: var(--text-ui-sm);
}

.valuation-working__sum {
  font-size: var(--text-ui-sm);
}

/* The cells at or above the threshold the note names are shaded; the
   reader's own case is outlined. */
.valuation-sensitivity {
  & .is-above {
    background: var(--color-surface-sunken);
  }

  & .is-base {
    font-weight: var(--weight-bold);
    outline: var(--rule-width-strong) solid var(--color-ink);
    outline-offset: calc(-1 * var(--rule-width-strong));
  }
}
/* Save with a note, the Excel model and the alert, in one row that wraps. */
.valuation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  align-items: flex-end;
  padding-block-start: var(--space-md);
  border-block-start: var(--rule-hairline);
}

.valuation-actions__save {
  display: flex;
  flex: 1 1 28rem;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: flex-end;

  & > .valuation-field {
    flex: 1 1 16rem;
  }
}
}