/* ===========================================================================
   Write/Index.cshtml — the editor.

   The controls are .bh-field and the instrument is .bh-hud, both from BH.Design.
   What is left is the column, the two-up row, and the fact that the title and the
   body are set in the editorial family: this is where a piece is written, and it
   should look like the page it is going to become.

   The .one-form ladder that used to be here - a label class, an input class, a
   textarea class and a select class, each redrawing a border and a radius - is gone
   with it. It was a second, worse copy of .bh-field that had no error state, no
   counter and no focus treatment.
   =========================================================================== */

@layer components {

  .one-write {
    display: grid;
    gap: var(--sp-5);
    max-inline-size: 44rem;
    margin-block-start: var(--sp-6);
  }

  /* The title is typed at something near the size it will be read at. Nothing else
     tells a writer as clearly that they are writing a headline. */
  .one-write__title {
    font-family: var(--ff-editorial);
    font-size: var(--fs-h3);
  }

  .one-write__body {
    min-block-size: var(--sp-10);
    font-family: var(--ff-editorial);
    font-size: var(--fs-body-l);
    line-height: var(--lh-reading);
  }

  /* Kind and language are two small decisions and share a line where there is room
     for it. They took a full column each before, which put the body below the fold
     on a laptop. */
  .one-write__row {
    display: grid;
    gap: var(--sp-5);
  }

  @media (min-width: 40rem) {
    .one-write__row {
      grid-template-columns: 1fr 1fr;
    }
  }

  .one-write__note {
    margin: 0;
    color: var(--bh-titanium);
    font-size: var(--fs-body-s);
    text-wrap: pretty;
  }

  /* The identifier of a piece that just published. Mono, because it is evidence,
     and wrapping anywhere because it is long and must not widen the column. */
  .one-write__id {
    margin: 0;
    color: var(--bh-titanium);
    font-family: var(--ff-evidence);
    font-size: var(--fs-caption);
    overflow-wrap: anywhere;
  }
}