@layer components {
  /* The admin pages: the queue, one order at a time, the funnel and the
   * problems. Works on a phone. */
  .flow.admin-page {
    gap: 20px;
  }

  .admin-nav {
    display: flex;
    font-weight: 600;
    gap: 20px;
  }

  .admin-flash {
    background: var(--color-warm);
    border-radius: 10px;
    font: var(--text-small);
    padding: 10px 14px;
  }

  .admin-flash--alert {
    box-shadow: inset 3px 0 0 var(--color-ink);
    font-weight: 600;
  }

  .admin-search {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .admin-search__label {
    font-weight: 600;
  }

  .admin-search__field {
    background: var(--color-surface);
    border: 1px solid var(--color-muted);
    border-radius: 10px;
    flex: 1 1 220px;
    font: inherit;
    min-block-size: 40px;
    padding: 6px 12px;
  }

  .admin-history__title {
    font: 600 17px/24px var(--font-text);
  }

  .admin-history__list {
    display: flex;
    flex-direction: column;
    font: var(--text-small);
    gap: 4px;
    list-style: none;
    padding: 0;
  }

  .admin-queue {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .admin-queue__link {
    background: var(--color-surface);
    border: 1px solid var(--color-hairline);
    border-radius: 12px;
    color: inherit;
    display: grid;
    gap: 2px;
    padding: 12px 16px;
    text-decoration: none;

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

  .admin-queue__reference {
    font: 600 17px/22px var(--font-mono);
  }

  .admin-queue__kind,
  .admin-queue__time {
    color: var(--color-muted);
    font: var(--text-small);
  }

  .admin-order {
    display: grid;
    gap: 24px;

    @media (min-width: 900px) {
      align-items: start;
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }
  }

  .admin-order__photos,
  .admin-order__actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-inline-size: 0;
  }

  /* Each photo keeps its own height: a filler under the square finished file
   * would read as part of it. */
  .admin-photos {
    align-items: start;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-photos__photo {
    background: var(--color-placeholder);
    border: 1px solid var(--color-hairline);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
  }

  .admin-photos__image {
    block-size: auto;
    inline-size: 100%;
  }

  .admin-photos__tab {
    background: var(--color-ink);
    border-start-end-radius: 8px;
    color: var(--color-on-ink);
    font: 500 11px/16px var(--font-mono);
    inset-block-end: 0;
    inset-inline-start: 0;
    letter-spacing: 0.06em;
    padding: 5px 10px;
    position: absolute;
    text-transform: uppercase;
  }

  .admin-edge {
    background: var(--color-borderline-tint);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
  }

  .admin-edge__title {
    color: var(--color-borderline);
    font-weight: 600;
  }

  .admin-edge__zoom {
    border-radius: 8px;
    max-block-size: 420px;
    overflow: auto;
  }

  .admin-edge__image {
    inline-size: 200%;
    max-inline-size: none;
  }

  .admin-measures {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;

    div {
      display: grid;
      gap: 10px;
      grid-template-columns: 110px minmax(0, 1fr);
    }

    dt {
      font-weight: 600;
    }

    dd {
      color: var(--color-muted);
      font: 500 13px/20px var(--font-mono);
      margin: 0;
    }
  }

  .admin-actions {
    form {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    label {
      font-size: 15px;
      font-weight: 600;
    }
  }

  .admin-actions__retake {
    border-block-start: 1px solid var(--color-hairline);
    padding-block-start: 14px;
  }

  .admin-actions__button {
    inline-size: 100%;
  }

  .admin-actions__select,
  .admin-actions__note {
    background: var(--color-surface);
    border: 1px solid var(--color-muted);
    border-radius: 10px;
    font: inherit;
    min-block-size: 44px;
    padding: 8px 12px;
  }

  .admin-judge__title {
    font: 600 17px/24px var(--font-text);
  }

  .admin-judge__list {
    display: flex;
    flex-direction: column;
    font: var(--text-small);
    gap: 6px;
    list-style: decimal;
    padding-inline-start: 20px;
  }

  .admin-backtrace {
    background: var(--color-surface);
    border: 1px solid var(--color-hairline);
    border-radius: 12px;
    font: 500 12px/18px var(--font-mono);
    overflow-x: auto;
    padding: 12px 14px;
    white-space: pre;
  }

  .admin-funnel {
    overflow-x: auto;
  }

  .admin-funnel__table {
    border-collapse: collapse;
    font: 500 13px/18px var(--font-mono);
    min-inline-size: 760px;

    th,
    td {
      border-block-end: 1px solid var(--color-hairline);
      padding: 6px 10px;
      text-align: end;
    }

    th:first-child {
      text-align: start;
    }

    thead th {
      color: var(--color-muted);
      font: 600 12px/16px var(--font-text);
    }
  }
}