/* Only the window frame around the replica and the page-specific layout of the queue; the card itself is styled by
   vendor/2ic/ (2ic's own tokens and components, scoped under .app-replica). Tokens are 2ic's inside the frame, except
   --control-h, --radius-round and --border-divider, which the replica inherits from the page because 2ic has no touch size or round
   radius of its own and its hairline is a raw 1px. */

.app-replica { width: 100%; border: var(--border-divider) solid var(--border); border-radius: var(--radius); overflow: hidden; text-align: left; }
.app-titlebar { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); background: var(--surface-raised); border-bottom: var(--border-divider) solid var(--border); }
.app-dot { width: var(--s3); height: var(--s3); border-radius: var(--radius-round); background: var(--decorative); }
.app-title { margin-left: var(--s2); color: var(--text-muted); font-size: var(--text-caption); line-height: var(--text-caption--line-height); }
.app-body { padding: var(--s6); }
.app-h1 { margin: 0; font-size: var(--text-title-lg); line-height: var(--text-title-lg--line-height); letter-spacing: var(--text-title-lg--letter-spacing); font-weight: var(--text-title-lg--font-weight); color: var(--text); }
.app-replica .app-body > p { margin: 0; }
.app-replica .biz { margin: 0; }
.app-replica .why { margin: 0 0 var(--s2); }
.app-replica .card-head h2 > span { overflow-wrap: anywhere; }
.app-replica .change-row { align-items: flex-start; }
.app-replica .change-row textarea { flex: 1 1 calc(var(--s10) * 6); min-width: 0; }
/* A draft wraps inside the card rather than pushing the page sideways on a phone. */
.app-replica .model-body { white-space: pre-wrap; overflow-wrap: anywhere; }
/* The app is a desktop window and never this narrow; the replica is, so the head may wrap. */
.app-replica .queue .card-head { flex-wrap: wrap; }
@media (max-width: 767px) {
  .app-body { padding: var(--s4); }
  /* The change request's example ran past two rows on a phone and was cut; three rows hold it. */
  .app-replica .change-row textarea { min-height: calc(3lh + 2 * var(--s2) + 2 * var(--border-divider)); }
}
/* A finger needs more than the app's 32 px control row. */
@media (pointer: coarse) { .app-replica { --density-control-h: var(--control-h); } }