/* nle — cards: the media bin and the shots gallery.
   One section of the old nle.css. The pieces load in filename order
   and that order is the cascade, so do not rearrange them. */
/* ---------- cards: the media bin and the shots gallery ---------- */

html.desktop.nle-on .nle-cards {
  flex: 1; min-height: 0; overflow: auto; padding: 8px;
  /* 78px, not 96: at the Shots column's default 190px, 96 leaves room for one
     card per row and half a column of air. This gives two, which is what a
     grid of pictures is for. */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(78px, 100%), 1fr)); gap: 6px;
  align-content: start;
  /* AND THE ROW IS AS TALL AS THE PICTURE IN IT.

     A card is a 16:9 thumbnail with a name under it, and the thumbnail takes
     its height from `aspect-ratio` — that is, from its own width, which is
     the width of the column. With two or more columns the browser works that
     out in time to size the row and every card is the shape it should be.
     Drop to ONE column — a narrow pane with the card size turned up — and it
     does not: the ratio box contributes nothing to the row, the row comes out
     as tall as the file name, and `overflow: hidden` on the card crops the
     picture to a letterbox strip. Which is exactly what it looked like: a
     browser full of wide black slots.

     `max-content` sizes the row from the item's whole content rather than its
     minimum, which is what the row was always meant to be. Measured at 760,
     420, 300, 240 and 200 across: identical at the widths that already
     worked, correct at the ones that did not. */
  grid-auto-rows: max-content;
}
html.desktop.nle-on .nle-cards .nle-todo { grid-column: 1 / -1; }
html.desktop.nle-on .nle-card {
  border: 1px solid var(--border); border-radius: 3px; overflow: hidden;
  background: var(--card); cursor: grab;
}
html.desktop.nle-on .nle-card:hover { border-color: var(--accent); }
html.desktop.nle-on .nle-card.dragging { opacity: .45; }
html.desktop.nle-on .nle-card-th {
  position: relative; aspect-ratio: 16 / 9; background: #000 center/cover no-repeat;
}
html.desktop.nle-on .nle-card-tag {
  position: absolute; right: 3px; bottom: 3px;
  background: rgba(0, 0, 0, .74); border-radius: 3px; padding: 1px 4px;
  font-size: 8.5px; font-weight: 700; color: #dcdce2; font-variant-numeric: tabular-nums;
}
/* A FOLDER CARD CARRIES A MARK, NOT A WORD.

   It used to say FOLDER across the empty frame where a thumbnail would be,
   which said a second time what the absence of a thumbnail already said, in
   the loudest place on the card. The mark is the same size on every card and
   reads at a glance down a column; the name underneath is the thing actually
   being read.

   Here rather than beside the other .nle-fsdir rules, and with the same
   `html.desktop.nle-on` in front of it, because the pill it is undoing is
   declared in this file — a rule in the earlier one loses on both count and
   order and quietly does nothing. */
html.desktop.nle-on .nle-card-tag.fold {
  position: static;
  background: none; padding: 0; border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  width: 34%; max-width: 30px; min-width: 14px;
  color: var(--text-faint);
}
html.desktop.nle-on .nle-card-tag.fold svg { width: 100%; height: auto; display: block; }
html.desktop.nle-on .nle-card:hover .nle-card-tag.fold { color: var(--text-dim); }
html.desktop.nle-on .nle-card-name {
  padding: 4px 5px 5px; font-size: 9.5px; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.desktop.nle-on .nle-head-btn {
  background: none; border: 1px solid var(--border); border-radius: 3px;
  color: var(--text-faint); font-family: inherit; font-size: 11px; line-height: 1;
  padding: 2px 6px; cursor: pointer;
}
html.desktop.nle-on .nle-head-btn:hover { color: var(--accent); border-color: var(--accent); }
html.desktop.nle-on .nle-media-foot { flex: none; padding: 0 9px 9px; }
html.desktop.nle-on #nle-pane-media.over { box-shadow: inset 0 0 0 2px var(--accent); }