/* Chrome and shared furniture for every One.Web view. Tokens only.

   Two things happened to this file in the Crystal wave.

   The .bh-header overrides are gone with the header itself: the shell is .bh-topbar plus
   .bh-tabbar from BH.Design's nav.css now.

   And the furniture every catalog view shares - .one-title, .one-kicker, .one-lede, the
   status lines, the list - moved here from the seven per-view files that each carried
   its own copy. .one-title alone was defined seven times, with three different sizes and
   two different families, which is why the same heading looked like a different product
   depending on which page you were on. A per-view file now holds only what genuinely
   differs on that view. */

@layer components {

  /* The main column. Wide enough for the two-rail desk on the home page; a reading
     page narrows itself to --measure rather than the shell doing it. */
  .bh-main {
    inline-size: min(72rem, 100%);
    margin-inline: auto;
    padding-inline: var(--sp-5);
    padding-block: var(--sp-6);
  }

  .bh-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
  }

  .bh-footer__nav a {
    color: inherit;
    text-decoration: none;
  }

  .bh-footer__nav a:hover {
    color: var(--bh-chrome);
  }

  /* -------------------------------------------------------------------------
     Reading mode.

     Zero-Chrome Reading, from docs/design/03-ui-patterns.md: on an article the
     navigation stops competing with the text. The bars stay in the DOM and stay
     reachable - the tab bar is still how you leave - they are only faded until
     they are wanted.
     ------------------------------------------------------------------------- */
  .one-shell--reading .bh-topbar__read,
  .one-shell--reading .bh-footer__nav {
    display: none;
  }

  .one-shell--reading .bh-topbar {
    opacity: 0.55;
    transition: opacity var(--dur-base) var(--ease-human);
  }

  /* :focus-within is the keyboard half, and it is not optional: without it, tabbing
     into the top bar would move focus into something at 55% opacity with no visible
     change, which is a focus trap in everything but name. */
  .one-shell--reading .bh-topbar:hover,
  .one-shell--reading .bh-topbar:focus-within {
    opacity: 1;
  }

  /* -------------------------------------------------------------------------
     Headings and running text.
     ------------------------------------------------------------------------- */
  .one-title {
    margin: 0 0 var(--sp-5);
    font-family: var(--ff-editorial);
    font-size: var(--fs-h1);
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  .one-lede {
    max-inline-size: var(--measure);
    color: var(--bh-titanium);
    font-size: var(--fs-body-l);
    text-wrap: pretty;
  }

  /* The section label above a title. Ion, which is this product's single accent. */
  .one-kicker {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
    color: var(--bh-ion);
    font-size: var(--fs-caption);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  /* -------------------------------------------------------------------------
     Status lines: a seeded fixture, a service that did not answer, a draft that
     could not be published, the other language's edition.

     Not merged into .bh-empty, and the distinction is worth keeping: these are
     notes beside content that exists, where .bh-empty replaces content that does
     not.
     ------------------------------------------------------------------------- */
  .one-seeded,
  .one-gap,
  .one-draft,
  .one-edition {
    margin: 0 0 var(--sp-4);
    color: var(--bh-titanium);
    font-size: var(--fs-body-s);
  }

  .one-draft {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--bh-hairline);
    border-radius: var(--r-md);
    background: var(--bh-surface-1);
  }

  .one-draft .bh-icon { color: var(--bh-amber); }

  /* -------------------------------------------------------------------------
     The catalog list. Articles use it as written; news overrides the parts that
     make a dateline list read differently from an article grid.
     ------------------------------------------------------------------------- */
  .one-lead {
    display: grid;
    gap: var(--sp-2);
    margin-block-end: var(--sp-6);
    padding-block-end: var(--sp-5);
    border-block-end: 1px solid var(--bh-hairline);
  }

  .one-lead__title {
    margin: 0;
    max-inline-size: 28ch;
    font-family: var(--ff-editorial);
    font-size: var(--fs-h1);
    font-weight: 600;
    text-wrap: balance;
  }

  .one-lead__title a,
  .one-list__title {
    color: var(--bh-chrome);
    text-decoration: none;
  }

  .one-lead__title a:hover,
  .one-list__title:hover {
    color: var(--bh-ion);
  }

  .one-list {
    display: grid;
    gap: var(--sp-5);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .one-list__item {
    display: grid;
    gap: var(--sp-2);
    padding-block-end: var(--sp-4);
    border-block-end: 1px solid var(--bh-hairline);
  }

  .one-list__title {
    font-family: var(--ff-editorial);
    font-size: var(--fs-h3);
  }

  .one-list__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    margin: 0;
    color: var(--bh-titanium);
    font-size: var(--fs-caption);
  }

  .one-list__meta a {
    color: inherit;
    text-decoration: none;
  }

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

  /* -------------------------------------------------------------------------
     Command Deck.

     Lives here rather than in a per-view file because the deck is in the layout:
     it is on every page, so its styles belong with the rest of the shell. The
     sheet chrome itself is .bh-sheet from BH.Design; this is only the body.
     ------------------------------------------------------------------------- */
  .one-deck__form {
    display: grid;
    gap: var(--sp-3);
  }

  /* The submit button is the no-JavaScript path and the Enter key's destination.
     It is present for both, and quiet, because with results appearing as you type
     a prominent Search button reads as though nothing has happened yet. */
  .one-deck__go {
    justify-self: start;
  }

  .one-deck__body {
    display: grid;
    gap: var(--sp-1);
    margin-block-start: var(--sp-4);
  }

  .one-deck__body[aria-busy="true"] {
    opacity: 0.5;
    transition: opacity var(--dur-fast) var(--ease-human);
  }

  /* A section heading inside the deck. Two of them at most: the identifier and
     the content. */
  .one-deck__pin {
    margin: var(--sp-3) 0 var(--sp-1);
    color: var(--bh-titanium);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .one-deck__row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-block-size: var(--tap-min);
    padding-inline: var(--sp-3);
    border-radius: var(--r-sm);
    color: var(--bh-chrome);
    text-decoration: none;
    transition: background var(--dur-instant) var(--ease-human);
  }

  .one-deck__row:hover { background: var(--bh-surface-2); }

  .one-deck__row-main {
    display: grid;
    min-inline-size: 0;
    flex: 1;
  }

  .one-deck__row-title {
    font-size: var(--fs-body-s);
    font-weight: 600;
    /* One line, clipped. A wrapped title turns a jump list into a paragraph and
       the reader loses the ability to scan it. */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .one-deck__row-sub {
    color: var(--bh-titanium);
    font-family: var(--ff-evidence);
    font-size: var(--fs-micro);
  }

  /* The credential row. Ion rather than Ember: it is a destination, and Ember is
     reserved for the single primary action on a screen. */
  .one-deck__row--verify {
    border: 1px solid var(--bh-ion);
    background: var(--bh-surface-1);
  }

  .one-deck__row--verify .bh-icon { color: var(--bh-ion); }

  .one-deck__id {
    color: var(--bh-titanium);
    font-family: var(--ff-evidence);
    font-size: var(--fs-micro);
    overflow-wrap: anywhere;
  }

  .one-deck__note {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: 0;
    padding-inline: var(--sp-3);
    color: var(--bh-titanium);
    font-size: var(--fs-caption);
    text-wrap: pretty;
  }

  .one-deck__all {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-block-size: var(--tap-min);
    margin-block-start: var(--sp-2);
    padding-inline: var(--sp-3);
    border-block-start: 1px solid var(--bh-hairline);
    color: var(--bh-ion);
    font-size: var(--fs-body-s);
    font-weight: 600;
    text-decoration: none;
  }
}