/* ===========================================================================
   Shared/ContentRead.cshtml — one article or news item.

   Zero-Chrome Reading, per docs/design/03-ui-patterns.md. The layout fades the
   bars; this file does the rest: the text gets the editorial family at --measure,
   the provenance collapses into one line that opens the Credential Sheet, and a
   one-pixel rail reports progress.

   The overrides of .one-title, .one-seeded, .one-lede that used to be here are
   gone. They restated layout.css with different numbers, which is why a heading
   changed size depending on whether you arrived from the list or from search.
   =========================================================================== */

@layer components {

  /* -------------------------------------------------------------------------
     Reading progress.

     animation-timeline: scroll() and no script at all. A scroll listener for this
     would run on every frame of every scroll to move one pixel, and would still
     be less smooth than the compositor doing it.

     Guarded by @supports because in a browser without scroll-driven animations an
     un-animated bar would sit at 100% width and claim the article was finished.
     No support means no rail, which is the correct absence: the rail is
     decoration, and aria-hidden says so.
     ------------------------------------------------------------------------- */
  .one-progress {
    display: none;
  }

  @supports (animation-timeline: scroll()) {
    .one-progress {
      display: block;
      position: fixed;
      inset-block-start: 0;
      inset-inline-start: 0;
      z-index: var(--z-tabbar);
      block-size: 1px;
      inline-size: 100%;
      background: var(--bh-ion);
      /* Grows from the reading edge. transform-origin has no logical keywords, so
         the RTL case is a second rule rather than a token. */
      transform-origin: 0% 50%;
      animation: one-progress-grow linear both;
      animation-timeline: scroll();
    }

    [dir="rtl"] .one-progress {
      transform-origin: 100% 50%;
    }

    @keyframes one-progress-grow {
      from { scale: 0 1; }
      to { scale: 1 1; }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    /* A rail that tracks the scroll position is not motion the reader did not ask
       for - it is a readout of their own gesture - but it is still movement on the
       screen, and the setting says no movement. */
    .one-progress { display: none !important; }
  }

  /* -------------------------------------------------------------------------
     The column.
     ------------------------------------------------------------------------- */
  .one-read {
    max-inline-size: var(--measure);
    margin-inline: auto;
  }

  .one-read__head {
    display: grid;
    gap: var(--sp-4);
    margin-block-end: var(--sp-7);
  }

  .one-read__title {
    margin: 0;
    font-family: var(--ff-editorial);
    /* Larger than any other title in the product. On a reading page the title is
       not a label on a list item, it is the opening of the text. */
    font-size: clamp(var(--fs-h1), 6vw, var(--fs-display));
    font-weight: 600;
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  /* -------------------------------------------------------------------------
     The provenance hairline.

     One row where there used to be a badge, a version, a language code and a
     timestamp spread across the top of the text. It is a button, styled as a rule
     rather than as a control, because the evidence should be one press away and
     zero presses in the way.
     ------------------------------------------------------------------------- */
  .one-read__prov {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    min-block-size: var(--tap-min);
    padding: 0;
    border: 0;
    border-block: 1px solid var(--bh-hairline);
    background: none;
    color: var(--bh-titanium);
    font: inherit;
    font-size: var(--fs-body-s);
    text-align: start;
    cursor: pointer;
    transition: color var(--dur-instant) var(--ease-human);
  }

  .one-read__prov:hover { color: var(--bh-chrome); }

  .one-read__prov-level {
    color: var(--bh-chrome);
    font-weight: 600;
  }

  .one-read__prov-who {
    font-family: var(--ff-evidence);
  }

  .one-read__prov-sep {
    color: var(--bh-hairline);
  }

  /* Pushed to the end of the row so the affordance reads as "there is more this
     way" rather than as a second piece of metadata. */
  .one-read__prov-open {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    margin-inline-start: auto;
    color: var(--bh-ion);
    font-size: var(--fs-caption);
    font-weight: 600;
  }

  /* -------------------------------------------------------------------------
     The text.
     ------------------------------------------------------------------------- */
  .one-read__body {
    font-family: var(--ff-editorial);
    font-size: var(--fs-body-l);
    line-height: var(--lh-reading);
  }

  .one-read__body p {
    margin: 0 0 var(--sp-5);
    text-wrap: pretty;
  }

  .one-read__body h2,
  .one-read__body h3 {
    margin: var(--sp-7) 0 var(--sp-3);
    font-family: var(--ff-editorial);
    line-height: var(--lh-tight);
    text-wrap: balance;
  }

  .one-read__body h2 { font-size: var(--fs-h2); }
  .one-read__body h3 { font-size: var(--fs-h3); }

  .one-read__body blockquote {
    margin: var(--sp-6) 0;
    padding-inline-start: var(--sp-5);
    border-inline-start: 2px solid var(--bh-ion);
    color: var(--bh-titanium);
  }

  .one-read__body a {
    color: inherit;
    /* Underline from the font's own metrics, thin, skipping descenders. An
       editorial link should not interrupt the line it sits in. */
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }

  .one-read__body ul,
  .one-read__body ol {
    margin: 0 0 var(--sp-5);
    padding-inline-start: var(--sp-6);
  }

  .one-read__body li {
    margin-block-end: var(--sp-2);
  }

  .one-read__body code {
    font-family: var(--ff-evidence);
    font-size: 0.9em;
  }

  /* -------------------------------------------------------------------------
     After the text.
     ------------------------------------------------------------------------- */
  .one-read__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-block-start: var(--sp-8);
    padding-block-start: var(--sp-5);
    border-block-start: 1px solid var(--bh-hairline);
  }

  .one-read__lang {
    margin: 0;
    color: var(--bh-titanium);
    font-size: var(--fs-caption);
  }
}