/* AdEQ — the Media tab's own stylesheet.
 *
 * The third wall, after screen-script.css and screen-form.css, and written for
 * the same reason: every rule here is under [data-screen="client"] .media-*,
 * so nothing in it can reach the Work table, the profile board or any other
 * screen that happens to share a class name.
 *
 * WHAT THIS SCREEN DECIDES ALONE is the grid: how wide a tile is, how a
 * picture sits in its frame, and what is printed under it. Everything else it
 * uses — chips, popovers, the toolbar, the colour tokens — is app.css, which
 * is why this reads as the same product as the table beside it.
 */

/* A GRID THAT FILLS THE ROW RATHER THAN COUNTING COLUMNS.
   auto-fill with a floor means four across on a laptop and two on a narrow
   window without a media query deciding where those numbers change. 240px is
   the width at which a 9:16 story is still judgeable; below it a creative is a
   postage stamp and the tab has stopped doing its job. */
[data-screen="client"] .media-grid {
  display: grid;
  /* 260, not 240: the card now spends 28px of its width on its own padding, so
     the floor has to rise by the same amount or the picture inside it shrinks
     below the size at which a 9:16 story is judgeable. */
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: var(--s-2);
  margin: var(--s-2) 0 0;
}

/* A REAL CARD, WITH ROOM IN IT. Franz, 2026-09-23: "the cards arent good need
   better padding all around".
   It was a bare stack — picture, then text, hard against the grid gap on every
   side — so two tiles read as one block of content and nothing said where one
   ad stopped. Now it has its own ground, its own edge and 14px on all four
   sides, and the gap between cards is space BETWEEN things rather than the only
   separation there is. */
[data-screen="client"] .media-tile {
  display: flex; flex-direction: column; gap: var(--s-1);
  min-width: 0;
  padding: var(--s-2);
  background: var(--card, var(--paper));
  border: 1px solid var(--rule); border-radius: var(--r-lg, 12px);
}
[data-screen="client"] .media-tile:hover { border-color: var(--ink-soft); }

/* WHAT IT IS, AND WHEN — across the top, with the date on the right.
   `baseline` rather than `center` so the small-caps badge and the date sit on
   one line rather than each floating in its own box. */
[data-screen="client"] .media-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-1);
}
[data-screen="client"] .media-when {
  font-size: 12px; color: var(--mute); white-space: nowrap; flex: none;
}

/* THE FRAME HOLDS THE SHAPE, AND THE PICTURE IS CONTAINED IN IT.
   `object-fit: contain` on a neutral ground, never `cover`: a 9:16 and a 1:1
   are different objects and cropping both into one box is the grid lying about
   the work. The frame takes the row's own ratio (set inline, since only the row
   knows it) so forty tiles do not reflow as their images arrive. */
[data-screen="client"] .media-shot {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 1 / 1;
  padding: 0; border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--sunk); overflow: hidden; cursor: pointer;
}
[data-screen="client"] .media-shot:hover { border-color: var(--ink-soft); }
[data-screen="client"] .media-img,
[data-screen="client"] .media-canvas {
  max-width: 100%; max-height: 100%;
  object-fit: contain; display: block;
}
/* A row whose picture was never drawn, or whose bytes are gone. It keeps its
   frame and says which, because "no picture yet" is a finishable state and the
   one tile in the grid most worth finding. */
[data-screen="client"] .media-none {
  font-size: 12.5px; color: var(--mute); padding: var(--s-1h); text-align: center;
}
[data-screen="client"] .media-tile.is-gone .media-shot { opacity: .55; }

/* THE NAME IS A BUTTON AND LOOKS LIKE TEXT. It wraps to two lines and then
   stops: a title long enough for four lines pushes every tile in its row down
   and turns the grid into a staircase. */
[data-screen="client"] .media-name {
  background: none; border: 0; padding: 0; margin: 0;
  font: 500 13px/1.35 var(--font-body); color: var(--ink);
  text-align: left; cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
[data-screen="client"] .media-name:hover { color: var(--accent); }

[data-screen="client"] .media-marks { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: -2px; }

/* AD OR CREATIVE, SAID ONCE, IN THE ONE PLACE THE DIFFERENCE MATTERS.
   An ad is also in Work; a creative is only here. The accent marks the one
   that is only here, because that is the fact this tab exists to carry — and
   it is a tint, not one of the eight Plutchik colours, which are reserved for
   emotion and never used as chrome. */
[data-screen="client"] .media-kind,
[data-screen="client"] .media-chip {
  font-size: 11px; line-height: 1.6; padding: 1px var(--s-1);
  border: 1px solid var(--rule); border-radius: 999px; color: var(--mute);
}
[data-screen="client"] .media-kind.is-creative {
  border-color: var(--accent-soft, var(--accent)); color: var(--accent);
}

[data-screen="client"] .media-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-1);
  /* A hairline above the last row, so the card ends on something rather than
     trailing off. It is the card's own rule, inset by nothing: the padding
     already holds it off the edge. */
  padding-top: var(--s-1); border-top: 1px solid var(--rule-faint, var(--rule));
  margin-top: auto;
}

/* ONE BUTTON FOR EVERY VERB. Forty tiles with four buttons each is a hundred
   and sixty controls on one screen, so the verbs live behind this and the tile
   stays a picture. It is an icon that IS the control, with a name on it. */
[data-screen="client"] .media-more {
  background: none; border: 1px solid transparent; border-radius: var(--r-sm);
  color: var(--mute); cursor: pointer;
  font-size: 15px; line-height: 1; padding: var(--s-nudge) var(--s-1);
}
[data-screen="client"] .media-more:hover { border-color: var(--rule); color: var(--ink); }


/* THE HEADLINE IS THE NAME. What is filed under the naming convention is four
   facts you can see from the tab you are standing in and is identical down the
   whole grid; the headline is what this ad actually says, and it is how anybody
   would refer to it out loud. The filed title is the tooltip. */
[data-screen="client"] .media-cta {
  margin: -2px 0 0;
  font-size: 12px; line-height: 1.4; color: var(--mute);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* WHO MADE IT, bottom left, opposite the verbs. The date used to live here
   with it; it is top right now, where a date is looked for. */
[data-screen="client"] .media-who {
  font-size: 12px; color: var(--mute); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── THE MEDIA LIBRARY IS NOT THE CREATIVES GRID (2026-10-06) ────────────────
   Franz: "media library card sucks and all over the place, not aligned". Every
   rule above is written for the Work tab's creatives, but the Settings card
   uses the same .media-grid and .media-tile classes on the same screen, so it
   was drawn as two 316px tiles with 14px of padding each, cut off by the
   card's fixed height halfway down the second row of controls.
   Scoped to the card itself: small even squares, the picture contained in its
   frame, the name, the role, and the tags under it, and a card that is only as
   tall as what it holds up to a ceiling, after which the grid scrolls. */
[data-screen="client"] .pf-field.media { height: auto; max-height: 640px; }
[data-screen="client"] .pf-field.media .media-grid {
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: var(--s-1); margin: var(--s-1h) 0 0;
}
[data-screen="client"] .pf-field.media .media-tile {
  display: flex; flex-direction: column; gap: 0;
  padding: 0; border-radius: var(--r-md);
  background: var(--shade);
}
[data-screen="client"] .pf-field.media .media-img {
  width: 100%; max-height: none; aspect-ratio: 1;
  object-fit: contain; background: var(--sunk);
  border-bottom: 1px solid var(--rule);
}
[data-screen="client"] .pf-field.media .media-cap { padding: var(--s-1) var(--s-1) var(--s-half); }
[data-screen="client"] .pf-field.media .media-tags { margin-top: auto; }
/* The Upload pill is exactly the search box's height and sits on the same
   centre line (Franz, 2026-10-17: "upload button looks higher than normal").
   It was 26px beside a 32px search, top-aligned by its label's own margin. */
[data-screen="client"] .pf-field.media .dt-toolbar .media-add {
  box-sizing: border-box; height: var(--h-md); margin: 0; align-self: center;
  padding: 0 var(--s-2); display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; vertical-align: middle;
}

/* MIGRATION 62: open, download, more, and videos kept as links.
   The picture opens full size on a click; the download sits opposite the
   remove, in the same quiet black square, shown on hover like it. */
.media-tile .media-img { cursor: zoom-in; }
.media-dl {
  position: absolute; top: 5px; left: 5px; display: inline-flex; padding: var(--s-half);
  border: 0; border-radius: 6px; background: rgba(0,0,0,.62); color: #fff;
  cursor: pointer; opacity: 0; transition: opacity .12s;
}
.media-dl { opacity: 1; }
.media-dl:hover { background: var(--accent); }
.media-more { display: block; margin: var(--s-1h) auto 0; }
.media-more[hidden] { display: none; }
a.media-link {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 1; background: var(--sunk, var(--shade));
  color: var(--ink-soft); text-decoration: none; font-size: 12px;
}
a.media-link:hover { color: var(--ink); }

/* FIND AN IMAGE, on the workspace page: the whole width, small even squares,
   and a ceiling after which the grid scrolls inside the card. */
.ws-find { margin: var(--s-2) 0 0; }
.ws-find .media-find { display: flex; flex-direction: column; height: auto; max-height: 720px; }
.ws-find .media-grid {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--s-1); margin: var(--s-1h) 0 0;
}
.ws-find .media-tags { display: flex; flex-wrap: wrap; gap: var(--s-half); padding: 0 var(--s-1) var(--s-1); }

/* ── the media viewer (media-viewer.js, 2026-10-29): the picture large, its
      details beside it; one column on a phone ── */
.mv .mv-card { max-width: calc(100vw - 2 * var(--s-2)); width: calc(var(--w-modal) * 1.33); }
.mv-head { margin: 0 0 var(--s-2); }
.mv-count { font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; }
.mv-arrow {
  display: inline-flex; align-items: center; justify-content: center; width: var(--h-md); height: var(--h-md);
  border: var(--s-px) solid var(--rule); border-radius: var(--r-md); background: var(--card); color: var(--ink); cursor: pointer;
}
.mv-arrow:disabled { opacity: .35; cursor: default; }
.mv-body { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--w-col) + (var(--s-3) - var(--gap-rail)) / 2); column-gap: var(--gap-rail); row-gap: var(--s-3); align-items: start; }
.mv-stage {
  display: flex; align-items: center; justify-content: center; min-height: calc(var(--s-12) * 4);
  border-radius: var(--r-md); background: var(--shade); overflow: hidden;
}
.mv-img { display: block; max-width: 100%; max-height: calc(100dvh - var(--s-12) * 2.5); object-fit: contain; }
.mv-file { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); padding: var(--s-4); text-align: center; }
.mv-file-ext { font: 800 28px/1 var(--font-body); color: var(--ink-soft); }
.mv-file-name { font-size: 14px; color: var(--ink); word-break: break-word; }
.mv-side { display: flex; flex-direction: column; gap: var(--gap-field); min-width: 0; }
.mv-name { margin: 0; font-size: 18px; line-height: 1.3; word-break: break-word; }
.mv-tags { display: flex; flex-wrap: wrap; gap: var(--s-half); }
.mv-tag {
  display: inline-flex; align-items: center; gap: var(--s-half); height: var(--h-sm); padding: 0 var(--s-half) 0 var(--s-1);
  border: var(--s-px) solid var(--rule); border-radius: var(--r-sm); font-size: 13px;
}
.mv-tag-x { display: inline-flex; padding: var(--s-nudge); border: 0; background: none; color: var(--mute); cursor: pointer; }
.mv-acts { display: flex; gap: var(--s-1); }
@media (max-width: 1023px) { .mv-body { grid-template-columns: minmax(0, 1fr); } }
.media-img { cursor: zoom-in; }