/*
  desk.css: the Marzy desk window as live HTML (Mulholland lab /a, 2026-09-25).
  Pairs with desk.js; everything is namespaced desk-*. Needs nothing from a.css.

  Scale. The window is drawn at marzy-site's logical size (the screen 1120
  wide, the title bar as the site draws it at 1060) and every length is a
  multiple of a unit taken from the container's width, so the browser lays
  out and rasterises each glyph at its final size: no bitmap, no transform
  scale. --u is one logical pixel of the screen, --ub one pixel of the title
  bar (floored so the tabs and Pause stay readable; every control keeps a
  24px hit area regardless).

  Layouts, by the width of the box the window sits in:
    from 960px   queue, thread and record, as the product draws them
                 (1120 logical px; 12.3px type at 1060 wide)
    600-960px    thread and record at their product widths (870 logical px;
                 10.1px type in the 679px MarzyOS media slot, not 7.9px)
    under 600px  the thread alone, at 440 logical px, so it stays readable
                 on a phone (10.3px type at 350px wide instead of 4px)
  .desk--fill fills a positioned box (a 16:9 .media slot) instead of taking
  the window's own height; the thread keeps its newest line in view.

  Tokens. Every value is a token in a/tokens.css: the --window-* roles hold
  the dark skin marzy-site gives MarzyDash inside the window (components.css
  .vv-win, unchanged), its type, and its measures in logical px, which this
  file multiplies by --u or --ub (calc(var(--u) * var(--window-space-16)) is
  16 logical px). Container queries cannot read custom properties, so their
  breakpoints are the one place a length is written here.
*/

.desk {
  container: desk / inline-size;
  position: relative;
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 0;
  font-family: var(--window-font-family);
  font-size: var(--window-font-size);
  font-weight: var(--type-weight);
  font-style: normal;
  line-height: var(--window-leading);
  text-align: left;
  /* The page's type setting stops at the window: a.css tracks body text at
     -.144px and a page may set case or spacing; the product sets none. */
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0;
  font-variant: normal;
  font-feature-settings: normal;
  white-space: normal;
}
.desk--fill { position: absolute; inset: 0; width: auto; container-type: size; }

/* The units: one logical pixel of the screen (--u) and of the title bar (--ub).
   Set on the window and on the frame drawn before boot (.desk::before), so
   that frame takes the window's own height. */
.desk__win, .desk::before {
  --u: calc(var(--window-box-width) / var(--window-width));
  --ub: clamp(var(--window-unit-min), calc(var(--window-box-width) / var(--window-bar-width)), var(--window-unit-max));
}
.desk__win {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--window-frame);
  color: var(--window-foreground);
  border-radius: calc(var(--ub) * var(--window-radius));
  box-shadow: 0 calc(var(--ub) * var(--window-shadow-y)) calc(var(--ub) * var(--window-shadow-blur)) var(--window-shadow);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
}
.desk *, .desk *::before, .desk *::after { box-sizing: border-box; }
.desk--fill .desk__win { height: 100%; border-radius: inherit; box-shadow: none; }

/* Browsers without container units: desk.js sets --desk-w from the box. */
@supports not (width: 1cqi) {
  .desk__win, .desk::before { --u: calc(var(--desk-w, var(--window-fallback-width)) / var(--window-width)); --ub: clamp(var(--window-unit-min), calc(var(--desk-w, var(--window-fallback-width)) / var(--window-bar-width)), var(--window-unit-max)); }
}

/* Before desk.js boots (or without script): the window's frame at exactly the
   height the booted window takes at this width (the pseudo-element is a child
   of the container, so it reads the same units and layouts), with the summary
   over it, so the page does not move when the window arrives. */
.desk:not(.desk--ready)::before {
  content: "";
  display: block;
  height: calc(var(--ub) * var(--window-bar-height) + var(--u) * var(--window-screen-height));
  background: var(--window-frame);
  border-radius: calc(var(--ub) * var(--window-radius));
}
.desk--fill:not(.desk--ready)::before { height: 100%; border-radius: 0; }
.desk:not(.desk--ready) .desk__alt {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--window-caption-inset);
  overflow: hidden;
  color: var(--window-faint);
  font-size: var(--window-font-size);
  text-align: center;
}
.desk--ready .desk__alt, .desk-sr {
  position: absolute !important; width: var(--hairline); height: var(--hairline); padding: 0; margin: calc(var(--hairline) * -1); overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── Title bar: lights, the MarzyOS wordmark, the vertical, state, Pause, the brain ── */
.desk__bar {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(var(--ub) * var(--window-space-8));
  height: calc(var(--ub) * var(--window-bar-height));
  padding: 0 calc(var(--ub) * var(--window-space-14));
  font-size: calc(var(--ub) * var(--window-text-sm));
  font-weight: var(--type-weight-medium);
  line-height: var(--window-leading-none);
  color: var(--window-tab);
}
.desk__lights { display: flex; gap: calc(var(--ub) * var(--window-space-8)); flex: none; }
.desk__lights i { display: block; width: calc(var(--ub) * var(--window-light-size)); height: calc(var(--ub) * var(--window-light-size)); border-radius: var(--round-radius); background: var(--window-light); }
.desk__wm { display: block; flex: none; height: calc(var(--ub) * var(--window-wordmark-height)); margin-left: calc(var(--ub) * var(--window-space-6)); color: var(--window-mark); }
.desk__wm svg { display: block; height: 100%; width: auto; }
/* The vertical, centred on the window (a title bar centres its title). */
.desk__tabs, .desk__name {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.desk__tabs { display: flex; align-items: center; gap: calc(var(--ub) * var(--window-space-2)); }
.desk__name { color: var(--window-label); }
.desk__tab, .desk__toggle {
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  border: 0;
  background: var(--surface-clear);
  color: inherit;
  font: inherit;
  line-height: var(--window-leading-none);
  white-space: nowrap;
  cursor: pointer;
  padding: calc(var(--ub) * var(--window-space-5)) calc(var(--ub) * var(--window-space-10));
  border-radius: var(--pill-radius);
  transition: color var(--motion-quick) var(--motion-ease-standard), background-color var(--motion-quick) var(--motion-ease-standard);
}
/* Every control keeps a 24px hit area, whatever the window's size. */
.desk__tab::after, .desk__toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, var(--window-hit)); height: max(100%, var(--window-hit)); transform: translate(-50%, -50%); }
.desk__tab:hover, .desk__toggle:hover { color: var(--window-muted-foreground); }
.desk__tab[aria-pressed="true"] { color: var(--window-foreground); background: var(--window-pressed); cursor: default; }
.desk__tab:focus-visible, .desk__toggle:focus-visible { outline: var(--ring-width) solid var(--window-foreground); outline-offset: var(--window-ring-offset); }
.desk__end { margin-left: auto; display: flex; align-items: center; gap: calc(var(--ub) * var(--window-space-6)); flex: none; }
.desk__chip { padding: calc(var(--ub) * var(--window-space-3)) calc(var(--ub) * var(--window-space-10)); border-radius: var(--pill-radius); color: var(--window-warning); background: var(--window-warning-subtle); }
.desk__toggle { display: inline-flex; align-items: center; gap: calc(var(--ub) * var(--window-space-5)); padding-left: calc(var(--ub) * var(--window-space-8)); padding-right: calc(var(--ub) * var(--window-space-9)); }
.desk__glyph, .desk__glyph svg { display: block; width: calc(var(--ub) * var(--window-glyph-size)); height: calc(var(--ub) * var(--window-glyph-size)); fill: currentColor; }
.desk__toggle[hidden] { display: none; }
/* The thin-line brain needs room for its lines: 26 wide, non-scaling strokes. */
.desk__brain { display: block; flex: none; width: calc(var(--ub) * var(--window-brain-width)); margin-left: calc(var(--ub) * var(--window-space-4)); color: var(--window-brain); }
.desk__brain svg { display: block; width: 100%; height: auto; overflow: visible; stroke-width: var(--window-brain-stroke); }

/* ── The screen: queue · thread · record (marzy-site mzdash.css, .mz-work) ── */
.desk__screen {
  position: relative;
  flex: none;
  height: calc(var(--u) * var(--window-screen-height));
  display: grid;
  grid-template-columns: calc(var(--u) * var(--window-queue-width)) minmax(0, 1fr) minmax(0, 1.12fr);
  overflow: hidden;
  background: var(--window-background);
  font-size: calc(var(--u) * var(--window-text));
  line-height: var(--window-leading);
  font-weight: var(--type-weight);
  color: var(--window-foreground);
}
.desk--fill .desk__screen { flex: 1 1 auto; height: auto; min-height: 0; }
.desk__screen p, .desk__screen h3, .desk__screen h4, .desk__screen dl, .desk__screen dd, .desk__screen ul { margin: 0; }
/* The screen's icons (Lucide, as marzy-site draws them). */
.desk__screen svg { stroke-width: var(--window-icon-stroke); }
.desk-q, .desk-t, .desk-r { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

/* The queue of finished and waiting work. */
.desk-q { background: var(--window-background); border-right: var(--hairline) solid var(--window-border); }
.desk-q__head {
  padding: calc(var(--u) * var(--window-space-16)) calc(var(--u) * var(--window-space-18)) calc(var(--u) * var(--window-space-10));
  font-size: calc(var(--u) * var(--window-text-xs));
  font-weight: var(--type-weight-semibold);
  letter-spacing: var(--window-tracking-caps);
  text-transform: uppercase;
  color: var(--window-faint);
}
.desk-q__head em { font-style: normal; margin-left: calc(var(--u) * var(--window-space-6)); color: var(--window-label); }
.desk-q__item { display: flex; align-items: flex-start; gap: calc(var(--u) * var(--window-space-10)); padding: calc(var(--u) * var(--window-space-11)) calc(var(--u) * var(--window-space-18)); }
.desk-q__item.is-on { background: var(--window-surface); }
.desk-q__tick { flex: none; }
.desk-q__tick svg { display: block; width: calc(var(--u) * var(--window-icon-lg)); height: calc(var(--u) * var(--window-icon-lg)); margin-top: calc(var(--u) * var(--window-space-1)); color: var(--window-success); }
.desk-q__body { flex: 1; min-width: 0; }
.desk-q__top { display: flex; align-items: baseline; gap: calc(var(--u) * var(--window-space-10)); }
.desk-q__top b { flex: 1; min-width: 0; font-weight: var(--type-weight-medium); color: var(--window-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desk-q__top span { flex: none; font-size: calc(var(--u) * var(--window-text-xs)); color: var(--window-faint); }
.desk-q__sub { margin-top: calc(var(--u) * var(--window-space-2)); font-size: calc(var(--u) * var(--window-text-sm)); color: var(--window-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The thread that produced the selected item. */
.desk-t { background: var(--window-surface); color: var(--window-label); }
.desk-t__head { flex: none; padding: calc(var(--u) * var(--window-space-16)) calc(var(--u) * var(--window-content-inset)) calc(var(--u) * var(--window-space-12)); font-weight: var(--type-weight-medium); color: var(--window-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desk-t__scroll { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 0 calc(var(--u) * var(--window-content-inset)); }
.desk-ask { margin-bottom: calc(var(--u) * var(--window-space-14)) !important; padding: calc(var(--u) * var(--window-space-12)) calc(var(--u) * var(--window-space-14)); border-radius: calc(var(--u) * var(--window-radius-md)); background: var(--window-background); color: var(--window-foreground); line-height: var(--window-leading-message); }
.desk-step { margin: 0 0 calc(var(--u) * var(--window-space-7)) !important; color: var(--window-muted-foreground); line-height: var(--window-leading-compact); }
.desk-step > span { margin-right: calc(var(--u) * var(--window-space-6)); color: var(--window-foreground); }
.desk-said { margin: calc(var(--u) * var(--window-space-14)) 0 !important; color: var(--window-label); line-height: var(--window-leading); }
.desk-art { display: flex; align-items: center; gap: calc(var(--u) * var(--window-space-9)); margin-bottom: calc(var(--u) * var(--window-space-8)); padding: calc(var(--u) * var(--window-space-10)) calc(var(--u) * var(--window-space-13)); border-radius: calc(var(--u) * var(--window-radius-sm)); background: var(--window-background); color: var(--window-foreground); }
.desk-art svg { flex: none; width: calc(var(--u) * var(--window-icon)); height: calc(var(--u) * var(--window-icon)); color: var(--window-muted-foreground); }
.desk-art span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desk-art em { flex: none; margin-left: auto; font-style: normal; color: var(--window-positive); font-variant-numeric: tabular-nums; }
.desk-comp {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * var(--window-space-10));
  margin: calc(var(--u) * var(--window-space-12)) calc(var(--u) * var(--window-content-inset)) calc(var(--u) * var(--window-space-18));
  padding: calc(var(--u) * var(--window-space-10)) calc(var(--u) * var(--window-space-10)) calc(var(--u) * var(--window-space-10)) calc(var(--u) * var(--window-space-14));
  border-radius: calc(var(--u) * var(--window-radius-lg));
  background: var(--window-background);
  color: var(--window-typed);
  font-size: calc(var(--u) * var(--window-text-input));
}
.desk-comp span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desk-comp i { flex: none; display: grid; place-items: center; width: calc(var(--u) * var(--window-send-size)); height: calc(var(--u) * var(--window-send-size)); margin-left: auto; border-radius: calc(var(--u) * var(--window-radius-xs)); background: var(--window-send); color: var(--window-send-foreground); }
.desk-comp i svg { width: calc(var(--u) * var(--window-icon-sm)); height: calc(var(--u) * var(--window-icon-sm)); stroke-width: var(--window-icon-stroke-bold); }

/* The record she is working on. */
.desk-r { background: var(--window-surface); border-left: var(--hairline) solid var(--window-border); }
.desk-r__bar { flex: none; display: flex; align-items: center; gap: calc(var(--u) * var(--window-space-12)); padding: calc(var(--u) * var(--window-space-12)) calc(var(--u) * var(--window-space-16)); border-bottom: var(--hairline) solid var(--window-border); }
.desk-r__nav { display: inline-flex; gap: calc(var(--u) * var(--window-space-8)); color: var(--window-faint); }
.desk-r__nav svg { display: block; width: calc(var(--u) * var(--window-icon)); height: calc(var(--u) * var(--window-icon)); }
.desk-r__url { flex: 1; min-width: 0; padding: calc(var(--u) * var(--window-space-5)) calc(var(--u) * var(--window-space-11)); border-radius: calc(var(--u) * var(--window-radius-xs)); background: var(--window-background); color: var(--window-muted-foreground); font-size: calc(var(--u) * var(--window-text-sm)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desk-r__body { display: flex; flex-direction: column; gap: calc(var(--u) * var(--window-space-14)); padding: calc(var(--u) * var(--window-space-18)) calc(var(--u) * var(--window-content-inset)); overflow: hidden; }
/* A record about a place or an object leads with it (16:7). The photo is the
   one in the lab's own poster for that loop, cropped by background geometry:
   the photo sits at 1878.5,416.7 (891.45 x 390) in the 2880x1710 poster; the
   crop is inset 3px so no poster edge can show. Neutral block until it loads. */
.desk-photo { flex: none; width: 100%; aspect-ratio: var(--window-photo-aspect); margin-bottom: calc(var(--u) * var(--window-space-14)); border-radius: calc(var(--u) * var(--window-radius-md)); background-color: var(--window-border); background-repeat: no-repeat; background-size: var(--window-photo-crop-size); background-position: var(--window-photo-crop-position); }
.desk-photo--realestate { background-image: url("/lab-media/product/realestate/cre-poster-2880.webp"); }
.desk-photo--ecommerce { background-image: url("/lab-media/product/ecommerce/vendor-poster-2880.webp"); }
.desk-r__title { font-size: calc(var(--u) * var(--window-text-title)); font-weight: var(--type-weight); line-height: var(--window-leading-title); letter-spacing: var(--window-tracking-title); color: var(--window-foreground); }
.desk-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--u) * var(--window-space-7)) calc(var(--u) * var(--window-space-14)); font-size: calc(var(--u) * var(--window-text-sm)); }
.desk-fields div { display: flex; justify-content: space-between; gap: calc(var(--u) * var(--window-space-8)); min-width: 0; padding-bottom: calc(var(--u) * var(--window-space-6)); border-bottom: var(--hairline) solid var(--window-border); }
.desk-fields dt { color: var(--window-faint); white-space: nowrap; }
.desk-fields dd { color: var(--window-foreground); font-weight: var(--type-weight-medium); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.desk-sec h4 { margin-bottom: calc(var(--u) * var(--window-space-4)) !important; font-size: calc(var(--u) * var(--window-text-xs)); font-weight: var(--type-weight-semibold); line-height: var(--window-leading-heading); letter-spacing: var(--window-tracking-heading); color: var(--window-label); }
.desk-sec p, .desk-sec ul { font-size: calc(var(--u) * var(--window-text-sm)); line-height: var(--window-leading); color: var(--window-muted-foreground); }
.desk-sec ul { padding: 0 0 0 calc(var(--u) * var(--window-space-14)); list-style: none; }
.desk-sec li { margin: calc(var(--u) * var(--window-space-3)) 0; }

/* A panel with more than its box holds (a short slot) fades at the cut rather
   than slicing a line: the thread at the top, where old lines leave, and the
   record at the bottom. desk.js sets .is-over. */
.desk-t__scroll.is-over { -webkit-mask-image: linear-gradient(to bottom, var(--mask-clear) 0, var(--mask-solid) calc(var(--u) * var(--window-fade-top))); mask-image: linear-gradient(to bottom, var(--mask-clear) 0, var(--mask-solid) calc(var(--u) * var(--window-fade-top))); }
.desk-r__body.is-over { -webkit-mask-image: linear-gradient(to top, var(--mask-clear) 0, var(--mask-solid) calc(var(--u) * var(--window-fade-bottom))); mask-image: linear-gradient(to top, var(--mask-clear) 0, var(--mask-solid) calc(var(--u) * var(--window-fade-bottom))); }

/* ── The run ──────────────────────────────────────────────────────────────
   A row is absent until its beat, then lands (--motion-land, marzy-site's
   mz-land). The last stretch of a lap (--window-run-fade) fades the run out
   into the first frame. */
.desk-t__scroll [data-beat]:not(.is-in) { display: none; }
.desk-t__scroll .is-land { animation: desk-land var(--motion-land) var(--motion-ease-land) both; }
@keyframes desk-land { from { opacity: 0; transform: translateY(calc(var(--u) * var(--window-land-rise))); } to { opacity: 1; transform: none; } }
.desk-t__scroll.is-out .is-in { animation: desk-out var(--window-run-fade) var(--motion-ease-steady) both; }
@keyframes desk-out { from { opacity: 1; } to { opacity: 0; } }
/* Off screen, in a hidden tab or paused: everything holds where it is. */
.desk.is-still .desk__screen *, .desk.is-still .desk__screen *::before, .desk.is-still .desk__screen *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .desk__screen *, .desk__screen *::before, .desk__screen *::after { animation: none !important; }
  .desk__tab, .desk__toggle { transition: none; }
}

/* ── Middle boxes: thread and record, the queue set aside ──────────────────
   The two columns keep the product's own widths (410 and 460 logical px), so
   every line breaks where it does in the product; the type lands 28% larger
   than the three-column window would draw it in the same box. */
@container desk (min-width: 600px) and (max-width: 959.98px) {
  .desk__win, .desk::before { --u: calc(var(--window-box-width) / var(--window-width-middle)); --ub: clamp(var(--window-unit-min), calc(var(--window-box-width) / var(--window-bar-width-middle)), var(--window-bar-unit-max-middle)); }
  .desk__screen { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }
  .desk-q { display: none; }
}

/* ── Narrow boxes: the thread alone, at 440 logical px ─────────────────── */
@container desk (max-width: 599.98px) {
  /* One column is fluid, so past 440px wide the type stops at the product's own 13px. */
  .desk__win, .desk::before { --u: min(calc(var(--window-box-width) / var(--window-width-narrow)), var(--window-unit-max-narrow)); --ub: clamp(var(--window-bar-unit-min-narrow), calc(var(--window-box-width) / var(--window-width-narrow)), var(--window-bar-unit-max-narrow)); }
  .desk__screen { grid-template-columns: minmax(0, 1fr); height: calc(var(--u) * var(--window-screen-height-narrow)); }
  .desk:not(.desk--ready)::before { height: calc(var(--ub) * var(--window-bar-height) + var(--u) * var(--window-screen-height-narrow)); }
  .desk:is([data-desk="all" i], [data-desk="tabs" i], [data-desk*=","]):not(.desk--ready)::before { height: calc(var(--ub) * var(--window-bar-height-tabs) + var(--u) * var(--window-screen-height-narrow)); }
  .desk-q, .desk-r { display: none; }
  .desk__lights { display: none; }
  .desk__wm { margin-left: 0; }
  .desk__chip { display: none; }
  /* The tabs take a row of their own under the bar, and scroll if they must. */
  .desk--tabs .desk__bar { flex-wrap: wrap; align-content: flex-start; height: calc(var(--ub) * var(--window-bar-height-tabs)); row-gap: 0; padding-top: calc(var(--ub) * var(--window-space-8)); padding-bottom: calc(var(--ub) * var(--window-space-6)); }
  .desk--tabs .desk__tabs { position: static; transform: none; order: 3; flex: 1 0 100%; margin: calc(var(--ub) * var(--window-space-7)) calc(var(--ub) * var(--window-space-14) * -1) 0; padding: 0 calc(var(--ub) * var(--window-space-10)); overflow-x: auto; scrollbar-width: none; }
  .desk--tabs .desk__tabs::-webkit-scrollbar { display: none; }
  /* Inside the scrolling row the ring is drawn inside the pill, or the row would clip it. */
  .desk--tabs .desk__tab:focus-visible { outline-offset: var(--ring-offset-inset); }
}
/* The smallest boxes: Pause and Play keep their glyph and give up the word. */
@container desk (max-width: 359.98px) {
  .desk__toggle { padding-left: calc(var(--ub) * var(--window-space-7)); padding-right: calc(var(--ub) * var(--window-space-7)); }
  .desk__toggle .desk__word { position: absolute; width: var(--hairline); height: var(--hairline); overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
/* A narrow, short box (a 16:9 slot on a phone): the thread becomes a feed,
   newest line at the bottom, without its heading and composer. */
@container desk (max-width: 599.98px) and (max-height: 420px) {
  .desk--fill .desk-t__head, .desk--fill .desk-comp { display: none; }
  .desk--fill .desk-t__scroll { padding-top: calc(var(--u) * var(--window-space-16)); padding-bottom: calc(var(--u) * var(--window-space-8)); }
}

/* A caption chip over the box's bottom-left corner (a page's .media__cap
   beside a desk--fill). Three columns put the queue's empty foot under it;
   with the queue set aside the thread is what it would cover, so the composer
   steps out and the newest line stops clear of the chip. desk.js sets
   .desk--capped and --desk-cap (the chip's height above the box's foot). */
@container desk (max-width: 959.98px) {
  .desk--capped .desk-comp { display: none; }
  /* Padding, not a spacer box: a box under the rows would move as each row lands. */
  .desk--capped .desk-t__scroll { padding-bottom: var(--desk-cap, 0px); }
}