/*
 * The page on paper. Everything here is in the last layer, so a print rule
 * beats the component it overrides without `!important`, and inside
 * `@media print` — except the rules that hide print-only elements on screen.
 *
 * Only /:ticker has a print layout (tasks/growth M03, F-4): one portrait US
 * Letter sheet, its @page set by the page itself through the head slot
 * (companies/keystats/show). Any other page prints as the screen styles lay
 * it out, without the effects that only make sense on a screen.
 */
@layer utilities {
  /* The printed page's own footer (companies/keystats/show), which the
     screen does without. */
  .print-footer {
    display: none;
  }

  @media print {
    .print-footer {
      display: block;
      margin-block-start: var(--space-2xs);
      padding-block-start: var(--space-3xs);
      border-block-start: var(--rule-width) solid var(--color-ink);
      color: var(--color-ink-soft);
      font-family: var(--font-ui);
      font-size: var(--text-print-sm);
      line-height: var(--leading-print-sm);
    }

    /* A skeleton that breathes prints half-faded, and nothing on paper
       animates. */
    *,
    *::before,
    *::after {
      animation: none;
      transition: none;
    }
  }
}

/*
 * /:ticker as a reference sheet, after Value Line's: one portrait page, black
 * ink on white, every block a box ruled in ink rather than a card, and the
 * type as small as a printed page allows (--text-print). From the top:
 *
 *   the name, the price and the flags over a heavy rule;
 *   the capital and financial ratios as a strip of figures under it;
 *   the target price, the rating and the growth rates down the left, beside
 *     the price chart, drawn for paper at its own size
 *     (Companies::PriceChart::PRINT_WIDTH);
 *   the annual grid across the page — the statistical array, years across,
 *     labels to the right, estimates in bold;
 *   the four quarterly tables in a row, then assets and liabilities beside
 *     the dividends — all of the sidebar but Insider Decisions, which does
 *     not fit;
 *   the footer.
 *
 * The chrome that is for moving around the site goes, and so do the paywall
 * banner, the flags' legend, the commentary and the news: reading, not
 * reference. The report's wrappers give up their boxes (`display: contents`)
 * so every card is an item of one grid and takes its place by name.
 */
@layer utilities {
  @media print {
    :is(.navbar, .drawer, .sidebar, .flash, .footer, .company-tabs, .paywall-notice,
        .company-flags__legend, .keystats__commentary, .keystats__news,
        .keystats__all-years, .frame-state button, .company-header__print, .sparkline,
        .table-key, .company-price__as-of, .keystats__insiders,
        .keystats__financials .table-legend:nth-child(1 of .table-legend)) {
      display: none;
    }

    html {
      print-color-adjust: exact;
    }

    .app {
      background: none;
    }

    .app__main,
    .page {
      padding: 0;
    }

    /* The masthead: name, ticker and price on one line over a heavy rule. */
    .company-header {
      flex-direction: row;
      align-items: flex-end;
      gap: var(--space-md);
      margin-block-end: var(--space-2xs);
      padding-block-end: var(--space-3xs);
      border-block-end: 3px solid var(--color-ink);

      & > div:first-child {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0 var(--space-sm);
      }
    }

    .company-header__name {
      font-family: var(--font-ui);
      font-size: var(--text-print-title);
      font-weight: var(--weight-semibold);
      line-height: 1;
      letter-spacing: var(--tracking-tight);
      text-transform: uppercase;

      & .ticker {
        border: 0;
        background: none;
        padding: 0;
        font-size: var(--text-ui);
      }
    }

    .company-header__sector {
      margin: 0;
      font-size: var(--text-print);
    }

    .company-header__price {
      min-block-size: 0;

      & .figure--stat {
        font-size: var(--text-h3);
      }
    }

    .company-flags {
      margin-inline-start: auto;
    }

    .company-flag {
      min-block-size: 0;
      padding: 0 var(--space-2xs);
      border-color: var(--color-ink);
      border-radius: 0;
      background: none;
      color: var(--color-ink);
      font-size: var(--text-print);
    }

    /* One grid, every card placed by name. */
    .keystats {
      --text-data: var(--text-print);
      --leading-data: var(--leading-print);
      --text-data-dense: var(--text-print);
      --leading-data-dense: var(--leading-print);

      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-template-areas:
        "ratios   ratios    ratios    ratios"
        "target   chart     chart     chart"
        "rating   chart     chart     chart"
        "growth   chart     chart     chart"
        "array    array     array     array"
        "revenue  eps       ocf       fcf"
        "balance  balance   dividends dividends";
      grid-template-rows: auto auto auto 1fr;
      gap: 4px;
      color: var(--color-ink);
      font-size: var(--text-print);
      line-height: var(--leading-print);
    }

    :is(.keystats__main, .keystats__overview, .keystats__aside, .keystats__sidebar) {
      display: contents;
    }

    .keystats__target { grid-area: target; }
    .keystats__rating { grid-area: rating; }
    .keystats__ratios { grid-area: ratios; }
    .keystats__chart { grid-area: chart; }
    .keystats__financials { grid-area: array; }
    .keystats__balance { grid-area: balance; }
    .keystats__growth { grid-area: growth; }
    .keystats__dividends { grid-area: dividends; }

    /* The four quarterly tables, in the sidebar's order: revenue, operating
       cash flow, free cash flow, EPS. */
    .keystats__quarterly:nth-child(1 of .keystats__quarterly) { grid-area: revenue; }
    .keystats__quarterly:nth-child(2 of .keystats__quarterly) { grid-area: ocf; }
    .keystats__quarterly:nth-child(3 of .keystats__quarterly) { grid-area: fcf; }
    .keystats__quarterly:nth-child(4 of .keystats__quarterly) { grid-area: eps; }

    /* A box, not a card: a hairline in ink, square corners, no shadow. */
    .keystats .card {
      padding: 2px 4px;
      border: var(--rule-width) solid var(--color-ink);
      border-radius: 0;
      background: none;
      box-shadow: none;
      break-inside: avoid;
    }

    .keystats .card--flush {
      padding: 0;
    }

    .keystats .card__header {
      margin: 0;
      padding: 0;
      border: 0;
    }

    .keystats .heading {
      margin: 0 0 1px;
      font-family: var(--font-ui);
      font-size: var(--text-print);
      font-weight: var(--weight-semibold);
      line-height: var(--leading-print);
      letter-spacing: var(--tracking-caps);
      text-transform: uppercase;
    }

    .keystats :is(td, th, .stat-list__row) {
      padding: 0 2px;
      line-height: var(--leading-print);
    }

    .keystats .stat-list__row {
      border: 0;
      font-size: var(--text-print);
    }

    .keystats .stat-list__label {
      color: var(--color-ink);
    }

    /* The ratios as a strip under the masthead, seven to a row, each label
       over its figure — Value Line's top line. */
    .keystats__ratios {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: start;
      gap: 0 var(--space-sm);

      & .heading {
        grid-row: span 2;
        inline-size: 6rem;
        white-space: normal;
      }

      & .stat-list {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 1px var(--space-2xs);
      }

      & .stat-list__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 0;
      }

      & .stat-list__label {
        font-size: var(--text-print-sm);
        line-height: var(--leading-print-sm);
      }

      & .stat-list__value {
        font-weight: var(--weight-semibold);
        text-align: start;
      }

      & .table-legend {
        grid-column: 1;
      }
    }

    /* The quarterly and balance tables in the paper's smallest size: seven
       digits of five quarters in a quarter of the page. */
    :is(.keystats__quarterly, .keystats__balance) {
      padding-inline: 2px;
    }

    :is(.keystats__quarterly, .keystats__balance) :is(td, th, .figure) {
      font-size: var(--text-print-sm);
      line-height: var(--leading-print-sm);
      letter-spacing: -0.02em;
      padding-inline: 1px 0;
    }

    :is(.keystats__quarterly, .keystats__balance) :is(td, th):first-child {
      padding-inline-start: 0;
    }

    /* Assets beside liabilities, rather than one over the other. */
    .keystats__balance .stack {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-sm);
    }

    .keystats :is(thead th, .data-table__label) {
      color: var(--color-ink);
      font-size: var(--text-print);
    }

    .keystats thead th {
      border-block-end: var(--rule-width) solid var(--color-ink);
      letter-spacing: 0;
      text-transform: none;
    }

    .keystats tbody :is(td, th) {
      border: 0;
    }

    /* No zebra, no hover tint, no banding: ink on white. A highlighted row
       keeps its weight, which is how Value Line marks its key lines. */
    .keystats :is(tr, td, th, .stat-list__row, .data-table__label--pinned-end) {
      background: none;
      box-shadow: none;
    }

    .keystats .table-legend {
      margin: 0;
      padding: 1px 0 0;
      color: var(--color-ink-soft);
      font-size: var(--text-print-sm);
      line-height: var(--leading-print-sm);
    }

    .keystats .figure {
      color: var(--color-ink);
    }

    /* A table that scrolls on screen shows all of itself on paper, and one
       that sized itself for a phone takes the box it is given. */
    .table-scroll {
      overflow: visible;
      background: none;
    }

    .balance-table {
      min-inline-size: 0;

      & thead .data-table__label {
        inline-size: 3.25rem;
      }
    }

    /* Chart, target and rating. */
    .keystats__chart {
      padding: 2px;
    }

    .company-chart {
      inline-size: var(--print-width);
      block-size: var(--print-height);
    }

    .target-price__row {
      padding-block: 1px;
      font-size: var(--text-print);
    }

    .target-price__figure {
      min-inline-size: 0;
    }

    .rating-scale {
      margin-block: var(--space-md) 0;
    }

    .rating-scale__track {
      block-size: 4px;
    }

    .rating-scale__labels {
      margin-block-start: 1px;
      color: var(--color-ink);
      font-size: var(--text-print-sm);
    }

    .rating-scale__marker {
      font-size: var(--text-print-sm);
    }

    /* The statistical array: years across, a heavy rule above and below,
       the estimate columns in bold rather than tinted. */
    .keystats__financials .card--flush {
      border-width: 2px 0;
    }

    .keystats__financials .card__header {
      display: none;
    }

    /* Every year the same width, whatever it holds; the labels a fixed
       column at the right. */
    .keystats__financials table {
      table-layout: fixed;
    }

    .keystats__financials .data-table__label--pinned-end {
      inline-size: 5.5rem;
    }

    .keystats__financials :is(td, th) {
      font-size: var(--text-print-sm);
      line-height: var(--leading-print-sm);
      padding-inline: 1px;
    }

    .keystats__financials .figure {
      font-size: var(--text-print-sm);
    }

    .keystats__financials .data-table__label--pinned-end {
      border-inline-start: var(--rule-width) solid var(--color-ink);
      padding-inline-start: 3px;
      font-weight: var(--weight-semibold);
    }

    .keystats__financials .data-table__label-row {
      display: inline;
    }

    .data-table__cell--forecast {
      background: none;
      font-weight: var(--weight-semibold);
    }

    .data-table__cell--forecast-first {
      border-inline-start: var(--rule-width) solid var(--color-ink);
    }

    .keystats__financials .table-legend {
      padding-inline: 2px;
    }

    /* Insider decisions are left off: a year of months is the widest table
       on the page and the least read, and the page is full. */
    .dividend-grid {
      gap: 0;
    }
  }
}