/*
 * Quiet Instrument — the §05 product renderings.
 *
 * "Both product renderings are recreated desktop chrome with real content, the transcript pill,
 * and a mono receipt line — never a stock screenshot or a device frame." This file holds the
 * drawing. Nothing in here loads anything: no image, no webfont, no remote SVG. The plates are
 * built out of borders, fills and Unicode glyphs in the self-hosted IBM Plex, which is what
 * keeps the footer's "nothing on this page phones home" true.
 *
 * SHARED FILE, SPLIT OWNERSHIP. Two renderings live here and are edited independently:
 *
 *   §A  .qi-rendering-* / .qi-mail-*   the hero — a Gmail reply typed by dictation
 *   §B  .qi-gh-*                        computer use — the GitHub notification run
 *
 * Append to your own section only. Do not edit across the divider.
 *
 * LINKED BY THE PAGE, not by the components. Both renderings used to carry their own <link>,
 * on the belief that React would hoist and de-duplicate them. It does not without a
 * `precedence` prop, so the served HTML carried this href twice and the browser built two
 * complete copies of the CSSOM — 372 rules and 52,066 B of rule text instead of 186 and
 * 26,033. The page owns the single link now; see app/quiet-instrument/page.tsx.
 *
 * TOKENS ARE A DEPENDENCY, NOT AN IMPORT. This file used to `@import` quiet-instrument-tokens.css,
 * which the browser cannot discover until this stylesheet has arrived and parsed — a serialised
 * extra round trip in front of first paint, for 720 B gzipped. The page links the token sheet
 * ahead of this one so the preload scanner finds it in the initial HTML. Anything loading this
 * file must link /quiet-instrument-tokens.css first or every --qi-* below resolves to nothing.
 */

/* ==========================================================================================
 * §A  HERO RENDERING — .qi-rendering-* (frame, scaling, caption) and .qi-mail-* (the plate)
 * ========================================================================================== */

/*
 * THE OFF-TOKEN GROUP, AND WHY IT EXISTS.
 *
 * §02's palette describes LoudInk. This plate mostly is not LoudInk: it is the user's desktop
 * wallpaper, macOS's menu bar, Chrome and Gmail, recreated so the hero shows the interface
 * someone actually dictates into rather than a diagram of one. Painting another company's
 * software in our tokens would be a lie about both. So ten values sit outside the token set,
 * declared here once, scoped to this rendering, and used nowhere else on the site.
 *
 * The line is drawn at LoudInk's own chrome. The transcript pill, the menu-bar waveform, the
 * typing caret and the receipt line are ours and are strictly on --qi-*. Nothing below adds a
 * colour to LoudInk; it only lets a recreated third-party window look like itself.
 */
.qi-rendering {
  /* The user's desktop, behind everything. */
  --qi-r-desktop: #243141;
  /* macOS darkens the menu bar over the wallpaper rather than filling it. */
  --qi-r-menu-scrim: rgba(9, 13, 17, 0.4);
  /* macOS's active menu-item highlight, which is what the LoudInk chip is sitting in. */
  --qi-r-menu-hi: rgba(255, 255, 255, 0.16);
  /* Chrome's own body — a shade between --qi-bg and --qi-panel that is deliberately neither. */
  --qi-r-chrome: #14171b;
  /* Window controls and the unavailable forward chevron. Monochrome on purpose: see below. */
  --qi-r-control: #4d545b;
  /* Gmail's checkbox border. */
  --qi-r-checkbox: #3b434b;
  /* Gmail's list hairline — one step below --qi-line, because it separates rows, not regions. */
  --qi-r-hairline: #1e2328;
  /* macOS menu-bar text and its active app title. */
  --qi-r-menu-text: #b9c3cd;
  --qi-r-menu-title: #e8ecf1;
  /* A lifted border above --qi-edge-strong, so the compose card leaves the surface behind it. */
  --qi-r-card-edge: #343a41;

  /*
   * DESIGN GEOMETRY. The composition is fixed-width and scales as one piece; a browser window
   * that rewraps its own tab strip stops reading as a browser window. --qi-r-w is the design
   * width for the current tier and drops at the breakpoints below, so the scale factor stays
   * high enough to keep 12px text legible instead of shrinking the whole thing to a smear.
   *
   * --qi-r-h is 575px at every tier and is not a guess: 1px border + 28 menu bar + 20 pad +
   * 32 pill + 13 gap + 450 window + 30 pad + 1px border. Every child has a fixed height, the
   * compose card is out of flow, and no tier changes a vertical value — so the number holds and
   * the wrapper can reserve exactly the right room for the transformed plate.
   */
  --qi-r-w: 1080px;
  --qi-r-h: 575px;

  /*
   * Tier-varied columns, so dropped detail leaves the remaining detail at full size.
   *
   * --qi-r-cols is the whole track list rather than a sidebar width, because a display:none
   * sidebar stops being a grid item: with `0px 1fr` the message list auto-places into the empty
   * first track and collapses to nothing. Dropping to a one-track list is the fix.
   */
  --qi-r-cols: 168px 1fr;
  --qi-r-sender: 148px;
  --qi-r-time: 62px;
  --qi-r-pad-x: 30px; /* plate padding — horizontal only; vertical is fixed at 20/30 */
  --qi-r-menu-gap: 17px;

  /* The query container the scale factor is measured against. */
  container-type: inline-size;

  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.qi-rendering *,
.qi-rendering *::before,
.qi-rendering *::after {
  box-sizing: border-box;
}

/*
 * The scaling rig.
 *
 * .qi-rendering is the query container; .qi-rendering-box is a descendant, so 100cqw resolves
 * against the frame's inner column rather than against itself. The plate keeps its full design
 * width and is scaled from its top-left corner — a transformed box contributes its *transformed*
 * size to scrollable overflow, so a 1080px plate at 0.31 adds 335px of width, not 1080. That is
 * what keeps the page from scrolling sideways, and it means the plate's shadow is never clipped
 * the way an overflow:hidden wrapper would clip it.
 *
 * The transform is applied only inside the container query. At full size there is no transform
 * at all, so the type is rasterised on the pixel grid rather than through a scale(1) layer.
 */
.qi-rendering-box {
  --qi-r-scale: min(1, 100cqw / var(--qi-r-w));
  width: 100%;
}

/*
 * text-align is reset here, not inherited. The hero's .qi-frame is centred, and a centred
 * mailbox reads as a diagram of one — every sender, subject and field label has to start at its
 * own left edge for the plate to look like software.
 */
.qi-rendering-plate {
  text-align: left;
  width: var(--qi-r-w);
  height: var(--qi-r-h);
  border-radius: 14px;
  overflow: hidden;
  background: var(--qi-r-desktop);
  border: 1px solid var(--qi-edge-strong);
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.65);
}

@container (width < 1080px) {
  .qi-rendering-box {
    /* Reserve the scaled height; the plate's own 575px is out of the flow's reckoning once
       transformed, and without this the caption would sit 575px down at every width. */
    height: calc(var(--qi-r-h) * var(--qi-r-scale));
  }

  .qi-rendering-plate {
    transform: scale(var(--qi-r-scale));
    transform-origin: top left;
  }
}

/* ---------------------------------------------------------------- caption */

.qi-rendering-caption {
  align-self: center;
  text-align: center;
  max-width: 760px;
  text-wrap: pretty;
  font-family: var(--qi-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--qi-mute);
}

/* §04: a key is keyed, so it is mono — the current hero renders this as flat prose. */
.qi-rendering .qi-rendering-key {
  font-family: var(--qi-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--qi-label);
}

/* ---------------------------------------------------------------- macOS menu bar */

.qi-mail-menubar {
  height: 28px;
  display: flex;
  align-items: center;
  gap: var(--qi-r-menu-gap);
  padding: 0 16px;
  background: var(--qi-r-menu-scrim);
}

.qi-mail-appdot {
  fill: var(--qi-r-menu-title);
}

.qi-rendering .qi-mail-menu-app,
.qi-rendering .qi-mail-menu-item,
.qi-rendering .qi-mail-menu-status {
  font-family: var(--qi-sans);
  line-height: 1;
  white-space: nowrap;
}

.qi-rendering .qi-mail-menu-app {
  font-size: 12px;
  font-weight: 600;
  color: var(--qi-r-menu-title);
}

.qi-rendering .qi-mail-menu-item {
  font-size: 12px;
  font-weight: 400;
  color: var(--qi-r-menu-text);
}

.qi-rendering .qi-mail-menu-status {
  font-size: 11px;
  font-weight: 400;
  color: var(--qi-r-menu-text);
}

/* A clock is timed. §04. */
.qi-rendering .qi-mail-menu-clock {
  font-family: var(--qi-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  color: var(--qi-r-menu-text);
  white-space: nowrap;
}

/* LoudInk's seat in the menu bar. The chip is macOS's highlight; the glyph inside it is ours. */
.qi-mail-menu-chip {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  height: 21px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--qi-r-menu-hi);
  flex: none;
}

.qi-mail-menu-glyph rect {
  fill: var(--qi-accent);
}

/* ---------------------------------------------------------------- window body */

/*
 * This padding is the whole reason the browser window is inset from the wallpaper. Horizontal
 * only at the breakpoints — the 20/30 vertical pair is what makes --qi-r-h a constant.
 */
.qi-mail-body {
  padding: 20px var(--qi-r-pad-x) 30px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

/* ---------------------------------------------------------------- transcript pill */

/*
 * LoudInk's surface. On-token throughout, and floating above the browser window rather than
 * inside it, because that is where the HUD actually sits.
 */
.qi-mail-pill {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  background: var(--qi-panel);
  border: 1px solid var(--qi-edge-strong);
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.55);
  max-width: 100%;
  min-width: 0;
}

.qi-mail-level {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 13px;
  flex: none;
}

.qi-mail-level i {
  display: block;
  width: 2px;
  border-radius: 1px;
  background: var(--qi-accent);
}

.qi-mail-level i:nth-child(1) { height: 35%; }
.qi-mail-level i:nth-child(2) { height: 80%; }
.qi-mail-level i:nth-child(3) { height: 55%; }
.qi-mail-level i:nth-child(4) { height: 100%; }
.qi-mail-level i:nth-child(5) { height: 45%; }
.qi-mail-level i:nth-child(6) { height: 65%; }

/* The ellipsis here, with max-width above, is half of what stops the page scrolling sideways. */
.qi-rendering .qi-mail-pill-text {
  font-family: var(--qi-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  color: var(--qi-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ---------------------------------------------------------------- browser window */

.qi-mail-window {
  width: 100%;
  border-radius: 11px;
  overflow: hidden;
  background: var(--qi-r-chrome);
  border: 1px solid var(--qi-edge-strong);
  box-shadow: 0 26px 58px -22px rgba(0, 0, 0, 0.62);
}

.qi-mail-tabstrip {
  height: 40px;
  display: flex;
  align-items: flex-end; /* tabs sit on the baseline, not centred in the strip */
  gap: 5px;
  padding: 0 12px;
  background: var(--qi-line);
}

/*
 * Monochrome, not red/amber/green. Traffic lights would drag three colours we do not own onto
 * the page, next to the one accent that has to keep meaning something.
 */
.qi-mail-lights {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 13px;
  flex: none;
}

.qi-mail-lights i {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--qi-r-control);
}

.qi-rendering .qi-mail-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 13px;
  font-family: var(--qi-sans);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  flex: none;
}

/* Filled with the window body so the tab reads as connected to the page beneath it. */
.qi-mail-tab--active {
  margin-left: 10px;
  border-radius: 8px 8px 0 0;
  background: var(--qi-r-chrome);
  color: var(--qi-body);
}

.qi-rendering .qi-mail-tab-close {
  color: var(--qi-faint);
}

.qi-mail-tab--inactive {
  color: var(--qi-mute);
}

.qi-mail-tab--last {
  padding: 0 11px;
}

/* ---------------------------------------------------------------- URL row */

.qi-mail-urlrow {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  background: var(--qi-r-chrome);
  border-bottom: 1px solid var(--qi-line);
}

.qi-rendering .qi-mail-nav {
  font-family: var(--qi-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  color: var(--qi-faint);
  flex: none;
}

/* Forward is unavailable, so it sits a step below back rather than beside it. */
.qi-rendering .qi-mail-nav--off {
  color: var(--qi-r-control);
}

.qi-mail-urlfield {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
  padding: 0 11px;
  border-radius: 12px;
  background: var(--qi-raised);
  border: 1px solid var(--qi-edge);
}

/*
 * DEVIATION from the mockup, deliberate. The mockup fills this triangle with #2fd8b6 — our
 * accent — inside a recreated browser's own chrome. §02 gives accent one job, "ready / live",
 * and it is the one colour on this page that must only ever mean LoudInk; a real browser's site
 * indicator is grey anyway. Held at --qi-faint so the receipt line stays the only accent text on
 * the plate. Flip this one declaration to var(--qi-accent) to match the mockup literally.
 */
.qi-rendering .qi-mail-lock {
  font-family: var(--qi-mono);
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  color: var(--qi-faint);
  flex: none;
}

/* A URL is keyed, so it is mono. §04. */
.qi-rendering .qi-mail-url {
  font-family: var(--qi-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  color: var(--qi-label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ---------------------------------------------------------------- Gmail */

/* position:relative — this is the containing block the compose card is anchored against. */
.qi-mail-content {
  position: relative;
  display: grid;
  grid-template-columns: var(--qi-r-cols);
  height: 372px;
}

.qi-mail-sidebar {
  border-right: 1px solid var(--qi-line);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* Gmail's compose button, not ours — hence a surface fill and no accent. */
.qi-rendering .qi-mail-compose-btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  height: 30px;
  padding: 0 15px;
  border-radius: 15px;
  background: var(--qi-edge);
  font-family: var(--qi-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--qi-ink);
  white-space: nowrap;
}

.qi-mail-nav-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.qi-mail-nav-row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 28px;
  padding: 0 11px;
}

.qi-mail-nav-row--active {
  border-radius: 14px;
  background: var(--qi-raised);
}

.qi-rendering .qi-mail-nav-label {
  font-family: var(--qi-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  color: var(--qi-label);
  white-space: nowrap;
}

.qi-mail-nav-row--active .qi-mail-nav-label {
  font-weight: 600;
  color: var(--qi-ink);
}

/* Counted, so mono. §04. */
.qi-rendering .qi-mail-nav-count {
  margin-left: auto;
  font-family: var(--qi-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  color: var(--qi-ink);
}

.qi-rendering .qi-mail-nav-count--quiet {
  font-weight: 400;
  color: var(--qi-faint);
}

/*
 * min-width:0 is load-bearing. A grid item's automatic minimum size is its content, so without
 * it the un-ellipsised subject lines set the column's floor, the 372px grid grows past the
 * window, the plate grows past its design width and the page scrolls sideways. Do not remove it.
 */
.qi-mail-list {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.qi-mail-toolbar {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  border-bottom: 1px solid var(--qi-line);
}

.qi-mail-checkbox {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  border: 1px solid var(--qi-r-checkbox);
  flex: none;
}

.qi-rendering .qi-mail-toolbar-item {
  font-family: var(--qi-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  color: var(--qi-mute);
  white-space: nowrap;
}

/* Counted — an en dash range and a thousands comma. Mono. §04. */
.qi-rendering .qi-mail-count {
  margin-left: auto;
  font-family: var(--qi-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  color: var(--qi-faint);
  white-space: nowrap;
}

.qi-mail-row {
  display: grid;
  grid-template-columns: var(--qi-r-sender) 1fr var(--qi-r-time);
  gap: 14px;
  align-items: center;
  padding: 11px 16px;
  border-bottom: 1px solid var(--qi-r-hairline);
}

.qi-rendering .qi-mail-sender,
.qi-rendering .qi-mail-subject {
  font-family: var(--qi-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--qi-label);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.qi-rendering .qi-mail-subject {
  color: var(--qi-mute);
}

/* Times are timed. §04. */
.qi-rendering .qi-mail-time {
  font-family: var(--qi-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  color: var(--qi-faint);
  text-align: right;
  white-space: nowrap;
}

/* The row the dictation is replying to, so it carries the unread weight. */
.qi-rendering .qi-mail-row--unread .qi-mail-sender {
  font-weight: 600;
  color: var(--qi-ink);
}

.qi-rendering .qi-mail-row--unread .qi-mail-subject {
  color: var(--qi-body);
}

.qi-rendering .qi-mail-row--unread .qi-mail-time {
  color: var(--qi-label);
}

/* ---------------------------------------------------------------- compose card */

/*
 * Docked bottom-right of the content area exactly as Gmail's compose is, overlapping the list.
 * Being out of flow is also what keeps --qi-r-h a constant: the card can grow another line at a
 * narrow tier without changing the plate's height. Squared at the bottom because it is docked to
 * the window edge.
 */
.qi-mail-compose {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: min(452px, calc(100% - 32px));
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  background: var(--qi-raised);
  border: 1px solid var(--qi-r-card-edge);
  box-shadow: 0 22px 50px -18px rgba(0, 0, 0, 0.7);
}

.qi-mail-compose-head {
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 13px;
  background: var(--qi-edge);
}

.qi-rendering .qi-mail-compose-title {
  font-family: var(--qi-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  color: var(--qi-ink);
}

.qi-rendering .qi-mail-compose-controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--qi-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  color: var(--qi-label);
}

/*
 * The maximise control, drawn rather than typed. It was ▢ (U+25A2), which IBM Plex does not
 * carry — reading the cmap of both self-hosted faces, the whole Geometric Shapes block is absent
 * from Sans and Mono except U+25CA — so the browser was already substituting a system face and
 * the glyph sat at a different weight and optical size from the – and × beside it. There is no
 * square in Plex to swap to, so this one becomes a border the way the brand marks are shapes:
 * 7px square in currentColor, which the control row sets to --qi-label, at the same 1px hairline
 * the plate uses everywhere else.
 */
.qi-rendering .qi-mail-ctl-box {
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
  border-radius: 1px;
}

.qi-mail-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 13px;
  border-bottom: 1px solid var(--qi-edge);
}

.qi-rendering .qi-mail-field-label,
.qi-rendering .qi-mail-field-value {
  font-family: var(--qi-sans);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qi-rendering .qi-mail-field-label {
  width: 46px;
  flex: none;
  color: var(--qi-faint);
}

.qi-rendering .qi-mail-field-value {
  color: var(--qi-body);
}

.qi-mail-compose-body {
  padding: 14px 13px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* The largest, brightest text on the plate — correctly, since it is the thing LoudInk made. */
.qi-rendering .qi-mail-reply {
  margin: 0;
  font-family: var(--qi-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--qi-ink);
  text-wrap: pretty;
}

/* LoudInk's caret, so on-token. */
.qi-mail-caret {
  display: inline-block;
  width: 2px;
  height: 14px;
  background: var(--qi-accent);
  vertical-align: -2px;
  margin-left: 2px;
  animation: qi-mail-caret-blink 1.1s steps(1, end) infinite;
}

@keyframes qi-mail-caret-blink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0.15; }
}

@media (prefers-reduced-motion: reduce) {
  .qi-mail-caret {
    animation: none;
  }
}

.qi-mail-send-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Gmail's send button, not ours. A surface fill, never the accent. */
.qi-rendering .qi-mail-send {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 16px;
  border-radius: 14px;
  background: var(--qi-edge-strong);
  font-family: var(--qi-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--qi-ink);
  flex: none;
}

/*
 * The proof, stated quietly: the smallest type on the plate and the only accent text on it.
 * .qi-receipt already carries family, accent and gap; this only takes it to the mockup's 10px.
 */
.qi-rendering .qi-mail-receipt {
  font-size: 10px;
  gap: 6px;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- tiers */

/*
 * Detail is dropped, never reflowed and never shrunk on its own. Each step narrows the design
 * width, which raises the scale factor and keeps 11–12px type at a readable size, and hides the
 * chrome that has the least to say — the third tab, then the sidebar, then the menu titles.
 * Nothing vertical changes at any tier, so --qi-r-h stays 575px throughout.
 *
 * Widths track --qi-gutter, which quiet-instrument.css drops from 40px to 20px at 700px.
 */
/*
 * The hide rules are two-class on purpose: the base .qi-rendering .qi-mail-tab rule has to be
 * two-class to beat quiet-instrument.css's element-qualified `.qi span` font-family, and a
 * single-class `display: none` underneath it loses. Keep both sides at the same weight.
 */
@media (max-width: 1060px) {
  .qi-rendering {
    --qi-r-w: 900px;
  }
  .qi-rendering .qi-mail-tab--last {
    display: none;
  }
}

@media (max-width: 900px) {
  .qi-rendering {
    --qi-r-w: 720px;
    --qi-r-cols: 1fr;
  }
  .qi-rendering .qi-mail-sidebar,
  .qi-rendering .qi-mail-tab--inactive {
    display: none;
  }
}

@media (max-width: 700px) {
  .qi-rendering {
    --qi-r-w: 560px;
    --qi-r-sender: 110px;
    --qi-r-time: 50px;
    --qi-r-pad-x: 18px;
  }
}

@media (max-width: 480px) {
  .qi-rendering {
    --qi-r-w: 420px;
    --qi-r-sender: 84px;
    --qi-r-time: 40px;
    --qi-r-pad-x: 12px;
    --qi-r-menu-gap: 12px;
  }
  /* The app menus are the least load-bearing thing on the plate, so they go first. */
  .qi-rendering .qi-mail-menu-item {
    display: none;
  }
}

/* ==========================================================================================
 * §B  COMPUTER-USE RENDERING — .qi-gh-*
 * (owned separately; append below this divider)
 * ========================================================================================== */

/*
 * §05 `2a-site`, the computer-use rendering — recreated Chrome on github.com/notifications
 * with LoudInk's approval card beside it. Markup:
 * site/app/quiet-instrument/_components/ComputerUseRendering.tsx.
 *
 * COLOUR LICENCE. Two palettes meet in this block. The desktop wallpaper, the menu bar, the
 * browser chrome and every recreated GitHub surface are somebody else's interface, so they
 * are written as literal hex, off the §02 token set — they are not ours to tokenise. A few
 * of those literals happen to equal a token value (#22262b, #1b1f24, #2c3238); they stay
 * literal precisely so the boundary is visible in the source. Everything LoudInk draws —
 * the menu-bar glyph, the accent ring on the control we are about to press, and the whole
 * approval card — is tokens, with alpha from color-mix rather than from a new hex.
 *
 * SCALE, DO NOT REFLOW (down to the point where scaling stops being readable). Every length
 * is `calc(N * var(--gh-u))`, where N is the mockup's pixel value and --gh-u is one design
 * pixel. Above 900px of frame, --gh-u shrinks with the container so the whole desktop scales
 * as one image and the geometry stays exactly as measured. Below that the plate goes fluid
 * at --gh-u: 1px and only one thing reflows — the approval card drops below the window,
 * because the 360px channel it lives in cannot hold a 318px card in a narrow frame. Hairlines
 * stay at a literal 1px throughout: a scaled 1px border rounds away to nothing.
 *
 * The units are container units, so this block needs no viewport media queries and behaves
 * the same wherever it is placed.
 */

.qi .qi-gh {
  container-type: inline-size;
  width: 100%;
}

.qi .qi-gh-plate {
  --gh-u: min(1px, 100cqw / 1078);

  position: relative;
  width: calc(1078 * var(--gh-u));
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid #2c3238;
  border-radius: calc(14 * var(--gh-u));
  /* The user's desktop wallpaper. Outside §02 on purpose — it is not LoudInk's surface. */
  background: #243141;
  box-shadow: 0 calc(30 * var(--gh-u)) calc(70 * var(--gh-u)) calc(-28 * var(--gh-u)) rgb(0 0 0 / 0.6);
  font-family: var(--qi-sans);
}

/*
 * The mockup declares no box-sizing, so its fixed heights and widths are content boxes and its
 * borders sit outside them; this page is border-box everywhere. Restating content-box on the
 * bordered pieces of the recreated chrome reproduces the mockup's arithmetic exactly rather
 * than re-deriving every number with its border added — the browser window comes out 431 tall
 * and the plate 511, as measured, and the notification checkbox comes out 15 wide, which is
 * why its grid column is 15. LoudInk's own card stays border-box: its 318 is a border-box
 * width, and the buttons want to match .qi-btn, which is border-box too.
 */
.qi .qi-gh-url,
.qi .qi-gh-field,
.qi .qi-gh-bar,
.qi .qi-gh-search,
.qi .qi-gh-filters,
.qi .qi-gh-target,
.qi .qi-gh-check {
  box-sizing: content-box;
}

/* ---------------------------------------------------------------- menu bar (foreign) */

.qi .qi-gh-menu {
  display: flex;
  align-items: center;
  gap: calc(17 * var(--gh-u));
  height: calc(28 * var(--gh-u));
  padding-inline: calc(16 * var(--gh-u));
  background: rgb(9 13 17 / 0.4);
}

.qi .qi-gh-menu-dot {
  flex: none;
  width: calc(13 * var(--gh-u));
  height: calc(13 * var(--gh-u));
  fill: #e8ecf1;
}

.qi .qi-gh-menu-app {
  font-weight: 600;
  font-size: calc(12 * var(--gh-u));
  line-height: 1;
  color: #e8ecf1;
  white-space: nowrap;
}

.qi .qi-gh-menu-item {
  font-size: calc(12 * var(--gh-u));
  line-height: 1;
  color: #b9c3cd;
  white-space: nowrap;
}

.qi .qi-gh-menu-status { font-size: calc(11 * var(--gh-u)); }

.qi .qi-gh-menu-clock {
  font-family: var(--qi-mono);
  font-size: calc(11 * var(--gh-u));
  line-height: 1;
  color: #b9c3cd;
  white-space: nowrap;
}

/*
 * LoudInk in the system's menu bar — tokens resume. Amber rather than accent because the run
 * is parked on a write: the pill, the card header and the pending step all carry the same
 * signal, which is what ties the three together at a glance.
 */
.qi .qi-gh-menu-pill {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  flex: none;
  height: calc(21 * var(--gh-u));
  padding-inline: calc(8 * var(--gh-u));
  border-radius: calc(6 * var(--gh-u));
  background: color-mix(in srgb, var(--qi-attention) 20%, transparent);
}

.qi .qi-gh-mark { fill: var(--qi-attention); }

/* ---------------------------------------------------------------- desktop (foreign) */

/*
 * THE RIGHT PADDING IS LOAD-BEARING. It is the channel the approval card sits in, and it is
 * why this browser window is 690 wide where the hero's is 1016. Do not normalise it.
 */
.qi .qi-gh-desk {
  padding: calc(22 * var(--gh-u)) calc(360 * var(--gh-u)) calc(28 * var(--gh-u)) calc(26 * var(--gh-u));
}

.qi .qi-gh-win {
  overflow: hidden;
  border: 1px solid #2c3238;
  border-radius: calc(11 * var(--gh-u));
  background: #14171b;
  box-shadow: 0 calc(26 * var(--gh-u)) calc(58 * var(--gh-u)) calc(-22 * var(--gh-u)) rgb(0 0 0 / 0.6);
}

/* ---------------------------------------------------------------- tab strip (foreign) */

.qi .qi-gh-tabs {
  display: flex;
  align-items: flex-end;
  gap: calc(5 * var(--gh-u));
  height: calc(38 * var(--gh-u));
  padding-inline: calc(12 * var(--gh-u));
  background: #22262b;
}

.qi .qi-gh-lights {
  display: flex;
  align-items: center;
  flex: none;
  gap: calc(7 * var(--gh-u));
  padding-bottom: calc(12 * var(--gh-u));
}

.qi .qi-gh-lights i {
  display: block;
  width: calc(9 * var(--gh-u));
  height: calc(9 * var(--gh-u));
  border-radius: 50%;
  background: #4d545b;
}

.qi .qi-gh-tab {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: calc(27 * var(--gh-u));
  padding-inline: calc(12 * var(--gh-u));
  font-size: calc(11 * var(--gh-u));
  line-height: 1;
  color: #7d868e;
  white-space: nowrap;
}

/* Same background as the window body, so the active tab reads as continuous with the page. */
.qi .qi-gh-tab--active {
  margin-left: calc(10 * var(--gh-u));
  gap: calc(8 * var(--gh-u));
  padding-inline: calc(13 * var(--gh-u));
  border-radius: calc(8 * var(--gh-u)) calc(8 * var(--gh-u)) 0 0;
  background: #14171b;
  color: #d6dade;
}

.qi .qi-gh-tab-x { color: #6d757d; }

/* ---------------------------------------------------------------- address row (foreign) */

.qi .qi-gh-url {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--gh-u));
  height: calc(34 * var(--gh-u));
  padding-inline: calc(14 * var(--gh-u));
  border-bottom: 1px solid #22262b;
}

.qi .qi-gh-back {
  flex: none;
  font-family: var(--qi-mono);
  font-size: calc(12 * var(--gh-u));
  line-height: 1;
  color: #a8b0b8;
}

/* Greyed: there is no forward history. */
.qi .qi-gh-back--off { color: #4d545b; }

.qi .qi-gh-field {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  gap: calc(8 * var(--gh-u));
  height: calc(23 * var(--gh-u));
  padding-inline: calc(11 * var(--gh-u));
  border: 1px solid #262b31;
  border-radius: calc(12 * var(--gh-u));
  background: #1b1f24;
}

/* The browser's own secure indicator. Same hex as --qi-accent by coincidence, not by kinship. */
.qi .qi-gh-lock {
  flex: none;
  font-family: var(--qi-mono);
  font-size: calc(10 * var(--gh-u));
  line-height: 1;
  color: #2fd8b6;
}

.qi .qi-gh-addr {
  font-family: var(--qi-mono);
  font-size: calc(11 * var(--gh-u));
  line-height: 1;
  color: #a8b0b8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- GitHub header (foreign) */

.qi .qi-gh-bar {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--gh-u));
  height: calc(44 * var(--gh-u));
  padding-inline: calc(18 * var(--gh-u));
  border-bottom: 1px solid #22262b;
  background: #1b1f24;
}

.qi .qi-gh-octicon {
  flex: none;
  width: calc(17 * var(--gh-u));
  height: calc(17 * var(--gh-u));
  fill: #eef0f2;
}

.qi .qi-gh-search {
  display: flex;
  align-items: center;
  flex: none;
  width: calc(150 * var(--gh-u));
  height: calc(25 * var(--gh-u));
  padding-inline: calc(10 * var(--gh-u));
  border: 1px solid #2c3238;
  border-radius: calc(6 * var(--gh-u));
  background: #14171b;
  font-size: calc(11 * var(--gh-u));
  line-height: 1;
  color: #6d757d;
  white-space: nowrap;
  overflow: hidden;
}

.qi .qi-gh-navlink {
  flex: none;
  font-size: calc(12 * var(--gh-u));
  line-height: 1;
  color: #a8b0b8;
  white-space: nowrap;
}

.qi .qi-gh-avatar {
  margin-left: auto;
  flex: none;
  width: calc(21 * var(--gh-u));
  height: calc(21 * var(--gh-u));
  border-radius: 50%;
  background: #3b434b;
}

/* ---------------------------------------------------------------- filter row (foreign) */

.qi .qi-gh-filters {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--gh-u));
  height: calc(42 * var(--gh-u));
  padding-inline: calc(18 * var(--gh-u));
  border-bottom: 1px solid #22262b;
}

.qi .qi-gh-filter {
  flex: none;
  font-size: calc(12 * var(--gh-u));
  line-height: 1;
  color: #7d868e;
  white-space: nowrap;
}

.qi .qi-gh-filter--on {
  font-weight: 600;
  color: #eef0f2;
}

.qi .qi-gh-filter-count {
  font-family: var(--qi-mono);
  font-weight: 400;
  font-size: calc(11 * var(--gh-u));
  color: #7d868e;
}

.qi .qi-gh-div {
  flex: none;
  width: 1px;
  height: calc(16 * var(--gh-u));
  background: #2c3238;
}

/*
 * GitHub's control, ringed in LoudInk's accent because it is what the pending step is about
 * to press. The ring is ours, so it is the token; the button under it is theirs. Its label is
 * the pending step's label word for word — that repetition is the connective tissue.
 */
.qi .qi-gh-target {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: calc(7 * var(--gh-u));
  height: calc(27 * var(--gh-u));
  padding-inline: calc(12 * var(--gh-u));
  border: 1px solid var(--qi-accent);
  border-radius: calc(6 * var(--gh-u));
  background: color-mix(in srgb, var(--qi-accent) 12%, transparent);
  box-shadow: 0 0 0 calc(4 * var(--gh-u)) color-mix(in srgb, var(--qi-accent) 13%, transparent);
  font-weight: 500;
  font-size: calc(11 * var(--gh-u));
  line-height: 1;
  color: var(--qi-accent);
  white-space: nowrap;
}

/*
 * The pointer, parked on the corner of the control. Decorative, and the single element that
 * makes the whole rendering legible as "about to act" rather than "already did".
 */
.qi .qi-gh-cursor {
  position: absolute;
  left: calc(-9 * var(--gh-u));
  bottom: calc(-12 * var(--gh-u));
  width: calc(14 * var(--gh-u));
  height: calc(14 * var(--gh-u));
  border-radius: 50%;
  background: #eef0f2;
  box-shadow:
    0 0 0 calc(5 * var(--gh-u)) rgb(238 240 242 / 0.16),
    0 calc(2 * var(--gh-u)) calc(6 * var(--gh-u)) rgb(0 0 0 / 0.5);
}

/* ---------------------------------------------------------------- notifications (foreign) */

.qi .qi-gh-list {
  display: flex;
  flex-direction: column;
  height: calc(268 * var(--gh-u));
}

.qi .qi-gh-row {
  display: grid;
  grid-template-columns:
    calc(8 * var(--gh-u)) calc(15 * var(--gh-u)) calc(21 * var(--gh-u))
    calc(190 * var(--gh-u)) minmax(0, 1fr) calc(66 * var(--gh-u));
  gap: calc(13 * var(--gh-u));
  align-items: center;
  padding: calc(11 * var(--gh-u)) calc(18 * var(--gh-u));
  border-bottom: 1px solid #1e2328;
}

.qi .qi-gh-row:last-child { border-bottom: 0; }

.qi .qi-gh-dot {
  width: calc(7 * var(--gh-u));
  height: calc(7 * var(--gh-u));
  border-radius: 50%;
  background: #2fd8b6;
}

.qi .qi-gh-row--read .qi-gh-dot { background: none; }

.qi .qi-gh-check {
  width: calc(13 * var(--gh-u));
  height: calc(13 * var(--gh-u));
  border: 1px solid #3b434b;
  border-radius: calc(3 * var(--gh-u));
}

.qi .qi-gh-face {
  width: calc(21 * var(--gh-u));
  height: calc(21 * var(--gh-u));
  border-radius: 50%;
  background: #3b434b;
}

.qi .qi-gh-row--read .qi-gh-face { background: #2c3238; }

.qi .qi-gh-repo {
  font-weight: 500;
  font-size: calc(12 * var(--gh-u));
  line-height: 1.2;
  color: #eef0f2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qi .qi-gh-row--read .qi-gh-repo {
  font-weight: 400;
  color: #a8b0b8;
}

.qi .qi-gh-what {
  font-size: calc(12 * var(--gh-u));
  line-height: 1.2;
  color: #d6dade;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qi .qi-gh-row--read .qi-gh-what { color: #7d868e; }

.qi .qi-gh-when {
  font-family: var(--qi-mono);
  font-size: calc(11 * var(--gh-u));
  line-height: 1;
  color: #a8b0b8;
  text-align: right;
}

.qi .qi-gh-row--read .qi-gh-when { color: #6d757d; }

/* ---------------------------------------------------------------- approval card (ours) */

/*
 * From here down every value is a §02 token. The card floats beside the window over the
 * wallpaper — it does not overlap it, unlike the hero's transcript pill — and its top sits
 * 16 design pixels above the window's, so it reads as nearer the viewer than the page it is
 * talking about. Height is content-driven; nothing here sets it.
 */
.qi .qi-gh-card {
  position: absolute;
  top: calc(34 * var(--gh-u));
  right: calc(18 * var(--gh-u));
  width: calc(318 * var(--gh-u));
  overflow: hidden;
  border: 1px solid var(--qi-edge-strong);
  border-radius: calc(12 * var(--gh-u));
  background: var(--qi-panel);
  box-shadow: 0 calc(26 * var(--gh-u)) calc(60 * var(--gh-u)) calc(-16 * var(--gh-u)) rgb(0 0 0 / 0.75);
}

.qi .qi-gh-card-head {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--gh-u));
  padding: calc(12 * var(--gh-u)) calc(14 * var(--gh-u)) calc(11 * var(--gh-u));
}

.qi .qi-gh-card-name {
  font-weight: 600;
  font-size: calc(12 * var(--gh-u));
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--qi-ink);
}

.qi .qi-gh-needs {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--gh-u));
  font-family: var(--qi-mono);
  font-weight: 500;
  font-size: calc(10 * var(--gh-u));
  line-height: 1;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--qi-attention);
  white-space: nowrap;
}

.qi .qi-gh-needs-dot {
  flex: none;
  width: calc(5 * var(--gh-u));
  height: calc(5 * var(--gh-u));
  border-radius: 50%;
  background: var(--qi-attention);
  box-shadow: 0 0 0 calc(3 * var(--gh-u)) color-mix(in srgb, var(--qi-attention) 16%, transparent);
}

.qi .qi-gh-card-body {
  display: flex;
  flex-direction: column;
  gap: calc(11 * var(--gh-u));
  padding: 0 calc(14 * var(--gh-u)) calc(13 * var(--gh-u));
}

.qi .qi-gh-said {
  display: flex;
  flex-direction: column;
  gap: calc(5 * var(--gh-u));
}

.qi .qi-gh-said-label {
  font-family: var(--qi-mono);
  font-weight: 500;
  font-size: calc(10 * var(--gh-u));
  line-height: 1;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--qi-label);
}

/* §04: anything literally spoken is Plex Mono. The mockup sets this one in sans; §04 wins. */
.qi .qi-gh-quote {
  margin: 0;
  font-family: var(--qi-mono);
  font-size: calc(12 * var(--gh-u));
  line-height: 1.45;
  color: var(--qi-ink);
}

/* §04 StepList: rows are separated by their own rules, so the group has no gap. */
.qi .qi-gh-steps {
  display: flex;
  flex-direction: column;
}

.qi .qi-gh-step {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--gh-u));
  padding-block: calc(8 * var(--gh-u));
  border-top: 1px solid var(--qi-line);
}

.qi .qi-gh-step:last-child { border-bottom: 1px solid var(--qi-line); }

.qi .qi-gh-step-mark {
  flex: none;
  width: calc(10 * var(--gh-u));
  font-family: var(--qi-mono);
  font-size: calc(10 * var(--gh-u));
  line-height: 1;
  color: var(--qi-accent);
}

.qi .qi-gh-step-mark--pending {
  display: flex;
  justify-content: center;
}

/*
 * The pending marker: a hollow ring, not an ordinal. Tighter read, and it carries the signal.
 * Border-box and flex: none, so it is §04's 8px ring exactly and stays circular — the mockup
 * leaves it shrinkable inside a 10px slot, which renders it as a faint ellipse.
 */
.qi .qi-gh-ring {
  flex: none;
  width: calc(8 * var(--gh-u));
  height: calc(8 * var(--gh-u));
  border: max(1px, calc(2 * var(--gh-u))) solid var(--qi-attention);
  border-radius: 50%;
}

/* Done steps drop to mute and keep their timing; the pending one is ink because it is live. */
.qi .qi-gh-step-label {
  font-size: calc(12 * var(--gh-u));
  line-height: 1.3;
  color: var(--qi-mute);
}

.qi .qi-gh-step--now .qi-gh-step-label {
  font-weight: 500;
  color: var(--qi-ink);
}

.qi .qi-gh-step-meta {
  margin-left: auto;
  flex: none;
  padding-left: calc(8 * var(--gh-u));
  font-family: var(--qi-mono);
  font-size: calc(10 * var(--gh-u));
  line-height: 1;
  color: var(--qi-faint);
}

/* The blast radius of the write — the number the reader weighs. The only amber in the body. */
.qi .qi-gh-step--now .qi-gh-step-meta { color: var(--qi-attention); }

.qi .qi-gh-caption {
  margin: 0;
  font-size: calc(11 * var(--gh-u));
  line-height: 1.4;
  color: var(--qi-mute);
}

.qi .qi-gh-actions {
  display: flex;
  align-items: center;
  gap: calc(7 * var(--gh-u));
}

/*
 * DRAWN CONTROLS, NOT CONTROLS. These two were <button> elements with hover, pressed and
 * cursor: pointer, sitting inside a picture with no handler behind either of them — tab stops
 * 8 and 9 of the page's 24, beside a caption telling the reader to press ⏎. The component now
 * renders them as spans like every other part of the plate, and the affordances go with the
 * element: no cursor: pointer, no transition, no :hover and no :active. Every appearance rule
 * below is untouched, so the drawing looks exactly as it did.
 */
.qi .qi-gh-btn {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: calc(28 * var(--gh-u));
  border: 1px solid transparent;
  border-radius: calc(6 * var(--gh-u));
  font-family: var(--qi-sans);
  font-size: calc(12 * var(--gh-u));
  line-height: 1;
  white-space: nowrap;
}

.qi .qi-gh-btn--do {
  padding-inline: calc(14 * var(--gh-u));
  border-color: var(--qi-accent);
  background: var(--qi-accent);
  font-weight: 600;
  color: var(--qi-on-accent);
}

.qi .qi-gh-btn--skip {
  padding-inline: calc(12 * var(--gh-u));
  border-color: var(--qi-edge-strong);
  background: var(--qi-raised);
  font-weight: 500;
  color: var(--qi-body);
}

.qi .qi-gh-keys {
  margin-left: auto;
  flex: none;
  font-family: var(--qi-mono);
  font-size: calc(10 * var(--gh-u));
  line-height: 1;
  color: var(--qi-faint);
}

/* The reduced-motion override that used to sit here is gone with the transition it cancelled —
 * .qi-gh-btn no longer animates anything, in any motion preference. */

/* ---------------------------------------------------------------- narrow frames */

/*
 * Under 900px the 360px channel cannot hold the card, so the plate goes fluid at full size
 * and the card drops below the window — the one reflow in the whole block. Scaling further
 * instead would put the card's 10px mono meta under 8px, and letting it scroll is off the
 * table: this page must not scroll horizontally at any width.
 */
@container (max-width: 899px) {
  .qi .qi-gh-plate {
    --gh-u: 1px;
    width: 100%;
  }

  .qi .qi-gh-desk {
    padding: calc(22 * var(--gh-u)) calc(26 * var(--gh-u)) calc(26 * var(--gh-u));
  }

  .qi .qi-gh-card {
    position: static;
    width: 100%;
    max-width: calc(420 * var(--gh-u));
    margin-top: calc(22 * var(--gh-u));
  }
}

/*
 * Under 620px the recreated chrome has to shed the parts that are only there for texture —
 * the traffic lights, the background tabs, the secondary GitHub nav — so the parts that carry
 * meaning stay at full size and full contrast. The notification row goes two-line, which is
 * how GitHub itself renders it narrow, and the list stops being a fixed height because the
 * taller rows would otherwise be clipped mid-row.
 */
@container (max-width: 619px) {
  .qi .qi-gh-menu-item,
  .qi .qi-gh-lights,
  .qi .qi-gh-tab:not(.qi-gh-tab--active),
  .qi .qi-gh-navlink,
  .qi .qi-gh-filter:not(.qi-gh-filter--on),
  .qi .qi-gh-div,
  .qi .qi-gh-check,
  .qi .qi-gh-face {
    display: none;
  }

  .qi .qi-gh-tab--active { margin-left: 0; }

  .qi .qi-gh-search {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  .qi .qi-gh-list { height: auto; }

  .qi .qi-gh-row {
    grid-template-columns: calc(8 * var(--gh-u)) minmax(0, 1fr) auto;
    grid-template-areas:
      "dot repo when"
      "dot what what";
    align-items: baseline;
    row-gap: calc(4 * var(--gh-u));
  }

  .qi .qi-gh-dot { grid-area: dot; align-self: center; }
  .qi .qi-gh-repo { grid-area: repo; }
  .qi .qi-gh-what { grid-area: what; }
  .qi .qi-gh-when { grid-area: when; }
}

/* ================================================================ mobile crop
 *
 * Below 620px a recreated desktop cannot win. The tier system already drops the design width
 * to 420 and scales it to fit, which puts the compose message — the one sentence the hero is
 * arguing about — at under 10px. A whole Mac shrunk to a phone shows that a Mac exists; it
 * stops showing what LoudInk did.
 *
 * So on a phone the plate is cropped to its argument rather than scaled: the transcript pill
 * (what was said) and the compose card (what landed, with its receipt), both at full size. The
 * browser chrome, the menu bar, the Gmail sidebar and the inbox list are context that was only
 * ever legible on a wider screen, and they go.
 *
 * The crop is CSS-only. No element is removed from the markup and no component takes a
 * breakpoint prop, so the two renderings stay one drawing with one source of truth.
 */
@media (max-width: 620px) {
  /*
   * Stop scaling. The plate is no longer a fixed-width composition down here — it is a short
   * vertical stack that fits the column, so the transform rig has nothing to solve.
   */
  .qi-rendering-box {
    width: 100%;
    height: auto;
    transform: none;
  }

  .qi-rendering-plate {
    /*
     * The scale lives on the plate, not on the box — neutralising the box alone left the whole
     * crop still rendering at 0.8 and the receipt at 7.7px, which was the entire problem.
     */
    transform: none;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
    /* The desktop wallpaper is the frame for a desktop. Cropped to two surfaces, it would be a
       blue border around nothing. */
    background: transparent;
    border: 0;
  }

  /* Everything that only made sense as part of a whole screen. */
  .qi-rendering-plate .qi-mail-menubar,
  .qi-rendering-plate .qi-mail-tabstrip,
  .qi-rendering-plate .qi-mail-urlrow,
  .qi-rendering-plate .qi-mail-sidebar,
  .qi-rendering-plate .qi-mail-list {
    display: none;
  }

  /*
   * The window and the Gmail content stop being boxes and become pass-throughs, so the compose
   * card joins the plate's own column. `.qi-mail-compose` is a child of `.qi-mail-content`,
   * beside the sidebar and the message list — hiding the content outright took the card with it,
   * which left the crop showing the pill and nothing it produced.
   */
  .qi-rendering-plate .qi-mail-window,
  .qi-rendering-plate .qi-mail-content {
    display: contents;
  }

  .qi-rendering-plate .qi-mail-compose {
    position: static;
    width: 100%;
    /* Fully rounded now that it is a card in a stack rather than a panel rising off a window. */
    border-radius: var(--qi-r-radius-card, 10px);
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.7);
  }

  /* The pill led the composition; in a stack it is simply the first thing said. */
  .qi-rendering-plate .qi-mail-pill {
    width: 100%;
    margin: 0;
  }
}