/* ═══════════════════════════════════════════════════════════════════════════════
   MATCH DEAL PRO — COMPANY LOGO

   Every selector in this file is prefixed `.mdp-logo-`. It reaches no class any other sheet
   defines, and no other sheet defines a `.mdp-logo-` class, so deleting this file and the one
   `<link>` that loads it removes the logo's presentation entirely and returns every avatar on
   the platform to the initials tile it renders today (Rule 2, Rule 3).

   ── WHY `components.css` IS NOT TOUCHED ───────────────────────────────────────
   `.mdp-avatar` is a completed style used by every list, drawer, card and table on the
   platform. A logo needs the tile to become a positioning context and needs its initials to
   step aside once an image has decoded — two changes that, made in `components.css`, would
   apply to hundreds of call sites that will never show an image. So the component adds a
   second class, `.mdp-logo-avatar`, and everything the logo needs is scoped to it here.

   The base tile already does most of the work: `display: grid; place-items: center` and
   `overflow: hidden` are inherited from `.mdp-avatar` untouched, which is why an image child
   lands centred and clipped without a single override of a geometry this sheet does not own.

   ── THE INITIALS ARE NEVER REMOVED ────────────────────────────────────────────
   `color: transparent` — not `display: none`, and not a DOM removal. The initials text node
   stays exactly where it is in every tile, so a logo that fails to decode, a byte request that
   403s, and a company with no logo are one and the same rendered result. There is no state in
   which the fallback has to be rebuilt, because it was never taken down (requirement 7).

   ── A LOGO IS A TRADEMARK, SO IT IS NEVER CROPPED ─────────────────────────────
   `object-fit: contain`, everywhere, at every size. `cover` fills a square tile more pleasingly
   and would crop a wide wordmark down to two letters — which is not a stylistic preference but
   a misrepresentation of another company's mark on a page where that company is a counterparty
   to a financial commitment. Letterboxing inside the tile is the correct outcome.

   ── COLOUR COMES FROM TOKENS, ALWAYS ─────────────────────────────────────────
   No literal colour appears below. Every value is a `--mdp-*` token, so light, dark and any
   future theme are correct here for free.

   ── LOGICAL PROPERTIES, ALWAYS ───────────────────────────────────────────────
   `inline-size`, `inset-inline-start`, `padding-inline`, `margin-inline`, `border-inline`.
   There is not one `[dir='rtl']` rule in this file and there must never be: Arabic mirrors
   because the geometry is written in reading order rather than in left and right.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
   THE TILE
   ═══════════════════════════════════════════════════════════════════════════════ */

/* The positioning context the image needs. `position: relative` on a grid container changes
   nothing about how the initials are centred, which is why this is the whole of the override. */
.mdp-logo-avatar { position: relative; }

.mdp-logo-img {
  position: absolute;
  /* 1px of inset at the base size, so a mark with a hard edge does not sit flush against the
     tile's own border. Grown with the tile below. */
  inset: 1px;
  inline-size: calc(100% - 2px);
  block-size: calc(100% - 2px);
  object-fit: contain;
  /* Hidden until the component's `load` handler flips `data-logo`, so a half-decoded image is
     never shown over the initials. */
  display: none;
  /* An image inside a rounded tile that is already `overflow: hidden` does not strictly need
     its own radius — but a sub-pixel seam appears at some zoom levels without it. */
  border-radius: inherit;
  /* A logo is not a link and not a drag source in any surface that renders one. */
  pointer-events: none;
  user-select: none;
}

.mdp-logo-avatar[data-logo='on'] .mdp-logo-img { display: block; }

/* The initials step aside rather than leaving. A transparent PNG would otherwise show them
   through its own background. */
.mdp-logo-avatar[data-logo='on'] {
  color: transparent;
  /* The tile's own fill is dropped too: a mark designed on white does not need a grey plate
     behind it, and one designed on transparency reads against the page surface. */
  background: var(--mdp-surface);
}

.mdp-logo-avatar[data-size='lg'] .mdp-logo-img,
.mdp-logo-avatar[data-size='xl'] .mdp-logo-img {
  inset: 3px;
  inline-size: calc(100% - 6px);
  block-size: calc(100% - 6px);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   THE IDENTITY HEADER — the logo beside the company name (requirement 6)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* A row, so the mark and the name share a baseline band and wrap together on a narrow
   viewport rather than the name sliding under the mark. */
.mdp-logo-identity {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-3);
  min-inline-size: 0;
}

/* A standalone name beside a mark, for the surfaces that have no lead paragraph of their own to
   borrow a type scale from. Deliberately modest: this is a card heading's subject, not a page
   title, and it sits inside sections that already have one. */
.mdp-logo-identity-title {
  font-size: var(--mdp-fs-md);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-strong);
  line-height: var(--mdp-lh-normal);
  overflow-wrap: anywhere;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   THE TABLE CELL — a mark beside a name inside a desk row

   The deal inbox, the offers desk and the trade network all render a counterparty as a name
   with a fact line under it, inside a table cell that is already narrow. The tile must not be
   allowed to squeeze that text: `flex: 0 0 auto` on a tile whose size the base component fixed,
   and `min-inline-size: 0` on the row so the text truncates as it did before rather than
   forcing the column wider.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-logo-cell {
  display: inline-flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  min-inline-size: 0;
  /* The cell fills its column so the text still truncates against the column edge and not
     against the intrinsic width of the two children. */
  inline-size: 100%;
}

.mdp-logo-cell > .mdp-logo-avatar { flex: 0 0 auto; }

/* Whatever the page put beside the tile — a `deskLine` stack, a name button — takes the rest and
   is allowed to shrink. Written as a universal child rather than by class, because the three
   desks pass three different second children and none of their classes is this file's to own. */
.mdp-logo-cell > *:not(.mdp-logo-avatar) {
  min-inline-size: 0;
  flex: 1 1 auto;
  /* A name button inside a cell was left-aligned by its own sheet; nothing here overrides that,
     only the shrink behaviour flex introduces. */
  text-align: start;
}

/* The name keeps its own type scale — `.mdp-ck-lead` still styles it — and is allowed to
   shrink so a long legal name wraps instead of pushing the mark off the panel. */
.mdp-logo-identity-name { min-inline-size: 0; }

/* ═══════════════════════════════════════════════════════════════════════════════
   THE MANAGER — upload, replace, remove
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-logo-manager {
  display: flex;
  align-items: flex-start;
  gap: var(--mdp-sp-4);
  flex-wrap: wrap;
}

/* The preview is deliberately larger than any tile on the platform: this is the one screen
   where the logo is the subject rather than a decoration, and a customer approving their own
   mark needs to see it at the size a counterparty's eye will meet it. */
.mdp-logo-preview {
  display: grid;
  place-items: center;
  position: relative;
  flex: 0 0 auto;
  inline-size: 96px;
  block-size: 96px;
  border-radius: var(--mdp-r-lg);
  background: var(--mdp-surface);
  border: 1px solid var(--mdp-border-subtle);
  overflow: hidden;
}

/* Empty state. A dashed edge says "something belongs here" without an icon that would have to
   be translated, and the muted fill keeps it quiet on a form that is mostly fields. */
.mdp-logo-preview[data-state='empty'] {
  border-style: dashed;
  background: var(--mdp-surface-2);
  color: var(--mdp-text-muted);
}

.mdp-logo-preview-img {
  position: absolute;
  inset: 6px;
  inline-size: calc(100% - 12px);
  block-size: calc(100% - 12px);
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* A spinner-free busy state: the preview dims while a 2 MB upload is in flight, which reads as
   "working" without introducing an animation the reduced-motion query would have to suppress. */
.mdp-logo-preview[data-busy='true'] { opacity: 0.55; }

.mdp-logo-actions {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-2);
  min-inline-size: 0;
  flex: 1 1 220px;
}

.mdp-logo-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdp-sp-2);
}

/* The file input itself is never shown. A bare `<input type="file">` cannot be styled to match
   the platform's buttons in any browser, so the visible control is a real `<button>` that
   forwards its click — which also keeps the keyboard path intact, because the button is a
   button and the input is reached only through it. */
.mdp-logo-file {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The constraints line: accepted formats and the size ceiling, both read from the server. */
.mdp-logo-constraints {
  margin: 0;
  font-size: var(--mdp-fs-xs);
  color: var(--mdp-text-muted);
  line-height: var(--mdp-lh-normal);
}

/* The current file's own facts — name, type, size — for a customer confirming they uploaded
   the file they meant to. */
.mdp-logo-meta {
  margin: 0;
  font-size: var(--mdp-fs-xs);
  color: var(--mdp-text-faint);
  word-break: break-word;
}

/* A refusal from the endpoint, shown against the control rather than as a toast that vanishes
   while the customer is still reading it. */
.mdp-logo-error {
  margin: 0;
  font-size: var(--mdp-fs-xs);
  color: var(--mdp-danger);
  font-weight: var(--mdp-fw-medium);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   NARROW VIEWPORTS
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 560px) {
  /* The preview drops to the tile band on a phone, where 96px of image beside two buttons
     leaves the buttons no room to sit side by side. */
  .mdp-logo-preview { inline-size: 72px; block-size: 72px; }
  .mdp-logo-buttons > * { flex: 1 1 auto; }
}