/* The run page. The drawing is the page: a full-bleed viewer on the sheet
   grid, with the title block floating over its bottom-right corner, where a
   real one sits, and the zoom controls bottom-left. Below 60rem the title
   block sits under the drawing instead of over it. Before START the viewer
   holds a blurred, generic placeholder and the sealed tag. */
@layer components {
  /* The run fills the sheet below the header. */
  .sheet__main:has(> .run) {
    display: flex;
    flex-direction: column;
  }

  .run {
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .run__viewer {
    position: relative;
    block-size: clamp(16rem, 45svh, 40rem);
    overflow: hidden;
    border-block-end: var(--rule-width) solid var(--color-rule);
    background-color: var(--color-sheet);
    background-image:
      linear-gradient(var(--color-sheet-grid) var(--rule-width), transparent var(--rule-width)),
      linear-gradient(90deg, var(--color-sheet-grid) var(--rule-width), transparent var(--rule-width));
    background-size: var(--grid-size) var(--grid-size);
    color: var(--color-drawing-line);
  }

  /* The drawing's corner: the title block, and once the run is over the
     board above it. */
  .run__panel {
    display: flex;
    flex-direction: column;
    gap: calc(var(--block-space) * 0.75);
    margin: var(--block-space) calc(var(--inline-space) * 2);
    container-type: inline-size;
  }

  /* Cleared: the finished part, in its own small framed panel over the
     board, as the reward. Opaque, so the drawing doesn't show through it;
     beside the drawing it stays short, so the board keeps its room. */
  .run__render {
    display: flex;
    justify-content: center;
    border: var(--rule-width) solid var(--color-rule);
    background-color: var(--color-bar);
  }

  .run__render-image {
    max-block-size: 11rem;
    inline-size: auto;
  }

  @media (min-width: 60rem) {
    .run {
      min-block-size: 36rem;
    }

    .run__viewer {
      position: absolute;
      inset: 0;
      block-size: auto;
      border-block-end: 0;
    }

    .run__panel {
      position: absolute;
      inset-block-end: calc(var(--block-space) * 1.25);
      inset-inline-end: calc(var(--inline-space) * 2.5);
      inline-size: min(35rem, 100% - var(--inline-space) * 5);
      max-block-size: calc(100% - var(--block-space) * 2.5);
      margin: 0;
    }

    /* A tall board (the top five, the runner's row, the ask for a video)
       scrolls inside itself rather than pushing the panel past the top of
       the drawing; the title block always shows whole. */
    .run__panel > .board {
      min-block-size: 0;
      overflow-y: auto;
    }

    .run__panel > .title-block,
    .run__panel > .run__render {
      flex-shrink: 0;
    }

    .run__render-image {
      max-block-size: 6.5rem;
    }
  }

  /* Running, the block is slim (no head, two facts) and a little narrower,
     so it covers less of the drawing: .claude/DRAWINGS.md keeps that corner
     of every drawing clear for it. 30rem keeps the time beside the field. */
  @media (min-width: 60rem) {
    .run__panel:has(> .run__slim) {
      inline-size: min(30rem, 100% - var(--inline-space) * 5);
    }
  }

  /* Without JavaScript the drawing cannot be panned out from under a
     floating title block, so at any width the block sits under it. A media
     query rather than a class the controller sets, so nothing jumps on load. */
  @media (scripting: none) {
    .run:has(> .viewer) {
      .run__viewer {
        position: relative;
        block-size: clamp(16rem, 70svh, 48rem);
        border-block-end: var(--rule-width) solid var(--color-rule);
      }

      .run__panel {
        position: static;
        align-self: flex-end;
        inline-size: min(35rem, 100% - var(--inline-space) * 4);
        margin: var(--block-space) calc(var(--inline-space) * 2);
      }
    }
  }

  /* Sealed: a sheet of generic linework, blurred. Not the drawing, and
     nothing taken from it. */
  .run__placeholder {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(currentColor 0 0) 12% 18% / 16% 0.25rem no-repeat,
      linear-gradient(currentColor 0 0) 12% 24% / 22% 0.25rem no-repeat,
      linear-gradient(currentColor 0 0) 12% 30% / 19% 0.25rem no-repeat,
      linear-gradient(currentColor 0 0) 22% 72% / 34% 0.25rem no-repeat,
      linear-gradient(currentColor 0 0) 22% 46% / 0.25rem 26% no-repeat,
      linear-gradient(currentColor 0 0) 42% 46% / 0.25rem 26% no-repeat,
      linear-gradient(currentColor 0 0) 22% 46% / 20% 0.25rem no-repeat,
      linear-gradient(currentColor 0 0) 72% 30% / 0.25rem 42% no-repeat,
      linear-gradient(currentColor 0 0) 84% 30% / 0.25rem 42% no-repeat,
      linear-gradient(currentColor 0 0) 72% 30% / 12% 0.25rem no-repeat,
      linear-gradient(currentColor 0 0) 72% 72% / 12% 0.25rem no-repeat,
      linear-gradient(currentColor 0 0) 22% 80% / 34% 0.125rem no-repeat;
    filter: blur(9px) opacity(0.45);
  }

  .run__seal {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--block-space) * 0.625);
    padding: var(--block-space) calc(var(--inline-space) * 2);
    color: var(--color-ink);
    text-align: center;

    @media (min-width: 60rem) {
      padding-block-end: 12rem;
    }
  }

  .run__sealed-tag {
    padding: calc(var(--block-space) * 0.5) calc(var(--inline-space) * 1.75);
    background-color: var(--color-accent);
    color: var(--color-on-accent);
    font-size: var(--text-base);
    font-stretch: var(--stretch-wide);
    font-weight: var(--weight-heavy);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .run__seal-note {
    font-size: var(--text-sm);
  }

  /* The title block's rows: grids of cells, divided as on a drawing (a
     structural rule between rows and big cells, a hairline between facts). */
  .run__row {
    display: grid;
    border-block-end: var(--rule-width) solid var(--color-rule);

    &:last-child {
      border-block-end: 0;
    }

    .title-block__cell {
      border-block-end: 0;
    }
  }

  .run__row--head {
    grid-template-columns: minmax(0, 1fr) 9.5rem;

    > :last-child {
      border-inline-start: var(--rule-width) solid var(--color-rule);
    }
  }

  .run__title {
    font-size: var(--text-xl);
  }

  .run__grade {
    margin-block-start: calc(var(--block-space) * 0.375);
    font-weight: var(--weight-bold);
    letter-spacing: 0.1em;
  }

  .run__row--facts {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    font-size: var(--text-sm);

    .title-block__cell {
      padding-block: calc(var(--block-space) * 0.375);
    }

    .title-block__cell + .title-block__cell {
      border-inline-start: var(--rule-width) solid var(--color-hairline);
    }
  }

  .run__slim .run__row--facts {
    grid-template-columns: minmax(0, 1fr) max-content;
  }

  /* The challenge's title while the block is slim: read out, not shown. */
  .run__hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .run__guesses,
  .run__best {
    font-variant-numeric: tabular-nums;
  }

  /* Time, then the action: START (with the CAD program) or the answer. */
  .run__row--action {
    grid-template-columns: minmax(13rem, max-content);
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;

    > form {
      display: contents;
    }

    .title-block__cell + .title-block__cell,
    form .title-block__cell {
      border-inline-start: var(--rule-width) solid var(--color-rule);
    }

    .form__actions .button {
      font-size: var(--text-lg);
    }
  }

  .run__time {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: calc(var(--block-space) * 0.25);
  }

  .run__clock {
    font-size: var(--text-clock);
    font-stretch: var(--stretch-condensed);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
    line-height: var(--leading-tight);
    white-space: nowrap;
  }

  /* A narrow title block (a phone): two facts a row (the PB, fifth, has
     one to itself), and the time over the action. */
  @container (width < 30rem) {
    .run__row--head {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .run__row--facts {
      grid-template-columns: repeat(2, minmax(0, 1fr));

      .title-block__cell:nth-child(odd) {
        border-inline-start: 0;
      }

      .title-block__cell:nth-child(n + 3) {
        border-block-start: var(--rule-width) solid var(--color-hairline);
      }

      .run__best {
        grid-column: 1 / -1;
      }
    }

    .run__row--action {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-auto-flow: row;

      .run__time,
      .answer {
        grid-column: 1 / -1;
      }

      .title-block__cell + .title-block__cell,
      form .title-block__cell {
        border-inline-start: 0;
        border-block-start: var(--rule-width) solid var(--color-rule);
      }

      form .title-block__cell + .title-block__cell {
        border-inline-start: var(--rule-width) solid var(--color-rule);
      }
    }
  }

  /* The action cell: the answer field, then CLEARED. */
  .answer {
    display: flex;
    flex-direction: column;
    gap: calc(var(--block-space) * 0.375);

    &:has(.answer__cleared) {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: var(--block-space) calc(var(--inline-space) * 1.5);
    }
  }

  .answer__form {
    display: contents;
  }

  .answer__row {
    display: flex;
    gap: var(--inline-space);

    .input {
      flex: 1 1 8ch;
      min-inline-size: 0;
    }
  }

  .answer__result {
    color: var(--color-ink-dim);
    font-size: var(--text-sm);

    &:empty {
      display: none;
    }
  }

  .answer__message {
    color: var(--color-behind);
  }

  .answer__cleared {
    inline-size: fit-content;
    font-size: var(--text-lg);
    font-stretch: var(--stretch-wide);
    font-weight: var(--weight-heavy);
    letter-spacing: var(--label-tracking);
    line-height: var(--leading-tight);
    text-transform: uppercase;
  }
}