/*
 * Librarium Militaris: the detail bar.
 *
 * The bar every page that is not the archive itself wears: the way back on one
 * side, the archive's two asks on the other, and the wordmark centred over both.
 */

@layer components {
  .detailbar {
    position: sticky;
    top: 0;
    z-index: var(--z-bar);
    background-color: var(--color-canvas);
    border-bottom: 1px solid var(--color-border);
    /* The one edge in the accent: it marks the bar as the page's own rather
       than as the top of the plate below it. */
    border-left: 3px solid var(--color-accent);
    box-shadow: var(--shadow-bar);
  }

  /* It wraps rather than crushes: on a narrow screen the actions drop to a line
     of their own and the bar simply stands taller. */
  .detailbar__inner {
    position: relative;
    max-width: var(--shell);
    margin: 0 auto;
    padding: var(--space-10) var(--gutter);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-10) var(--space-16);
  }

  .detailbar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin-left: auto;

    /* On a phone the sign-up rides up here alone. Submitting a report is the
       footer's business at that width. */
    & .btn-submit { display: none; }

    @media (min-width: 768px) {
      & .btn-submit { display: inline-block; }
    }
  }

  /* Smaller here than anywhere else, which is what lets the sign-up share one
     line with the back link rather than pushing the bar to a second row. The
     masthead states the same exception for the same reason. */
  @media (max-width: 767px) {
    .detailbar__actions .btn-signup {
      --btn-font-size: var(--text-11);
      --btn-padding: var(--space-6) var(--space-10);
      --btn-icon-size: var(--space-14);
    }
  }

  .backlink {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex: none;
    color: var(--color-ink-dim);
    font-family: var(--font-mono);
    font-size: var(--text-12);
    line-height: var(--leading-16);
    letter-spacing: var(--tracking-2xs);
    text-transform: uppercase;
    white-space: nowrap;
    transition: color var(--transition-fast);

    &:hover { color: var(--color-ink-bright); }

    &:focus-visible {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }
  }

  /* The arrow leads the way it points. */
  .backlink__arrow {
    transition: transform var(--transition-fast);

    .backlink:hover & { transform: translateX(calc(var(--space-4) * -1)); }
  }

  .backlink__label {
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition-fast);

    .backlink:hover & { border-bottom-color: var(--color-ink-bright); }
  }

  /* Dead centre on the bar, which its two neighbours cannot give it: the back
     link is a third of the width of the calls to action. Taking it out of the
     flow is what lets it sit in the middle of the bar rather than in the middle
     of what is left over.

     It waits for a wide screen because a centred thing needs clearance on both
     sides, and below this the calls to action reach in far enough to meet it.
     The back link is the one that has to survive a narrow screen: it is the way
     out of the page, where the wordmark is decoration the footer repeats. */
  .detailbar__wordmark {
    display: none;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-16);
    line-height: var(--leading-28);
    color: var(--color-ink-bright);
    text-transform: uppercase;
    letter-spacing: var(--tracking-xl);
    white-space: nowrap;

    @media (min-width: 1024px) {
      display: block;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: var(--text-18);
    }
  }
}