/*
 * Librarium Militaris: the page skeleton.
 *
 * The three things every page is built on, and nothing that belongs to a
 * component: the veil over the whole document, the recessed plate the regions
 * are stamped from, and the shell the archive itself sits in.
 */

@layer layout {
  /* Film-grain veil over the whole page. */
  .grain {
    position: fixed;
    inset: 0;
    z-index: var(--z-grain);
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E");
  }

  /* Recessed metal, worn by anything that reads as a plate bolted to the page:
     the masthead, the footer, the sign-up dialog. */
  .panel {
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-plate);
  }

  /* The heading every plate leads with: the report page's sections, and
     anything else that wears .panel and needs a name on it. */
  .panel-heading {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    color: var(--color-ink-bright);
    font-family: var(--font-heading);
    font-size: var(--text-18);
    line-height: var(--leading-28);
    text-transform: uppercase;
    letter-spacing: var(--tracking-xl);
  }

  .panel-heading__icon {
    display: flex;
    flex: none;

    & svg {
      width: var(--space-20);
      height: var(--space-20);
    }
  }

  .panel-heading__icon--danger { color: var(--color-danger); }
  .panel-heading__icon--accent { color: var(--color-accent); }

  /* The archive's own column. Wide, because the grid it holds goes four across
     on a large screen and the cards are what the page is for. */
  .archive {
    max-width: var(--shell);
    margin: 0 auto;
    padding: var(--space-32) var(--gutter);
    position: relative;
    z-index: var(--z-raised);
    min-height: 50vh;
  }

  /* Holds the hidden inputs the search box and the sort select submit
     alongside. Both sit elsewhere in the page and reach it by form=. */
  #archive-filters {
    display: none;
  }
}