/* Chroma Noir — Studio, photographs
   ---------------------------------------------------------------------------
   ONLY WHAT IS GENUINELY NEW. studio.css is loaded whole before this file and
   carries every token, every button, the cards, the sheets and the dialogs; a
   set card IS a film card. What is added here is the thumbnail strip on the
   card, the image grid inside the sheet, and the one question a drop asks.

   No new colour and no new type size. The gold accent is already spent on
   "live" and on the thing the pointer is on, so the cover marker below borrows
   it rather than introducing a second accent.
*/

/* ---- one column fewer than a film ---------------------------------------- */

/* studio.css lays a card out as FOUR columns — a drag handle, the thumbnail,
   the body and the actions — because a film can be dragged into a running
   order. A set card has no handle: sets are not reorderable from this page
   yet, and an invisible button that does nothing is worse than a column that
   is not there.
   Without this the three children land in the first three columns, so the
   thumbnail sits in the handle's `auto` slot and the whole body is squeezed
   into the 176px one. The override is per breakpoint because studio.css
   redefines the row at both of its own. */
.film__row { grid-template-columns: 176px minmax(0, 1fr) auto; }

@media (min-width: 1100px) {
  .film__row { grid-template-columns: 132px minmax(0, 1fr); }
  /* One column fewer, so the actions span one line fewer too. */
  .film__acts { grid-column: 1 / 3; }
}

@media (max-width: 900px) {
  .film__row { grid-template-columns: 116px minmax(0, 1fr); }
  .film__acts { grid-column: 1 / 3; }
}

/* AND AGAIN AT THE PHONE WIDTH, which looks redundant and is not: studio.css
   narrows the still to 96px at 560 and this file is read AFTER it, so the
   116px rule above would win on source order for the whole of the phone range
   and leave a set card with a wider still than a film card. */
@media (max-width: 560px) {
  .film__row { grid-template-columns: 96px minmax(0, 1fr); }
}

/* ---- the strip on a set card --------------------------------------------- */

/* Up to six thumbs and a button, where a film card has nothing.
   FLEX WITH MARGINS, not grid with a gap and not flex with a gap. Six fixed
   grid columns left three empty 44px slots on a set of three and pushed the
   button into a narrow last column, where its label wrapped onto two lines.
   And the gap property is avoided in flex on this subdomain because the wall
   television runs Chrome 79, which has grid gap (Chrome 66) but not flex gap
   (Chrome 84) — this page is desktop-only, but the two stylesheets are read
   together and a rule that breaks over there is a rule somebody copies. */
.strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 10px 0 2px;
}

.strip__i {
  display: block;
  flex: 0 0 auto;
  width: 44px;
  height: 30px;
  margin: 0 6px 6px 0;
  overflow: hidden;
  border-radius: 2px;
  background: var(--surface2);
  border: 1px solid var(--rule);
}

.strip__i img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Grayscale on the card, in colour in the sheet. The card is a list to scan;
     the sheet is where the photographs are the subject. */
  filter: grayscale(1);
  opacity: 0.85;
}

.strip__i.cover { border-color: rgba(201, 161, 74, 0.55); }
.strip__i.cover img { filter: none; opacity: 1; }

.strip__more {
  flex: 0 0 auto;
  margin: 0 0 6px 6px;
  white-space: nowrap;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--rule2);
  cursor: pointer;
}

.strip__more:hover,
.strip__more:focus-visible { color: var(--ink); text-decoration-color: var(--gold); }

/* A set with nothing in it still has a row, so the button is reachable. */
.strip:empty { display: none; }

/* ---- the question a drop asks -------------------------------------------- */

.ask2 {
  margin: 14px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--rule2);
  border-radius: 3px;
  background: var(--surface);
}

.ask2__n { margin: 0 0 12px; font-size: 14px; color: var(--ink); }

.ask2__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* No flex gap — see the note on .strip. Margins instead, so the row survives
   an older engine. */
.ask2__row > * { margin: 0 10px 0 0; }
.ask2__row > *:last-child { margin-right: 0; }

.ask2__sel { min-width: 260px; max-width: 100%; }

.ask2__hint { margin: 10px 0 0; font-size: 12px; color: var(--faint); }

/* ---- the image grid inside the sheet ------------------------------------- */

.igrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px;
}

.icell {
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 8px;
  background: var(--surface);
  /* The drop mark is a LEFT edge rather than a top edge: in a grid, "before
     this one" is horizontal. A transparent border of the same width is on it
     at rest so nothing shifts by 2px when the mark appears. */
  border-left: 2px solid transparent;
}

.icell.drop-t { border-left-color: var(--gold); }
.icell.drag { opacity: 0.4; }
.icell.is-cover { border-color: rgba(201, 161, 74, 0.45); }

.icell__pic {
  position: relative;
  display: block;
  width: 100%;
  /* 3:2, the shape most photographs are. Behind @supports because Chrome 79
     does not have aspect-ratio and would give this no height at all. */
  height: 120px;
  overflow: hidden;
  border-radius: 2px;
  background: #000;
  cursor: grab;
}

@supports (aspect-ratio: 3 / 2) {
  .icell__pic { height: auto; aspect-ratio: 3 / 2; }
}

.icell__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.icell__pic:active { cursor: grabbing; }

.icell__n {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 2px 5px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.66);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.icell__cap {
  width: 100%;
  margin: 8px 0 8px;
  padding: 5px 7px;
  border: 1px solid transparent;
  border-bottom-color: var(--rule);
  border-radius: 2px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}

.icell__cap::placeholder { color: var(--faint); }
.icell__cap:hover { border-bottom-color: var(--rule2); }
.icell__cap:focus { outline: none; border-color: var(--rule2); background: var(--surface2); }

.icell__acts { display: flex; flex-wrap: wrap; }
.icell__acts > * { margin: 0 6px 0 0; }
.icell__acts > *:last-child { margin-right: 0; }

/* The pressed state the Featured pill already uses, borrowed rather than
   invented — and disabled, because a cover that is already the cover is not
   an action. */
.btn--cover[aria-pressed="true"] {
  color: var(--gold);
  border-color: rgba(201, 161, 74, 0.45);
}

.btn--cover[aria-pressed="true"]:disabled { opacity: 1; cursor: default; }

/* ---- a set card's cover thumbnail ---------------------------------------- */

/* studio.css sizes .film__thumb for a 16:9 poster and puts .film__dur in its
   corner; both are reused as they are. The only addition is the fallback for
   a set with no photographs in it yet, which a film never has. */
.film__thumb .none {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

@media (max-width: 720px) {
  .strip__i { width: 40px; height: 27px; }
  .igrid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ---- the phone and the tablet -------------------------------------------- */
/* studio.css carries the whole of this pass — the bar, the card, the More
   sheet, the 44px targets and the 16px input floor. What is left here is the
   four rules that have to live in THIS file because it is read second and
   would otherwise override the shared ones on source order alone.

   The breakpoints are studio.css's own, listed in the comment block above its
   narrow section. Nothing new is introduced here. */

@media (hover: none) {
  /* Dragging a cell to reorder the set is native HTML5 drag-and-drop, which
     does not fire on a touchscreen in any mobile browser. So the grab cursor
     goes and a line above the grid says where reordering lives — choosing the
     cover and typing a caption both still work, which is most of what this
     sheet is for. */
  .icell__pic { cursor: auto; }
  .igrid__note { display: block; }
}

@media (pointer: coarse) {
  /* The 16px floor. A 13px caption field is the one input in this Studio that
     studio.css cannot reach: it is declared here, after the shared rule. */
  .icell__cap { font-size: 16px; min-height: 44px; }
  /* "All 24 photographs" is a 12px text link and the way into the set. */
  .strip__more { min-height: 44px; display: inline-flex; align-items: center; }
}