/* The gear section. Everything else it uses comes from application.css. */

.gear-total { display: flex; align-items: baseline; gap: .4rem; margin: 0 0 1rem; }
.gear-total .linkish { margin-left: auto; }
.gear-total strong { font-variant-numeric: tabular-nums; }

/* The widest list has nine columns; it scrolls sideways rather than squeezing. */
.gear-table { overflow-x: auto; }

.gear-form .check { display: flex; align-items: center; gap: .5rem; }
.gear-form .check label { margin: 0; }

.gear-photos { margin-top: 2rem; }
.gear-photos.dropping { outline: 2px dashed var(--accent); outline-offset: .5rem; border-radius: 4px; }
.gear-photos h2 { font-size: 1rem; margin: 0 0 .6rem; }
.gear-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .75rem; }

/* The trash sits on the photo rather than under it, so a row of photos stays a row of photos. */
.gear-photo { position: relative; margin: 0; }
.gear-photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; background: var(--line); }
.gear-photo form { position: absolute; right: 0; bottom: 0; margin: 0; }
/* Sits in the corner of the picture, out of the way until it is wanted. */
.gear-photo .icon-button {
  width: 1.6rem;
  height: 1.6rem;
  border: none;
  border-radius: 4px 0 4px 0;
  background: rgba(255, 255, 255, .55);
}
.gear-photo .icon-button:hover,
.gear-photo .icon-button:focus-visible { background: rgba(255, 255, 255, .95); }
.gear-photo .icon { width: .8rem; height: .8rem; }

.gear-photo-large { display: block; max-width: 30rem; width: 100%; height: auto; border-radius: 4px; }
.gear-photo-items { margin-top: 1.5rem; }
.gear-photo-items h2 { font-size: 1rem; margin: 0 0 .6rem; }
.gear-photo-item-list { list-style: none; margin: 0; padding: 0; }
.gear-photo-item-list li { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .35rem 0; border-bottom: 1px solid var(--line); }
.gear-photo-item-list form { margin: 0; }
/* The items a photo is of run on together, each with its own way off. */
.gear-photo-item-list.compact { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.gear-photo-item-list.compact li { justify-content: flex-start; gap: .25rem; padding: 0; border-bottom: none; }
.gear-photo-item-list.compact .icon-button { width: 1.4rem; height: 1.4rem; border: none; }
.gear-photo-item-list.compact .icon { width: .75rem; height: .75rem; }
.gear-photo-search { margin-top: 1rem; max-width: 30rem; }
.gear-photo-matches { display: block; max-width: 30rem; }

.gear-comments { margin-top: 2rem; max-width: 34rem; }
.gear-comments h2 { font-size: 1rem; margin: 0 0 .6rem; }
.gear-comment { border-bottom: 1px solid var(--line); padding: .6rem 0; }
.gear-comment p { margin: 0; white-space: pre-line; }
.gear-comment-meta { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--muted); }
.gear-comment-meta form { margin: 0; }
.gear-comments form.gear-form { margin-top: 1rem; }

/* On phones a row is two lines, as on the album list: the name and the one column
   that matters most to the list, then a few of the others beneath. */
@media (max-width: 680px) {
  .gear-table { overflow-x: visible; }

  #gear-items th:not(.name, .aside),
  #gear-items td:not(.name, .aside, .row-meta) { display: none; }

  #gear-items,
  #gear-items thead,
  #gear-items tbody { display: block; }
  #gear-items tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    row-gap: .1rem;
    padding: .4rem 0;
    border-bottom: 1px solid var(--line);
  }
  #gear-items th,
  #gear-items td { padding: 0 .5rem; border-bottom: none; }
  #gear-items .aside { text-align: right; }
  #gear-items td.row-meta {
    display: block;
    grid-column: 1 / -1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #gear-items td.row-meta:empty { display: none; }
}