/*
 * What a company's price implies, and a model of the reader's own
 * (companies/valuations, companies/valuation_dcfs; 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 multiples are a row each: today's figure, its ten-year range as a
 * track with today and the median marked, and the sentence that reads them.
 *
 * 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);
  }

  /* The multiples as a table (owner, 2026-11-01): today in the heavier
     weight, each gap in words, the range track in the last column. */
  .valuation-multiples__now {
    font-weight: var(--weight-semibold);
  }

  .valuation-multiples__range {
    display: grid;
    grid-template-columns: auto minmax(8rem, 1fr) auto;
    gap: var(--space-sm);
    align-items: center;
    min-inline-size: 14rem;
    color: var(--color-ink-muted);
    font-size: var(--text-meta);
  }

  /* Below and above in two neutral inks — never gain and loss: a cheap
     multiple is not good news in itself. */
  .valuation-gap {
    white-space: nowrap;
  }

  .valuation-gap--below {
    color: var(--color-series-2);
    font-weight: var(--weight-semibold);
  }

  .valuation-gap--above {
    color: var(--color-warn);
    font-weight: var(--weight-semibold);
  }

  /* The industry columns set apart by a hairline, as the sketch has them. */
  .valuation-multiples__industry {
    border-inline-start: var(--rule-hairline);
  }

  /* One multiple as the sketch draws it: the choices and the key in a row
     above the chart, the line in the slate series ink, the ten-year average
     a dashed ink rule inside a tinted band one standard deviation wide, the
     gridlines hairlines, and today a dot at the end. */
  .valuation-multiple-chart {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding-block-start: var(--space-lg);
  }

  .valuation-multiple-chart__bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-lg);
    align-items: center;
    justify-content: space-between;
  }

  .valuation-multiple-chart__reading {
    max-inline-size: var(--measure);
    margin: 0;
    font-family: var(--font-prose);
    font-size: var(--text-prose-sm);
    line-height: var(--leading-prose-sm);
  }

  .valuation-key {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
    margin: 0;
    padding: 0;
    color: var(--color-ink-muted);
    font-size: var(--text-meta);
    list-style: none;

    & > li {
      display: flex;
      gap: var(--space-2xs);
      align-items: center;
    }
  }

  .valuation-key__swatch {
    display: inline-block;
    inline-size: 1rem;
  }

  .valuation-key__swatch--line {
    border-block-start: 2px solid var(--color-series-2);
  }

  .valuation-key__swatch--average {
    border-block-start: 2px dashed var(--color-ink);
  }

  .valuation-key__swatch--band {
    block-size: 0.625rem;
    background: color-mix(in srgb, var(--color-series-2) 14%, transparent);
  }

  .valuation-key__swatch--up {
    block-size: 0.625rem;
    border: 1.5px solid var(--color-series-2);
    inline-size: 0.625rem;
  }

  .valuation-key__swatch--down {
    block-size: 0.625rem;
    background: var(--color-warn);
    inline-size: 0.625rem;
  }

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

  .valuation-chart__line {
    fill: none;
    stroke: var(--color-series-2);
    stroke-width: 2.5;
    stroke-linejoin: round;
  }

  .valuation-chart__grid {
    stroke: var(--color-rule);
    stroke-width: 1;
  }

  .valuation-chart__band {
    fill: color-mix(in srgb, var(--color-series-2) 14%, transparent);
  }

  .valuation-chart__today {
    fill: var(--color-series-2);
    stroke: var(--color-surface);
    stroke-width: 2;
  }

  .valuation-chart__value {
    stroke: var(--color-ink);
    stroke-width: 2;
  }

  .valuation-candle__wick {
    stroke-width: 1.5;
  }

  .valuation-candle__body {
    stroke-width: 1.5;
  }

  .valuation-candle--up {
    & .valuation-candle__wick,
    & .valuation-candle__body {
      stroke: var(--color-series-2);
    }

    & .valuation-candle__body {
      fill: var(--color-surface);
    }
  }

  .valuation-candle--down {
    & .valuation-candle__wick,
    & .valuation-candle__body {
      stroke: var(--color-warn);
    }

    & .valuation-candle__body {
      fill: var(--color-warn);
    }
  }

  .valuation-key__swatch--value {
    border-block-start: 2px solid var(--color-ink);
  }

  .valuation-chart__median {
    stroke: var(--color-ink);
    stroke-dasharray: 6 5;
    stroke-width: 1.5;
  }

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

  .valuation-chart__label--end {
    text-anchor: end;
  }

  .valuation-chart__label--middle {
    text-anchor: middle;
  }

  .valuation-chart__label--strong {
    fill: var(--color-ink);
    font-weight: var(--weight-semibold);
  }

  /* The ten readings' range as a track, as the sketch draws it. */
  .valuation-range {
    position: relative;
    display: block;
    inline-size: 100%;
    block-size: 0.375rem;
    background: var(--color-surface-sunken);

    &::before,
    &::after {
      position: absolute;
      content: "";
    }

    /* The ten-year average: an ink tick across the track. */
    &::before {
      inset-block: -0.3125rem;
      inset-inline-start: var(--average);
      inline-size: 2px;
      margin-inline-start: -1px;
      background: var(--color-ink);
    }

    /* Today: a dot in the chart's ink. */
    &::after {
      inset-block-start: 50%;
      inset-inline-start: var(--position);
      inline-size: 0.75rem;
      block-size: 0.75rem;
      margin: -0.375rem 0 0 -0.375rem;
      border: 2px solid var(--color-surface);
      border-radius: var(--radius-pill);
      background: var(--color-series-2);
      outline: 1px solid var(--color-series-2);
    }
  }

  .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/valuation_dcfs/_model), as the co-founder's sketch
   lays out its DCF board (owner, 2026-11-01): "Your assumptions" in a column
   on the left, what they come to on the right, what else the model holds
   below. */
.valuation-model__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
}

/* The assumptions in a column on the left, sticky as the results scroll
   beside them, from 1024px; stacked above them under it (owner,
   2026-11-01, after the co-founder's sketch). */
.valuation-model__layout {
  display: grid;
  gap: var(--space-xl) var(--space-2xl);
  align-items: start;

  @media (width >= 1024px) {
    grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
  }
}

.valuation-model__aside {
  @media (width >= 1024px) {
    position: sticky;
    inset-block-start: var(--space-md);
  }
}

.valuation-model__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  min-inline-size: 0;
}

/* A numbered group of inputs: its legend, the fields, a line of help. */
.valuation-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  inline-size: 100%;
  padding-block-start: var(--space-sm);
  border-block-start: var(--rule-hairline);
}

.valuation-group__legend {
  float: inline-start;
  inline-size: 100%;
  font-weight: var(--weight-semibold);
}

.valuation-group__help {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--text-meta);
}

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

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

/* The label sits above the box, so the field's room for a floating label
   (components/field.css) is given back and the text centres, as the
   screener's value field and the alert drawer do. */
.valuation-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);

  & > .field__input {
    padding-block: 0;
  }
}

.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);

}

.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);
}

/* The sketch's result: four tiles in a row, divided by hairlines, the value
   per share the largest; then "How we got there". */
.valuation-result {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.valuation-result__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  border-block: var(--rule-hairline);
}

.valuation-result__tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-md);
  border-inline-end: var(--rule-hairline);

  &:last-child {
    justify-content: center;
    border-inline-end: 0;
  }
}

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

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

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

/* The gap between the value and the price, stated as a fact: slate above,
   amber below, never gain and loss. */
.valuation-pill {
  align-self: flex-start;
  padding: var(--space-3xs) var(--space-sm);
  border-radius: var(--radius-pill);
  font-size: var(--text-ui-sm);
  font-weight: var(--weight-semibold);
}

.valuation-pill--above {
  background: color-mix(in srgb, var(--color-series-2) 14%, transparent);
  color: var(--color-series-2);
}

.valuation-pill--below {
  background: var(--color-warn-tint);
  color: var(--color-warn);
}

/* "How we got there": each figure bold beside what it is, the operators
   between, wrapping as the width allows. */
.valuation-how {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-sm);
  align-items: baseline;
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-raised);
  font-size: var(--text-ui-sm);
}

.valuation-how__label {
  inline-size: 100%;
  color: var(--color-ink-muted);
  font-size: var(--text-meta-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.valuation-how__operator {
  color: var(--color-ink-muted);
}

/* The sketch's alert, when terminal growth meets the cost of equity. */
.valuation-alert {
  padding: var(--space-md);
  border-inline-start: var(--rule-width-strong) solid var(--color-warn);
  background: var(--color-warn-tint);
  font-size: var(--text-ui-sm);
}

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

/* What the model holds beyond the sketch, below it. */
.valuation-more {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-md);
  border-block-start: var(--rule-heavy);
}

.valuation-more__figures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-2xl);
  margin: 0;

  & dd {
    margin: 0;
  }
}

.valuation-advanced__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-block-start: var(--space-sm);
}

/* The year-by-year working, folded away under its heading. */
.valuation-working__summary {
  display: flex;
  align-items: center;
  min-block-size: var(--target-min);
  cursor: pointer;

  & > .heading {
    margin: 0;
  }
}

/* Each cell tinted by how far it is from the threshold the note names — the
   sketch's four tiers, in the multiples' two neutral inks; a cell with no
   answer on the sunken ground; the reader's own case outlined. */
.valuation-sensitivity {
  & .is-far-above {
    background: color-mix(in srgb, var(--color-series-2) 26%, transparent);
  }

  & .is-above {
    background: color-mix(in srgb, var(--color-series-2) 12%, transparent);
  }

  & .is-below {
    background: color-mix(in srgb, var(--color-warn-tint) 55%, transparent);
  }

  & .is-far-below {
    background: var(--color-warn-tint);
  }

  & .is-none {
    background: var(--color-surface-sunken);
    color: var(--color-ink-muted);
  }

  & .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;
  }
}
}