/*
 * qi-app-strip.css — the "Dictation works everywhere" strip.
 *
 * Owned by AppStrip.tsx, which links it. Every class here uses the `qi-apps-` prefix, which
 * nothing else on the site claims; the existing `.qi-app-strip` rule in quiet-instrument.css
 * belongs to the markup this replaces and is deliberately not reused, so neither file styles
 * the other's elements.
 *
 * NO COLOUR IS DEFINED IN THIS FILE. Every value below is a --qi-* token. The one place the
 * strip leaves the §02 palette is inside the brand marks themselves, whose hexes live in
 * brand-marks.tsx and are documented there — CSS never touches them, which is the point: a
 * filter or an opacity here would silently recolour nine trademarks.
 *
 * Rules scoped under `.qi` to match the page's existing specificity, so a chip's font-family
 * is not overridden by the base `.qi li` prose styles that beat a bare class selector.
 */

.qi .qi-apps-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * The chip. 30px tall with a 15px radius — exactly half the height, so it stays a pill rather
 * than becoming a rounded rectangle, and 6px taller than the old text-only chip because an
 * 18px mark needs the room.
 *
 * padding-inline is asymmetric on purpose: an optically square mark sits closer to the edge
 * than a letterform does, so the mark side gets 8px and the text side 11px. The live
 * marketing page settles on the same asymmetry.
 *
 * Nothing here is interactive, so there is no hover, pressed or focus state, and no cursor
 * change — the strip is a list of names, and giving it affordances it cannot honour is worse
 * than giving it none. No animation either; a marquee is the opposite of a quiet instrument.
 */
.qi .qi-apps-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 30px;
  padding-inline: 8px 11px;
  border: 1px solid var(--qi-edge-strong);
  border-radius: 15px;
  background: var(--qi-raised);
}

/*
 * §01.03 puts mono on anything counted, keyed, timed or literally spoken. An app name is a
 * proper noun and is none of those, so it is sans — and beside a logo, mono would read as a
 * code token and fight the mark it sits next to.
 */
.qi .qi-apps-name {
  font-family: var(--qi-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--qi-body);
  white-space: nowrap; /* a chip must never break mid-name */
}

/*
 * The mark. Sized here as well as on the element so the box is reserved before the SVG
 * paints and the row cannot reflow. No filter, no opacity, no mix-blend-mode: full brand
 * colour is the entire reason this section exists, and a dimmed logo row reads as one
 * somebody was embarrassed by.
 *
 * Four of the nine viewBoxes are not square (Figma 54x80, Obsidian 256x332, Gmail 512x399,
 * Discord 256x199). The default preserveAspectRatio letterboxes them into this box, so those
 * four read very slightly smaller than the square marks. Leave it — compensating per-mark
 * means nine hand-tuned scales that drift the moment a vendor file is updated.
 */
.qi .qi-apps-mark {
  flex: none;
  display: block;
  width: 18px;
  height: 18px;
}

/*
 * "+ every other app" is an aside, not a tenth app, and three signals say so together:
 * it keeps mono where the nine moved to sans, its border is dashed rather than solid, and it
 * is --qi-mute against their --qi-body. It takes no mark, so its padding is symmetric — it
 * must not inherit the asymmetry that exists only to seat a logo.
 */
.qi .qi-apps-item--more {
  padding-inline: 11px;
  background: transparent;
  border-style: dashed;
  font-family: var(--qi-mono);
  font-size: 11px;
  line-height: 1;
  color: var(--qi-mute);
  white-space: nowrap;
}

/*
 * Narrow widths. The strip already wraps, so nothing overflows and the page cannot scroll
 * sideways: at 375px the track is 335px and the widest chip ("+ every other app") is 136px.
 * The step down below 700px buys roughly one extra chip per row, which is the difference
 * between four rows and three on a phone.
 *
 * Explicitly NOT a horizontal scroller at small widths: that hides half the logos, and
 * recognising a logo you already use is the whole job of this section.
 */
@media (max-width: 700px) {
  .qi .qi-apps-list {
    gap: 6px;
  }
  .qi .qi-apps-item {
    height: 28px;
    border-radius: 14px;
    gap: 7px;
    padding-inline: 7px 10px;
  }
  .qi .qi-apps-item--more {
    padding-inline: 10px;
  }
  .qi .qi-apps-mark {
    width: 16px;
    height: 16px;
  }
}

/*
 * There is no motion to reduce here — this block exists to state that on purpose, so that a
 * later change cannot add a transition and quietly leave prefers-reduced-motion unhandled.
 */
@media (prefers-reduced-motion: reduce) {
  .qi .qi-apps-item {
    transition: none;
  }
}