@layer components {
  /* The channel's own mark: a tile in the channel's colour, standing beside its
   * name wherever a channel is named — today, a row of the properties list.
   *
   * Deliberately not .avatar. That is initials in *our* palette for a person or
   * a place; this is somebody else's brand, so the colour is theirs and no theme
   * overrides it. Square for the reason .avatar--square is square: a circle
   * reads as a face everywhere else.
   *
   * What is inside it is the brand's artwork where we hold it, and a monogram
   * where we do not — a sized tile with something centred in it either way.
   *
   * Sized in em against its own font-size, the way .avatar and every control
   * here is, so a size variant is one declaration and everything follows.
   */
  .channel-mark {
    --channel-mark-text: var(--text-small);
    --channel-mark-size: 2.5em;
    --channel-mark-canvas: var(--surface-sunk);
    --channel-mark-ink: var(--color-ink-soft);

    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: var(--channel-mark-size);
    block-size: var(--channel-mark-size);
    border-radius: var(--radius);
    background: var(--channel-mark-canvas);
    color: var(--channel-mark-ink);
    font-size: var(--channel-mark-text);
    font-weight: var(--weight-bold);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-normal);
  }

  .channel-mark--large { --channel-mark-text: var(--text-body); }

  /* A row of them, in a table cell: tight enough to read as one set. */
  .channel-mark--small { --channel-mark-text: var(--text-xx-small); }

  /* One rule per channel, keyed on the code a listing names it by, so nothing
     has to carry a colour through a view to get here. Each states both halves of
     the pair: canvas-coloured ink reads on a brand colour and is invisible on the
     neutral tile, which is the default a channel we have no colour for keeps. */
  .channel-mark[data-channel="airbnb"] {
    --channel-mark-canvas: var(--channel-airbnb);
    --channel-mark-ink: var(--color-canvas);
  }

  .channel-mark[data-channel="booking"] {
    --channel-mark-canvas: var(--channel-booking);
    --channel-mark-ink: var(--color-canvas);
  }

  .channel-mark[data-channel="vrbo"] {
    --channel-mark-canvas: var(--channel-vrbo);
    --channel-mark-ink: var(--color-canvas);
  }

  .channel-mark[data-channel="houfy"] {
    --channel-mark-canvas: var(--channel-houfy);
    --channel-mark-ink: var(--color-canvas);
  }

  /* A channel we hold the brand's own artwork for. The tile gives up its colour,
   * because the colour was standing in for a logo and the logo brings its own —
   * a pink Airbnb mark on a pink tile is invisible.
   *
   * Declared *after* the per-channel rules above, and that is load-bearing:
   * `.channel-mark[data-channel="airbnb"]` is one class and one attribute, this
   * is two classes, and the two carry the same specificity. A tie goes to
   * whichever comes last, so this has to stay below them.
   *
   * `contain` rather than `cover`, so a wordmark is letterboxed rather than
   * cropped to its middle three letters. */
  .channel-mark.channel-mark--art {
    --channel-mark-canvas: var(--color-canvas);

    padding: var(--space-eighth);
    border: var(--border-faint);
  }

  .channel-mark--art img {
    max-inline-size: 100%;
    max-block-size: 100%;
    object-fit: contain;
  }

  /* The marks a listing is on, side by side. */
  .channel-marks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-quarter);
  }

  /* The owner-import page in a frame. It reports no height of its own and opens
     its connect and import steps as dialogs inside the frame, so it gets the
     height their guide asks for rather than one that squeezes them. */
  .channel-import {
    --channel-import-height: 50rem;

    display: block;
    inline-size: 100%;
    block-size: var(--channel-import-height);
    margin-block: var(--space);
    border: var(--border);
    border-radius: var(--radius-large);
    background: var(--color-canvas);
  }
}