/* The library: the weekly's bar (while one is open), a bar with the grade
   filter, then a grid of mini sheets, one
   per challenge. A card is a small drawing sheet with no drawing on it (it is
   sealed until START): its number in the corner, and a strip of title-block
   cells along the bottom (title and record, then grade and run count). */
@layer components {
  /* Clipped, so the grid's last column tucks its right hairline under the
     sheet's frame instead of doubling it. */
  .library {
    overflow: clip;
  }

  /* The weekly: a thin bar across the top, its tag on red. The countdown is
     the server's, rendered once; nothing ticks it. */
  .library__weekly {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--block-space) * 0.5) calc(var(--inline-space) * 2);
    padding: calc(var(--block-space) * 0.75) calc(var(--inline-space) * 2.5);
    border-block-end: var(--rule-width) solid var(--color-rule);
    background-color: var(--color-inset);
    text-decoration: none;

    &:hover {
      color: inherit;

      .library__weekly-title {
        color: var(--color-accent-hover);
      }
    }

    &:focus-visible {
      outline-offset: calc(var(--rule-width) * -3);
    }
  }

  .library__weekly-tag {
    padding: calc(var(--block-space) * 0.25) var(--inline-space);
    background-color: var(--color-accent);
    color: var(--color-on-accent);
    font-size: var(--text-xs);
    font-weight: var(--weight-heavy);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .library__weekly-title {
    font-size: var(--text-xl);
    font-stretch: var(--stretch-condensed);
    font-weight: var(--weight-heavy);
    line-height: var(--leading-tight);
    text-transform: uppercase;
  }

  .library__weekly-note {
    color: var(--color-ink-dim);
    font-size: var(--text-sm);
  }

  /* The pitch takes the slack, so the countdown sits at the end. */
  .library__weekly-note--pitch {
    flex-grow: 1;
  }

  .library__weekly-countdown {
    color: var(--color-ink);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .library__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    border-block-end: var(--rule-width) solid var(--color-rule);
  }

  .library__title {
    display: flex;
    align-items: center;
    padding: calc(var(--block-space) * 0.5) calc(var(--inline-space) * 2.5);
    border-inline-end: var(--rule-width) solid var(--color-hairline);
    font-size: var(--text-lg);
  }

  .library__grades {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }

  .library__grades-label {
    display: flex;
    align-items: center;
    padding-inline: calc(var(--inline-space) * 2.5) calc(var(--inline-space) * 1.5);
  }

  /* A grade: a cell between hairlines, the current one on the bar's colour
     and underlined in red, as the active nav tab is. */
  .library__grade {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: 2.75rem;
    min-inline-size: 2.75rem;
    padding-inline: calc(var(--inline-space) * 1.5);
    border-inline-start: var(--rule-width) solid var(--color-hairline);
    color: var(--color-ink-dim);
    font-size: var(--text-xs);
    font-stretch: var(--stretch-wide);
    font-weight: var(--weight-bold);
    letter-spacing: var(--label-tracking);
    text-decoration: none;
    text-transform: uppercase;

    &:last-child {
      border-inline-end: var(--rule-width) solid var(--color-hairline);
    }

    &[aria-current] {
      background-color: var(--color-bar);
      color: var(--color-ink);
      box-shadow: inset 0 calc(var(--rule-width) * -3) 0 var(--color-accent);
    }

    &:focus-visible {
      outline-offset: calc(var(--rule-width) * -4);
    }
  }

  .library__sort {
    display: flex;
    align-items: center;
    margin-inline-start: auto;
    padding: calc(var(--block-space) * 0.5) calc(var(--inline-space) * 2.5);
  }

  /* As many columns as fit, one on a phone. Each card draws its own right
     and bottom hairlines, and the grid hangs a rule's width past the clip. */
  .library__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    margin-inline-end: calc(var(--rule-width) * -1);
    padding: 0;
    list-style: none;
  }

  .library__empty {
    padding: calc(var(--block-space) * 2) calc(var(--inline-space) * 2.5);
    color: var(--color-ink-dim);
    font-size: var(--text-sm);
  }

  .library-card {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    border-inline-end: var(--rule-width) solid var(--color-hairline);
    border-block-end: var(--rule-width) solid var(--color-hairline);
    text-decoration: none;

    &:hover {
      background-color: var(--color-inset);
      color: inherit;

      .library-card__title {
        color: var(--color-accent-hover);
      }
    }

    &:focus-visible {
      outline-offset: calc(var(--rule-width) * -3);
    }
  }

  /* The empty sheet above the strip, tall enough that the grid reads as a
     stack of drawings. It keeps its height, so the strips line up across a
     row and a title that wraps runs on downwards. */
  .library-card__sheet {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: start;
    min-block-size: 7rem;
    padding: calc(var(--block-space) * 0.75) calc(var(--inline-space) * 1.75);
  }

  /* The part, drawn into the empty sheet under its number. Decorative: the
     title names it. */
  .library-card:has(.library-card__render) .library-card__sheet {
    aspect-ratio: 4 / 3;
  }

  .library-card__render {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    padding: calc(var(--block-space) * 1.75) calc(var(--inline-space) * 2) calc(var(--block-space) * 0.5);
    object-fit: contain;
  }

  .library-card__number,
  .library-card__tags {
    position: relative;
  }

  .library-card__number {
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
  }

  .library-card__tags {
    display: flex;
    gap: var(--inline-space);
  }

  .library-card__weekly {
    color: var(--color-accent);
    font-size: var(--text-xs);
  }

  /* Cleared: orange, as the canvas has it. */
  .library-card__done {
    color: var(--color-behind);
    font-size: var(--text-xs);
  }

  .library-card__name {
    flex-grow: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    border-block-start: var(--rule-width) solid var(--color-rule);
  }

  /* One line, cut off at the record's cell: every strip is the same height.
     The whole title is still in the link's text and on the challenge page. */
  .library-card__title {
    overflow: hidden;
    padding: calc(var(--block-space) * 0.5) calc(var(--inline-space) * 1.75);
    border-inline-end: var(--rule-width) solid var(--color-hairline);
    font-size: var(--text-lg);
    line-height: 1.05;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .library-card__record {
    display: flex;
    flex-direction: column;
    justify-content: start;
    padding: calc(var(--block-space) * 0.375) calc(var(--inline-space) * 1.5);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-bold);
    white-space: nowrap;
  }

  .library-card__foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--inline-space);
    padding: calc(var(--block-space) * 0.375) calc(var(--inline-space) * 1.75);
    border-block-start: var(--rule-width) solid var(--color-hairline);
    color: var(--color-ink-dim);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
  }

  .library-card__grade {
    letter-spacing: 0.1em;
  }
}